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 using the web broadcaster is that you can use just about any hardware or software as input. As long as you can connect the hardware to your computer and are able to pipe the video output as a WebRTC input. This means you can broadcast using your favourite camera and microphone together with video production software to add graphics, mix inputs etc. during a live broadcast.

Iframe embed

The easiest way to integrate Bambuser live broadcasting on your web site is to embed a web broadcaster in an iframe. To generate an iframe embed you can visit the Developer 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.

Application

If you don't have an application id yet you can generate one on the Developer 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(). 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 or embed a player by using the broadcast id in a signed resourceUri.

Events

Broadcaster events: started, registeredBroadcastId, stopped

Support and limitations

The Bambuser web broadcaster is based on WebRTC. This means it will only work in browsers and platforms which have complete WebRTC support. A hint whether or not your browser is supported can be found here. A Bambuser rule of thumb is to utilize the web broadcaster when you want your users to be able to contribute with videos using their webcams and to implement our 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

For the web broadcaster to be operational it needs to be embedded on a secure website using HTTPS. This means that anyone trying to access your site via http://your.domain.com will not be able to use the web broadcaster and will encounter an error message.