HostLivestream

The HostLivestream is the UI component that allows you to show the livestream view in the app on the host's end with minimal efforts. So you don't need to take care much about each feature that you need to build a video livestream call screen with this component.

HostLivestream offers following features:

• A fully fledged livestream user interface, complete with the capability to host and 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.
• Buttons to start and end the livestream and media control buttons to pause/resume audio/video streams.

Host Livestream Start

Host Livestream End

General usage

Let's see how to show the HostLivestream UI:

import {
  Call,
  StreamCall,
  HostLivestream,
} 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}>
      <HostLivestream />
    </StreamCall>
  );
};

Props

hls

Enable HTTP livestreaming

Type	Default
boolean	false

HostLivestreamTopView

Component to customize the top view at the host's live stream.

Type	Default Value
ComponentType| undefined	HostLiveStreamTopView

LivestreamLayout

Component to customize the live stream video layout.

Type	Default Value
ComponentType| undefined	LiveStreamLayout

HostLivestreamControls

Component to customize the bottom view controls at the host's live stream.

Type	Default Value
ComponentType| undefined	HostLiveStreamControls

note

To optionally add the screen-sharing option to livestream, you can add the exported LivestreamScreenShareButton from the SDK in your own HostLiveStreamControls component.

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

HostStartStreamButton

Component to customize the host's start/end live stream button.

Type	Default Value
ComponentType| undefined	HostStartStreamButton

LivestreamMediaControls

Component to customize the host's media control(audio/video) buttons.

Type	Default Value
ComponentType| undefined	LiveStreamMediaControls

onStartStreamHandler

Handler to be called when the Start Stream button is pressed.

Type
() => void | undefined

onEndStreamHandler

Handler to be called when the End Stream button is pressed.

Type
() => void | undefined

ScreenShareOverlay

Component to customize the screen share overlay, when the screen is shared by a user.

Type	Default Value
ComponentType| undefined	ScreenShareOverlay