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

• ice_servers - a list of ExWebRTC.PeerConnection.Configuration.ice_server/0,
• ice_ip_filter - ExICE.ICEAgent.ip_filter/0,
• ice_port_range - Enumerable.t(non_neg_integer())/1,
• audio_codecs - a list of ExWebRTC.RTPCodecParameters.t/0,
• video_codecs - a list of ExWebRTC.RTPCodecParameters.t/0,
• gen_server_name - GenServer.name/0

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"}]}
/>