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 />
</StreamCall>
);
};
CallContent
The CallContent
is the highest-level UI component that allows you to build your own call screen with full UI elements. So you don’t need to take care much about each feature that you need to build a video call screen with this component.
Basically what you can do with the CallContent
is:
- A full call screen with multiple UI elements, such as the top view, participants grid, and control action buttons.
- Handles the state and actions of enabling and disabling camera, microphone, and speakerphone.
- Renders screen sharing.
- Display participant information, such as network quality, name, microphone states, and reactions.
- Renders video of the participant.
- Allows changing layout from
grid
tospotlight
.
Based on the call state, the CallContent provides a list or grid of participants, with their avatars and names, or a video if they’re publishing, with more information for each participant, like their connection quality, etc.
General usage
Let’s see how to show the CallContent
UI:
Props
layout
This switches the list between the grid and the spotlight mode.
Type | Default Value |
---|---|
grid | spotlight | grid |
When a screen is shared, the layout automatically changes to spotlight
mode.
landscape
Applies the landscape mode styles to the component, if true.
Type |
---|
boolean | undefined |
onBackPressed
Handler to be called when the back button is pressed in the CallTopView.
Type |
---|
() => void | undefined |
onParticipantInfoPress
Handler to be called when the Participant icon is pressed in the CallTopView.
Type |
---|
() => void | undefined |
onHangupCallHandler
Handler to be called when the call is left using the hangup call button in call controls.
Type |
---|
() => void | undefined |
supportedReactions
Reactions that are to be supported in the call. The following reactions are supported by default:
- like 👍
- raise hand ✋
- fireworks 🎉
Type |
---|
StreamReactionType & { icon: string }[] |
CallTopView
Prop to customize the CallTopView
component.
Type | Default Value |
---|---|
ComponentType | undefined | CallTopView |
CallControls
Prop to customize the CallControls
component.
Type | Default Value |
---|---|
ComponentType | undefined | CallControls |
ParticipantLabel
Component to customize the Label of the participant.
Type | Default Value |
---|---|
ComponentType | undefined | ParticipantLabel |
ParticipantReaction
Component to customize the component that displays the reaction of the participant.
Type | Default Value |
---|---|
ComponentType | undefined | ParticipantReaction |
ParticipantVideoFallback
Component to customize the video fallback of the participant, when the video is disabled.
Type | Default Value |
---|---|
ComponentType | undefined | ParticipantVideoFallback |
ParticipantNetworkQualityIndicator
Component to customize the network quality indicator of the participant.
Type | Default Value |
---|---|
ComponentType | undefined | ParticipantNetworkQualityIndicator |
VideoRenderer
Component to customize the video component of the participant. It is also responsible to display the ParticipantVideoFallback
.
Type | Default Value |
---|---|
ComponentType | undefined | VideoRenderer |
ParticipantView
Prop to customize the ParticipantView
component entirely.
Type | Default Value |
---|---|
ComponentType | undefined | ParticipantView |
FloatingParticipantView
Prop to customize the FloatingParticipantView
component.
Type | Default Value |
---|---|
ComponentType | undefined | FloatingParticipantView |
CallParticipantsList
Prop to customize the CallParticipantsList
component.
Type | Default Value |
---|---|
ComponentType | undefined | CallParticipantsList |
ScreenShareOverlay
Component to customize the screen share overlay, when the screen is shared by a user.
Type | Default Value |
---|---|
ComponentType | undefined | ScreenShareOverlay |
Customization
If you’re looking for guides on how to override and customize this UI, we have various UI Cookbook recipes for you:
- Call Top View and Call Controls.
ParticipantView
can be customized using the following customization guide.- You can pass your own component to
LocalParticipantView
prop to customize it.