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).

Broadcasting via RTMP

Our systems provide first-class support for streaming from RTMP clients as OBS. To connect your OBS project in a Stream Call, please follow the next steps:

RTMP URL and stream key

Our call instance exposes its RTMP address through call.state.ingress and useCallIngress() call state hook. Stream Key in our case is a standard user token.

You can take this information and use it to configure OBS:

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

const { useCallIngress } = useCallStateHooks();
const ingress = useCallIngress();

const rtmpURL = ingress?.rtmp.address;
const streamKey = myUserAuthService.getUserToken(rtmpUserId);

console.log('RTMP url:', rtmpURL, 'Stream key:', streamKey);

Configure OBS

• Go to Settings > Stream
• Select custom service
• Server: enter the rtmpURL logged in the console
• Stream Key: enter the streamKey logged in the console

Press Start Streaming in OBS and the RTMP stream will now show up in your call just like a regular video participant.