# Vabu broadcaster element

`<vabu-broadcaster>` lets a DJ or host go live from a phone browser. Give it the WHIP address of a live stream and the stream key. The host picks a camera and microphone, checks the preview and the health numbers, and taps **Go live**.

It sends video over WHIP, so the live stream must be on a plane that takes WHIP from a browser (see [Planes](https://docs.vabu.live/guides/streams/planes.md)). Viewers watch it in [`<vabu-player>`](https://docs.vabu.live/guides/streams/player-element.md) like any other stream. The page must be served over HTTPS, or the browser will not give it the camera.

## Add it to a page

The element is not on npm yet. Build `packages/elements` and host `dist/vabu-broadcaster.js` (and the `i18n-*.js` file beside it) on your own site.

```html
<script type="module" src="/vabu-broadcaster.js"></script>

<vabu-broadcaster id="cam" whip-url="https://..." lang="sw"></vabu-broadcaster>
<script>
  document.getElementById('cam').token = STREAM_KEY_OR_BEARER // set it as a property, from your server
</script>
```

Read the WHIP address and key from your live stream on your server, then give them to the page for the host only. Never put them in a public page.

| Attribute | What it does |
|---|---|
| `whip-url` | The live stream's WHIP endpoint. |
| `token` (property, not an attribute) | The stream key or bearer token. It goes out as `Authorization: Bearer`, only to the origin of `whip-url`. Optional on Cloudflare Stream, where the `whip-url` carries the secret. Set it as a property so it stays out of the page's HTML. |
| `lang` | `en` or `sw`. Defaults to the page language. |

Methods: `goLive()` and `stop()`.

## What the host sees

- A live preview from the camera, with a camera picker, a microphone picker and a button that switches between the front and back camera. Switching while live does not drop the connection.
- Resolution, frame rate, bitrate and connection state, once live.
- **Go live** and **Stop**.

If the network drops, the element reconnects on its own: after 1 second, then 2, 4, and so on up to 30 seconds, for up to 8 tries. After that it says the connection was lost, and the host can tap **Try again**. A refused stream key does not retry.

## Events

| Event | `detail` |
|---|---|
| `vabu-broadcast-state` | `{ state }`: `idle`, `connecting`, `live`, `reconnecting` or `error`. |
| `vabu-error` | `{ code, fatal }`: `permission`, `noDevice`, `unsupported`, `auth`, `rejected`, `network` or `lost`. |

## Size

About 5 KB gzipped, plus Lit (about 6 KB). The build fails if the broadcaster with Lit goes over 14 KB gzipped.