Broadcasting

Broadcasting transmits live or pre-recorded content to wide audiences.

Choose your approach:

• HLS - Slight delay, better buffering
• WebRTC - Lower latency, less reliability

Call type for broadcasting

Use the livestream type for broadcasting. It defaults to backstage mode, allowing hosts to set up before going live.

Starting and stopping the broadcasting

Control broadcasting with Call methods:

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

alternatively:

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

Access the HLS playlist_url from call state once broadcasting starts:

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 ...
};

Use a third-party library like React Native Video for HLS playback.

Broadcasting via RTMP

Stream supports RTMP clients like OBS.

RTMP URL and stream key

Get RTMP address via call.state.ingress or useCallIngress(). Use a user token as stream key.

import { useCallStateHooks } from "@stream-io/video-react-native-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

1. Go to Settings > Stream
2. Select custom service
3. Server - Enter the rtmpURL from console
4. Stream Key - Enter the streamKey from console

Press Start Streaming - the RTMP stream appears as a video participant.