View Source LiveExWebRTC.Publisher (live_ex_webrtc v0.1.0)

Phoenix.LiveComponent for sending audio and video via WebRTC from a browser to a Phoenix app (browser publishes).

It will render a view with:

  • audio and video device selects
  • audio and video stream configs
  • stream preview
  • transmission stats

Once rendered, your Phoenix.LiveView will receive init_msg/0 and will start getting RTP audio and video packets that can be forwarded to other clients.

Publisher always negotiates a single audio and video track.

Assigns

JavaScript Hook

Publisher live component requires JavaScript hook to be registered under Publisher name. The hook can be created using createPublisherHook function. For example:

import { createPublisherHook } from "live_ex_webrtc";
let Hooks = {};
const iceServers = [{ urls: "stun:stun.l.google.com:19302" }];
Hooks.Publisher = createPublisherHook(iceServers);
let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: Hooks
});

Examples

<.live_component
  module={LiveExWebRTC.Publisher}
  id="publisher"
  ice_servers={[%{urls: "stun:stun.l.google.com:19302"}]}
/>

Summary

Types

Message sent to the Phoenix.LiveView after component's initialization.

Types

@type init_msg() ::
  {:live_ex_webrtc,
   %{pc: pid(), audio_track_id: String.t(), video_track_id: String.t()}}

Message sent to the Phoenix.LiveView after component's initialization.

  • pc - ExWebRTC.PeerConnection's pid spawned by this live component
  • audio_track_id - id of audio track
  • video_track_id - id of video track