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

It will render a single HTMLVideoElement.

Once rendered, your Phoenix.LiveView will receive init_msg/0 and can start sending RTP packets to the browser using ExWebRTC.PeerConnection.send_rtp/4, where there first argument is a pid received in init_msg/0. For example:

ExWebRTC.PeerConnection.send_rtp(init_msg[:pc], init_msg[:audio_track_id], audio_packet)
ExWebRTC.PeerConnection.send_rtp(init_msg[:pc], init_msg[:video_track_id], video_packet)

Subscriber 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
• class - list of CSS/Tailwind classes that will be applied to the HTMLVideoPlayer. Defaults to "".

JavaScript Hook

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

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

Examples

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