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.

Viewer Livestream

Viewer Livestream Screen Share

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.

TypeDefault Value
ComponentType| undefinedViewerLiveStreamTopView

LivestreamLayout

Component to customize the live stream video layout.

TypeDefault Value
ComponentType| undefinedLiveStreamLayout

ViewerLivestreamControls

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

TypeDefault Value
ComponentType| undefinedViewerLiveStreamControls

DurationBadge

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

TypeDefault Value
ComponentType| undefinedDurationBadge

FollowerCount

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

TypeDefault Value
ComponentType| undefinedFollowerCount

LiveIndicator

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

TypeDefault Value
ComponentType| undefinedLiveIndicator

ViewerLeaveStreamButton

Component to customize the leave stream button for the viewer.

TypeDefault Value
ComponentType| undefinedViewerLeaveStreamButton

FloatingParticipantView

Prop to customize the FloatingParticipantView component.

TypeDefault Value
ComponentType| undefinedFloatingParticipantView

onLeaveStreamHandler

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

Type
() => void | undefined

© Getstream.io, Inc. All Rights Reserved.