View Source LiveExWebRTC.Publisher (live_ex_webrtc v0.5.0)
Component for sending audio and video via WebRTC from a browser to a Phoenix app (browser publishes).
It:
- renders:
- audio and video device selects
- audio and video stream configs
- stream preview
- transmission stats
- on clicking "Start Streaming", creates WebRTC PeerConnection both on the client and server side
- connects those two peer connections negotiatiing a single audio and video track
- sends audio and video from selected devices to the live view process
- publishes received audio and video packets to the configured PubSub
When LiveExWebRTC.Player
is used, audio and video packets are delivered automatically,
assuming both components are configured with the same PubSub.
If LiveExWebRTC.Player
is not used, you should subscribe to streams:audio:#{publisher_id}
and streams:video:#{publisher_id}
topics.
Keyframe requests should be sent on publishers:#{publisher_id}
topic e.g.
PubSub.broadcast(LiveTwitch.PubSub, "publishers:my_publisher", {:live_ex_webrtc, :keyframe_req})
JavaScript Hook
Publisher live view 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
defmodule LiveTwitchWeb.StreamerLive do
use LiveTwitchWeb, :live_view
alias LiveExWebRTC.Publisher
@impl true
def render(assigns) do
~H"""
<Publisher.live_render socket={@socket} publisher={@publisher} />
"""
end
@impl true
def mount(_params, _session, socket) do
socket = Publisher.attach(socket, id: "publisher", pubsub: LiveTwitch.PubSub)
{:ok, socket}
end
end
Summary
Types
@type on_packet() :: (publisher_id :: String.t(), packet_type :: :audio | :video, packet :: ExRTP.Packet.t(), socket :: Phoenix.LiveView.Socket.t() -> packet :: ExRTP.Packet.t())
@type t() :: struct()
Functions
@spec attach(Phoenix.LiveView.Socket.t(), Keyword.t()) :: Phoenix.LiveView.Socket.t()
Attaches required hooks and creates t/0
struct.
Created struct is saved in socket's assigns and has to be passed to LiveExWebRTC.Publisher.live_render/1
.
Options:
id
- publisher id. This is typically your user id (if there is users database). It is used to identify live view and generated HTML elements.pubsub
- a pubsub that publisher live view will use for broadcasting audio and video packets received from a browser. See module doc for more.on_connected
- callback called when the underlying peer connection changes its state to the:connected
. Seeon_connected/0
.on_packet
- callback called for each audio and video RTP packet. Can be used to modify the packet before publishing it on a pubsub. Seeon_packet/0
.ice_servers
- a list ofExWebRTC.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 ofExWebRTC.RTPCodecParameters.t/0
,video_codecs
- a list ofExWebRTC.RTPCodecParameters.t/0
,pc_genserver_opts
-GenServer.options/0
for the underlyingExWebRTC.PeerConnection
process.
Helper function for rendering Publisher live view.
Attributes
socket
(Phoenix.LiveView.Socket
) (required) - Parent live view socket.publisher
(LiveExWebRTC.Publisher
) (required) - Publisher struct. It is used to pass publisher id to the newly created live view via live view session. This data is then used to do a handshake between parent live view and child live view during which child live view receives the whole Publisher struct.