LivestreamPlayer

The LivestreamPlayer is a UI component that plays a WebRTC livestream given the call ID and the call type. Under the hood, it uses the LivestreamLayout component.

General usage

Let’s see how to render the LivestreamPlayer UI:

import {
  LivestreamPlayer,
  StreamVideo,
  StreamVideoClient,
} from "@stream-io/video-react-sdk";

export const MyLivestreamScreen = () => {
  let client: StreamVideoClient; // init the client
  return (
    <StreamVideo client={client}>
      <LivestreamPlayer callType="livestream" callId="my-call-id" />
    </StreamVideo>
  );
};

Props

callType

The call type. Typically, livestream.

callId

The call ID.

layoutProps

A list of props that can be passed to the LivestreamLayout component. You can read more about it here.

joinBehavior

Determines when the viewer joins the call.

"asap" behavior means joining the call as soon as it is possible (either the join_ahead_time_seconds setting allows it, or the user has a the capability to join backstage).

"live" behavior means joining the call when it goes live.