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

TypeDefault
booleanfalse

HostLivestreamTopView

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

TypeDefault Value
ComponentType| undefinedHostLiveStreamTopView

LivestreamLayout

Component to customize the live stream video layout.

TypeDefault Value
ComponentType| undefinedLiveStreamLayout

HostLivestreamControls

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

TypeDefault Value
ComponentType| undefinedHostLiveStreamControls

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.

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

HostStartStreamButton

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

TypeDefault Value
ComponentType| undefinedHostStartStreamButton

LivestreamMediaControls

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

TypeDefault Value
ComponentType| undefinedLiveStreamMediaControls

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.

TypeDefault Value
ComponentType| undefinedScreenShareOverlay
© Getstream.io, Inc. All Rights Reserved.