View Source LiveExWebRTC.Subscriber (live_ex_webrtc v0.2.1)

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

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

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.