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

LiveView for capturing audio and video from a browser and sending it via WebRTC to `Membrane.WebRTC.Source`.

*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:
* creates WebRTC PeerConnection on the browser side.
* forwards signaling messages between the browser and `Membrane.WebRTC.Source` via `Membrane.WebRTC.Signaling`.
* sends audio and video streams to the related `Membrane.WebRTC.Source`.

## JavaScript Hook

Capture LiveView requires JavaScript hook to be registered under `Capture` name.
The hook can be created using `createCaptureHook` function.
For example:

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

## Examples

```elixir
defmodule StreamerWeb.StreamSenderLive do
  use StreamerWeb, :live_view

  alias Membrane.WebRTC.Live.Capture

  @impl true
  def render(assigns) do
  ~H"""
  <Capture.live_render socket={@socket} capture_id="capture" />
  """
  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 |> Capture.attach(id: "capture", signaling: signaling)
    {:ok, socket}
  end
end
```

# `t`

```elixir
@type t() :: %Membrane.WebRTC.Live.Capture{
  audio?: boolean(),
  id: String.t(),
  preview?: boolean(),
  signaling: Membrane.WebRTC.Signaling.t(),
  video?: boolean()
}
```

# `attach`

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

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

Created struct is saved in socket's assigns and then
it is sent by an attached hook to a child LiveView process.

Options:
* `id` - capture id. It is used to identify live view and generated HTML video player. It must be unique
within single page.
* `signaling` - `Membrane.WebRTC.Signaling.t()`, that has been passed to `Membrane.WebRTC.Source` as well.
* `video?` - if `true`, the video stream from the computer camera will be captured. Defaults to `true`.
* `audio?` - if `true`, the audio stream from the computer microphone will be captured. Defaults to `true`.
* `preview?` - if `true`, the function `Membrane.WebRTC.Live.Capture.live_render/1` will return a video HTML tag
with attached captured video stream. Defaults to `true`.

# `get_attached`

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

# `live_render`

Helper function for rendering Capture LiveView.

## Attributes

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

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

---

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