Skip to main content

Broadcasting

Broadcasting serves as a means of transmitting live or pre-recorded content to a wide audience.

We can choose from two approaches to broadcasting the media:

  1. HLS - slight delay, better buffering
  2. WebRTC - lower latency, less reliability

It is up to the integrators to decide, what approach will be used in their apps for the audience to consume the streams.

note

We have built a livestream app tutorial that relies on the broadcasting feature. The demo expands on how to implement both, the HLS and the WebRTC approach to streaming.

Call type for broadcasting

Stream infrastructure recognizes few pre-built call types. Among them, the type livestream type is the best suited for broadcasting events. When a livestream call is created, it is set to backstage mode by default. The backstage mode makes it easy to build a flow where hosts can set up cameras and equipment before going live.

Starting and stopping the broadcasting

We have the following Call methods at our disposal to start and stop the broadcasting:

await call.startHLS();
await call.stopHLS();

alternatively:

await call.goLive({ start_hls: true });

Once started broadcasting, the data source URL is available through playlist_url property accessible through the Call state:

import { useCallStateHooks } from '@stream-io/video-react-sdk';

// omitted code ...

const YourComponent = () => {
const { useCallEgress } = useCallStateHooks();
const egress = useCallEgress();
const m3u8Playlist = egress?.hls.playlist_url;

// omitted code ...
};

To play the video over HLS, a third-party library is required (for example HLS.js).

Did you find this page helpful?