ViewerLivestream

The ViewerLivestream is the UI component that allows you to show the livestream view in the app with minimal efforts.

ViewerLivestream offers following features:

A fully fledged livestream user interface, complete with the capability to view the stream video content.
Real-time display of the livestream’s duration, along with a live indicator.
An indication of whether the stream is currently live, and a count of the number of participants who are actively watching the stream.

General usage

Let’s see how to show the ViewerLivestream UI:

import {
  Call,
  StreamCall,
  ViewerLivestream,
} from "@stream-io/video-react-native-sdk";

const VideoCallUI = () => {
  let call: Call;
  // your logic to create a new call or get an existing call

  return (
    <StreamCall call={call}>
      <ViewerLivestream />
    </StreamCall>
  );
};

Props

`ViewerLivestreamTopView`

Component to customize the top view at the viewer’s live stream.

Type	Default Value
`ComponentType`\| `undefined`	`ViewerLiveStreamTopView`

`LivestreamLayout`

Component to customize the live stream video layout.

Type	Default Value
`ComponentType`\| `undefined`	`LiveStreamLayout`

`ViewerLivestreamControls`

Component to customize the bottom view controls at the viewer’s live stream.

Type	Default Value
`ComponentType`\| `undefined`	`ViewerLiveStreamControls`

`DurationBadge`

Component to customize the Duration badge component on the viewer’s live stream’s top view.

Type	Default Value
`ComponentType`\| `undefined`	`DurationBadge`

`FollowerCount`

Component to customize the Follower count indicator on the viewer’s live stream’s top view.

Type	Default Value
`ComponentType`\| `undefined`	`FollowerCount`

`LiveIndicator`

Component to customize the Live indicator on the viewer’s live stream’s top view.

Type	Default Value
`ComponentType`\| `undefined`	`LiveIndicator`

`ViewerLeaveStreamButton`

Component to customize the leave stream button for the viewer.

Type	Default Value
`ComponentType`\| `undefined`	`ViewerLeaveStreamButton`

`FloatingParticipantView`

Prop to customize the FloatingParticipantView component.

Type	Default Value
`ComponentType`\| `undefined`	`FloatingParticipantView`

`onLeaveStreamHandler`

Handler to be called when the leave stream button is pressed by the viewer.

Type
`() => void` \| `undefined`

HostLivestream

LivestreamPlayer