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). Viewers watch it in <vabu-player> 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.

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

<vabu-broadcaster whip-url="https://..." token="STREAM_KEY_OR_BEARER" lang="sw"></vabu-broadcaster>

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	The stream key or bearer token. It goes out as Authorization: Bearer.
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.