LiveView for playing audio and video received via WebRTC from Membrane.WebRTC.Sink.

Note: This module will be available in your code only if you add {:phoenix, "~> 1.7"} and {:phoenix_live_view, "~> 1.0"} to the dependencies of of your root project.

It:

• renders a single HTMLVideoElement.
• creates WebRTC PeerConnection on the browser side.
• forwards signaling messages between the browser and Membrane.WebRTC.Sink via Membrane.WebRTC.Signaling.
• attaches audio and video from the Elixir to the HTMLVideoElement.

JavaScript Hook

Player live view requires JavaScript hook to be registered under Player name. The hook can be created using createPlayerHook function. For example:

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

Examples

defmodule StreamerWeb.StreamViewerLive do
  use StreamerWeb, :live_view

  alias Membrane.WebRTC.Live.Player

  @impl true
  def render(assigns) do
  ~H"""
  <Player.live_render socket={@socket} player_id={"player"} />
  """
  end

  @impl true
  def mount(_params, _session, socket) do
    signaling = Membrane.WebRTC.Signaling.new()
    {:ok, _supervisor, _pipelne} = Membrane.Pipeline.start_link(MyPipeline, signaling: signaling)

    socket = socket |> Player.attach(id: "player", signaling: signaling)
    {:ok, socket}
  end
endcopy