Camera Preview is not opening and showing empty white screen

[SuyashAmeta]

When I am using the App ID, channel name, token and UID but agora is not opening the camera preview when joined as a host.

import React,{ useEffect, useState, useRef } from "react";
import { useNavigation } from '@react-navigation/native'
import {
View,
Text,
TextInput,
FlatList,
TouchableOpacity,
PermissionsAndroid,
Platform } from 'react-native';

import Icon from "react-native-vector-icons/Ionicons";

import {
createAgoraRtcEngine,
ChannelProfileType,
ClientRoleType,
IRtcEngine,
RtcSurfaceView,
RtcConnection,
IRtcEngineEventHandler,
} from 'react-native-agora';

import { Ionicons } from '@expo/vector-icons';
import Gift from "../../shared/assets/images/icons/gift.svg"
import More from "../../shared/assets/images/icons/more.svg"
import ChatBubble from "../../shared/assets/images/icons/chatbubble.svg"
import People from "../../shared/assets/images/icons/people.svg"
import Polls from "../../shared/assets/images/icons/polls.svg"
import QA from "../../shared/assets/images/icons/qa.svg"
import OpinionBottomSheet from "./opinions";
import GiftsBottomSheet from "./gifts";

import { liveStreamStyles } from "./style";

const appId = '*******************************';

const getPermission = async () => {
if (Platform.OS === 'android') {
await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
PermissionsAndroid.PERMISSIONS.CAMERA,
]);
}
}

export default function LiveStreamScreen() {

const token = '*********';
const channelName = ';
const uid = **************;

const navigation = useNavigation()
const agoraEngineRef = useRef();
const eventHandler = useRef();
const [remoteUid, setRemoteUid] = useState(null);
const giftBottomSheetRef = useRef(null);
const opinionBottomSheetRef = useRef(null);

const [chatMessages, setChatMessages] = useState([
{ id: "1", name: "Ravi Ranjan", message: "When is the movie releasing?" },
{ id: "2", name: "Isha Singh", message: "Your hair is so curly and shiny!!!!!" },
{ id: "3", name: "Isha Singh", message: "Sent a gift 🌹" },
]);

//Handle comment button press
const handleSendComment = (comment) => {
  if (comment.trim() !== "") {
    setChatMessages([
      ...chatMessages,
      { id: `${chatMessages.length + 1}`, name: "You", message: comment },
    ]);
  }
};

//Handle Gift button press
const handleGiftButtonPress = () => {
if(giftBottomSheetRef.current){
giftBottomSheetRef.current.expand();
}

};

//Handle More button press
const handleMoreButtonPress = () => { };

//Handle QA button press
const handleQAButtonPress = () => { };

//Handle People button press
const handlePeopleButtonPress = () => { };

//Handle ChatBubble button press
const handleChatBubbleButtonPress = () => { };

//Handle Polls button press
const handlePollsButtonPress = () => {
if(opinionBottomSheetRef.current){
opinionBottomSheetRef.current.expand();
}
};

//Gift Action Button 
const GiftImage = React.memo(() => {
  return <View style={liveStreamStyles.actionButton}>
 <Gift width="100%" height="100%" />
</View>; 
});
GiftImage.displayName = "GiftImage";

//More Action Button
const MoreImage = React.memo(() => {
  return <View style={liveStreamStyles.actionButton}>
  <More width="100%" height="100%" />
</View>;
});
MoreImage.displayName = "MoreImage";

 //Chat Action Button
const ChatBubbleImage = React.memo(() => {
  return <View style={liveStreamStyles.actionButton}>
  <ChatBubble width="100%" height="100%" />
</View>;
});
ChatBubbleImage.displayName = "ChatBubbleImage";

 //People Action Button
const PeopleImage = React.memo(() => {
  return <View style={liveStreamStyles.actionButton}>
  <People width="100%" height="100%" />
</View>;
});
PeopleImage.displayName = "PeopleImage";

 //Polls Action Button
const PollsImage = React.memo(() => {
  return <View style={liveStreamStyles.actionButton}>
  <Polls width="100%" height="100%" />
</View>;
});
PollsImage.displayName = "PollsImage";

 //QA Action Button
const QAImage = React.memo(() => {
  return <View style={liveStreamStyles.actionButton}>
    <QA width="100%" height="100%" />
  </View>;
});
QAImage.displayName = "QAImage";

useEffect(() => {
(async function init() {
await getPermission();
})();
}, []);

useEffect(() => {
agoraEngineRef.current = createAgoraRtcEngine();
const agoraEngine = agoraEngineRef.current;
agoraEngine.initialize({appId});
agoraEngineRef.current?.startPreview();
agoraEngine.enableVideo();

agoraEngineRef.current?.joinChannel(token, channelName, uid, {
  // Set channel profile to live broadcast
  channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
  // Set user role to broadcaster
  clientRoleType: ClientRoleType.ClientRoleBroadcaster,
  // Publish audio collected by the microphone
  publishMicrophoneTrack: true,
  // Publish video collected by the camera
  publishCameraTrack: true,
  // Automatically subscribe to all audio streams
  autoSubscribeAudio: true,
  // Automatically subscribe to all video streams
  autoSubscribeVideo: true,

});

eventHandler.current = {
onJoinChannelSuccess: () => {
console.log('Successfully joined channel: ' + channelName);
//setIsJoined(true);
},
onUserJoined: (_connection, uid) => {
console.log('Remote user ' + uid + ' has joined', _connection);
setRemoteUid(uid)
//setRemoteUid(uid);
},
onUserOffline: (_connection, uid) => {
console.log('Remote user ' + uid + ' has left the channel', _connection);
navigation.goBack();
//setRemoteUid(0);
},
onError: (err, msg) => {
console.log("error occured", err, msg)
}
};
agoraEngine.registerEventHandler(eventHandler.current);

return () => {
  agoraEngineRef.current?.unregisterEventHandler(eventHandler.current);
  // Destroy the engine
  agoraEngineRef.current?.release();
}

}, [])

return (

{remoteUid && <RtcSurfaceView
canvas={{
uid: remoteUid
}}
/>}
{/* Chat Messages /}
<FlatList
data={chatMessages}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (

{item.name}
{item.message}

)}
style={liveStreamStyles.chatList}/>
{/ Action Buttons /}




















{/ Comment Input /}

<TextInput
style={liveStreamStyles.commentInput}
placeholder="Type comments here..."
placeholderTextColor="#ccc"
onSubmitEditing={(event) => handleSendComment(event.nativeEvent.text)}
/>




{/ Announcement */}



Announcement

New Q/A has been added by the actor, go and add your poll.

   {/* Bottom sheets */}
  {/* <OpinionBottomSheet
  bottomSheetRef={opinionBottomSheetRef}
   />
   <GiftsBottomSheet
   bottomSheetRef={giftBottomSheetRef}
   /> */}
</View>

);
}

[guoxianzhe]

@SuyashAmeta You should call enableVideo before call startPreview

[SuyashAmeta]

@guoxianzhe Its still not showing the camera preview in host and just displaying the empty white screen but in audience my photo is showing.

[guoxianzhe]

@SuyashAmeta Did you render your local view with RtcSurfaceView?

[SuyashAmeta]

@guoxianzhe I have added the below code for local view with RtcSurfaceView

agoraEngineRef.current.setupLocalVideo({
uid: 0, // The UID of the local user, typically 0 for local
renderMode: 1, // Video rendering mode (1: fit, 2: fill)
mirrorMode: 0, // Local video mirror mode (0: disable, 1: enable)
});

[sharma-g-10]

@SuyashAmeta make a state that tracks whether the host has joined the channel successfully.
Set that state to true in onJoinChannelSuccess() callback.

Then render the RtcSurfaceView when this state is set to true.
Please find the changes made below:-

1.) Make a state
const [isJoined, setIsJoined] = useState(false);

2.) Set it to true once the channel is joined successfully.
onJoinChannelSuccess: () => {
showMessage('Successfully joined channel: ' + channelName);
setIsJoined(true);
},

3.) Use this state to render RtcSurfaceView.
{isJoined && (
<RtcSurfaceView
canvas={{
uid: 0,
}}
style={{height: '100%', width: '100%'}}
/>
)}

These changes will fix your issue.
Hope this helps.