Video Renderer

The video renderer is the most essential UI component in a video call screen, which renders participant’s video in real-time.

It is expected that the default component may not meet all the requirements of your design/app. Therefore, we will look into ways, how to customize/create a participant label in this tutorial.

Custom Video Renderer

You can customize the video renderer by implementing your own video renderer component and passing it to the CallContent component.

import { View, StyleSheet } from 'react-native';
import { RTCView } from '@stream-io/react-native-webrtc';

const CustomVideoRenderer = ({ participant }: VideoRendererProps) => {
  const { videoStream } = participant;
  return (
    <View style={styles.background}>
      <RTCView
        streamURL={videoStream?.toURL()}
        style={styles.stream}
        objectFit="cover"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  background: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stream: {
    height: 250,
    width: 250,
    borderRadius: 125,
  },
});

Final Steps

Now this can be passed to the VideoRenderer prop of the CallContent component, as follows:

import {
  Call,
  CallContent,
  StreamCall,
} 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}>
      <CallContent VideoRenderer={CustomVideoRenderer} />
    </StreamCall>
  );
};

To get the participant data, you can use the following hooks from the useCallStateHooks:

useParticipants hook that provides all the necessary details of all the participants.
useRemoteParticipants hook that provides all the details of the participants other than the local participant.
useConnectedUser or useLocalParticipant provides the details of the local or connected participant.

Video Fallback

Reactions