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 |