import { Text, StyleSheet } from 'react-native';
import {
StreamVideoParticipant,
ParticipantVideoFallbackProps,
} from '@stream-io/video-react-native-sdk';
const CustomParticipantVideoFallback = ({
participant,
}: ParticipantVideoFallbackProps) => {
return (
<ImageBackground
blurRadius={5}
source={{ uri: participant.image }}
style={styles.background}
>
<Image source={{ uri: participant.image }} style={styles.avatar} />
</ImageBackground>
);
};
const styles = StyleSheet.create({
background: {
...StyleSheet.absoluteFillObject,
alignItems: 'center',
justifyContent: 'center',
},
avatar: {
borderRadius: 50,
height: 100,
width: 100,
},
});
Video Fallback
In terms of design the video fallback can be quite creative. How do you indicate that someone is speaking or their video track is unavailable? How does the background look.
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 video fallback in this tutorial.
Custom Participant Video Fallback
You can customize the participant video fallback by implementing your own video fallback component and passing it to the CallContent
component.
Final Steps
Now this can be passed to the ParticipantVideoFallback
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 ParticipantVideoFallback={CustomParticipantVideoFallback} />
</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
oruseLocalParticipant
provides the details of the local or connected participant.
On this page: