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:
It is up to the integrators to decide, what approach will be used in their apps for the audience to consume the streams.
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.