logo
On this page

More config

How to set video resolution?

To set the video resolution, use this config: video.

We use 540p as the default video resolution if the video are not set.

><ZegoUIKitPrebuiltLiveStreaming
>    appID={Your_APPID}
>    appSign={Your_APPSign}
>    userID={Your_UserID}
>    userName={Your_UserName}
>    liveID={liveID}
>    config={{
>        video: ZegoUIKitVideoConfig.preset720P(),
>    }}
>/>

How to set stream resource mode?

To set the stream resource mode, use this config: audienceAudioVideoResourceMode for audience role.

We use Default as the default stream resource mode if the audienceAudioVideoResourceMode are not set.

><ZegoUIKitPrebuiltLiveStreaming
>    appID={Your_APPID}
>    appSign={Your_APPSign}
>    userID={Your_UserID}
>    userName={Your_UserName}
>    liveID={liveID}
>    config={{
>        audienceAudioVideoResourceMode: ZegoAudioVideoResourceMode.L3Only,
>    }}
>/>

How to customize the message UI?

To customize the message UI, use this config: inRoomMessageViewConfig.itemBuilder.

><ZegoUIKitPrebuiltLiveStreaming
>    appID={Your_APPID}
>    appSign={Your_APPSign}
>    userID={Your_UserID}
>    userName={Your_UserName}
>    liveID={liveID}
>    config={{
>       inRoomMessageViewConfig: {
>           itemBuilder: ({ message }: any) => {
>               let type = message.type || 'user';
>               return (
>                   <View style={styles.messageContainer}>
>                   {type === 'system' ? (
>                       <Text style={[styles.systemMessageLabel]}>
>                           {message.message}
>                       </Text>
>                       ) : (
>                       <Text style={styles.senderNameLabel}>
>                           {message.sender?.userName || 'Unknown User'}
>                           <Text style={styles.messageLabel}> {message.message}</Text>
>                       </Text>
>                   )}
>                   </View>
>               );
>           }
>       },
>    }}
>/>
>
>const styles = StyleSheet.create({
>   messageContainer: {
>       alignSelf: 'flex-start',
>       backgroundColor: 'rgba(1, 7, 18, 0.3000)',
>       borderRadius: 13,
>       flexDirection: 'row',
>       justifyContent: 'flex-start',
>       alignItems: 'center',
>       marginTop: 4,
>       paddingTop: 5,
>       paddingBottom: 5,
>       paddingRight: 10,
>       paddingLeft: 10,
>   },
>   senderNameLabel: {
>       color: '#8BE7FF',
>       fontSize: 13,
>   },
>   messageLabel: {
>       color: 'white',
>       fontSize: 13,
>       marginLeft: 5,
>   },
>   systemMessageLabel: {
>       color: '#FFD700',
>       textAlign: 'center',
>       fontStyle: 'italic',
>   },
>})

Previous

Set member avatars

Next

Event

On this page

Back to top