How to broadcast live video from a website

Using Bambuser's WebRTC based web broadcaster you can create a live streaming experience on your website.

An advantage of using the web broadcaster is that you can use any hardware or software that can pipe the video output to a WebRTC input. Use your favourite cameras, microphones and video production software to mix inputs and add graphics during a live broadcast.

Iframe embed

Integrate Bambuser live broadcasting on your web site by embedding a web broadcaster in an iframe. To generate an iframe embed you can visit the Developer (opens new window) page and use the "Broadcaster embed code"-generator. Simply select which web application id to generate it for and enter the domains you intend to embed the broadcaster on.

Alternatively generate embed URL:s programmatically using the broadcasterEmbedUrl (opens new window) API endpoint.

Application

If you don't have an application id yet you can generate one on the Developer (opens new window) page. Enter a title and select "Web" as the desired platform. All created web applications are selectable in the embed code generator's application dropdown.

Domain

Enter the domain(s) you intend to embed the web broadcaster on separated by a comma ,. i.e. your.domain.com, go.live.org. This will prevent the embed code from being used on any other site.

Syntax

<iframe
  src="https://dist.bambuser.net/broadcaster/
    ?application_id=<YOUR_APPLICATION_ID
    &ticket=<SIGNED_TICKET>"
  style="border: none"
  allowfullscreen
  allow="microphone; camera">
</iframe>

Iframe scaling and dimensions

If you want to make sure the web broadcaster controls are sized as expected on various devices, make sure you have the viewport meta tag added to your page header.

<meta name="viewport" content="width=device-width,initial-scale=1">

Listening to broadcaster events

Events are sent from the broadcaster iframe to the parent page using Window.postMessage() (opens new window). This allows the page using the iframe broadcaster to keep track of the broadcaster events and react accordingly.

Example:

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://dist.bambuser.net') {
    // Don't trust messages from other origins
    return;
  }
  var broadcasterEvent = event.data.broadcasterEvent;
  if (broadcasterEvent && broadcasterEvent.name === 'registeredBroadcastId') {
    console.log('broadcast id: ', broadcasterEvent.data);
  }
}, false);

TIP

The broadcast id may be useful for associating the broadcast with a certain user or event. Get the full broadcast details calling the Bambuser Metadata API (opens new window) or embed a player by using the broadcast id in a signed resourceUri.

Events

Broadcaster events: hasInputAccess, started, registeredBroadcastId, currentViewers, error, stopped

Control the broadcaster programmatically

To control the broadcaster programmatically send the desired action to the broadcaster iframe using Window.postMessage() (opens new window).

Example:

<iframe id="my-broadcaster" src="<GENERATED_BROADCASTER_SOURCE>" style="border: none" allowfullscreen allow="microphone; camera"></iframe>
<button onclick="startBroadcasting();">Start</button>
<script>
  // Reference the embeded broadcaster iframe
  var broadcaster = document.getElementById('my-broadcaster').contentWindow;
  function startBroadcasting() {
    if (!broadcaster) return;
    // Post the start action via postMessage
    broadcaster.postMessage({action: 'start'}, '*');
  }
</script>

Actions

Actions are sent to the broadcaster as objects including an action property:

{
  action: 'start'
}

Broadcaster actions: start, stop

Support and limitations

The Bambuser web broadcaster is based on WebRTC (opens new window) and will only work in browsers and platforms which have complete WebRTC support. A hint whether your browser is supported or not can be found here (opens new window). Integrate the web broadcaster when you want users to contribute videos from their webcams, but integrate our native Broadcaster SDKs for iOS and Android to gather content from mobile phones.

Mobile browsers

Functionality and performance may vary between browsers. Especially on smartphones compatibility and performance can differ, causing the stream not to adapt well to varying network conditions. On smartphones we recommend using our native app or SDK for the best experience.

HTTPS

The web broadcaster has to be embedded on a secure website using HTTPS. Anyone trying to access your site via http://your.domain.com (opens new window) will encounter an error message in the web broadcaster.