# `Membrane.WebRTC.Live.Player`
[🔗](https://github.com/membraneframework/membrane_webrtc_plugin/blob/v0.26.7/lib/membrane_webrtc/live/player.ex#L2)

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:

```javascript
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
});
```

## Examples

```elixir
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
end
```

# `t`

```elixir
@type t() :: %Membrane.WebRTC.Live.Player{
  id: String.t(),
  signaling: Membrane.WebRTC.Signaling.t()
}
```

# `attach`

```elixir
@spec attach(Phoenix.LiveView.Socket.t(), Keyword.t()) :: Phoenix.LiveView.Socket.t()
```

  Attaches required hooks and creates `Membrane.WebRTC.Live.Player` struct.

Created struct is saved in socket's assigns (in `socket.assigns[Membrane.WebRTC.Live.Player][id]`) and then
it is sent by an attached hook to a child live view process.

Options:
* `id` - player id. It is used to identify live view and generated HTML video player. It must be unique
withing single page.
* `signaling` - `Membrane.WebRTC.Signaling.t()`, that has been passed to `Membrane.WebRTC.Sink` as well.

# `get_attached`

```elixir
@spec get_attached(Phoenix.LiveView.Socket.t(), String.t()) :: t()
```

# `live_render`

Helper function for rendering Player live view.

## Attributes

* `socket` (`Phoenix.LiveView.Socket`) (required) - Parent live view socket.
* `player_id` (`:string`) (required) - ID of a `player` previously attached to the socket. It has to be the same as the value passed to `:id`
  field `Membrane.WebRTC.Live.Player.attach/2`.

* `class` (`:string`) - CSS/Tailwind classes for styling. Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*