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>
);
};
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:
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 |