Watching a livestream

The Video API allows you to assign specific roles for users in a livestream, such as hosts and viewers. Our SDK provides dedicated livestreaming components for both of these roles.

The ViewerLivestream component leverages the WebRTC protocol for seamless livestream viewing within the SDK. To enable external publishing, you can access HLS credentials from the dashboard. For additional information, please refer to our livestream tutorial.

This guide describes how to customize watching a livestream through our SDK.

Default component

For the viewer role, our React Native SDK includes the specialized ViewerLivestream component.

Here is a preview of the above component in video mode:

import {
  ViewerLivestream,
  StreamVideo,
  StreamCall,
} from "@stream-io/video-react-native-sdk";

const client = StreamVideoClient.getOrCreateInstance({ apiKey, user, token });
const call = client.call("livestream", id);
await call.join(); // Make sure to join the call before rendering the component

export const MyLivestreamApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <ViewerLivestream />
      </StreamCall>
    </StreamVideo>
  );
};

Adding customization

The ViewerLivestream provides a lot of customization options that can be passed as props:

• ViewerLivestreamTopView allows customizing the top view or the header of the ViewerLivestream.
• LivestreamLayout allows customizing the main video layout component of the ViewerLivestream.
• ViewerLivestreamControls allows customizing the bottom livestream controls component of the ViewerLivestream. It contains the LiveIndicator, FollowerCount, DurationBadge, VolumeButton, MaximizeButton and ViewerLeaveStreamButton.
• ViewerLeaveStreamButton allows customizing the leave button of the livestream on the controls of the ViewerLivestream.
• FloatingParticipantView allows customizing the Floating Participant View that renders the video of the participant when screen is shared.
• onLeaveStreamHandler allows full override of the default functionality on what should happen when viewer ends the streaming using ViewerLeaveStreamButton.

An example to customize the ViewerLeaveStreamButton button is shown below:

import {
  ViewerLivestream,
  StreamVideo,
  StreamCall,
  useCall,
} from "@stream-io/video-react-native-sdk";
import { Button } from "react-native";

const ViewerLeaveStreamButtonComponent = () => {
  const call = useCall();

  const onPressHandler = async () => {
    await call.leave();
  };

  return <Button title="Leave Stream" onPress={onPressHandler} />;
};

export const MyLivestreamApp = () => {
  // init client and call here...
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <ViewerLivestream
          ViewerLeaveStreamButton={ViewerLeaveStreamButtonComponent}
        />
      </StreamCall>
    </StreamVideo>
  );
};

Result: