Camera preview not working

[favaztechcurve]

before starting live broadcast i have to enable users camera which users can see how his face looks like etc..but unfortunatly this screen become blank in my device. live screen is working perfectly. could anyone help me with this? iam using react native version 0.71.14. and agora version "react-native-agora": "^4.2.6",

`import React, {useRef, useState, useEffect} from 'react'; import { SafeAreaView, ScrollView, StyleSheet, Text, View, TouchableOpacity, Image, } from 'react-native'; import {PermissionsAndroid, Platform} from 'react-native'; import { createAgoraRtcEngine, RtcSurfaceView, ChannelProfileType, ClientRoleType, } from 'react-native-agora'; import { heightPercentageToDP as hp, widthPercentageToDP as wp, } from 'react-native-responsive-screen'; import SVGImage from '../../../components/SVGImages'; import {PATH, SCREENS} from '../../../shared/constants'; import fonts from '../../../shared/theme/fonts'; import {palette} from '../../../shared/theme/themes'; import * as NavigationService from '../../../navigation/NavigationService'; import AppModalWithDuelButton from '../../../components/AppModalWithDuelButton'; import {generatePublisherLiveStreamToken} from '../../../services/api/apiCall'; import {useSelector} from 'react-redux';

const LiveLandingScreen = () => { const agoraEngineRef = useRef(null); const [isModalVisible, setIsModalVisible] = useState(false);

const userId = useSelector( state => state?.auth?.userProfile?.user_info?.superstar_id, );

const usersDp = [ require('../../../../assets/images/user3.png'), require('../../../../assets/images/user2.png'), require('../../../../assets/images/user1.png'), ];

useEffect(() => { setupVideoSDKEngine(); return () => (agoraEngineRef.current = null); }, []);

const setupVideoSDKEngine = async () => { try { if (Platform.OS === 'android') { const granted = await getPermission(); if (!granted) { console.log('Permissions not granted'); return; } } agoraEngineRef.current = createAgoraRtcEngine(); const agoraEngine = agoraEngineRef.current;

  agoraEngine.setChannelProfile(
    ChannelProfileType.ChannelProfileLiveBroadcasting,
  );

  agoraEngine.startPreview();
} catch (e) {
  console.log(e);
}

};

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

const join = async () => { try { const uniqueChannelName = 'channel-' + Date.now(); const response = await generatePublisherLiveStreamToken({ channelName: uniqueChannelName, });

  const resData = response?.data?.data?.data;

  const liveToken = resData?.token;
  const liveId = resData?._id;
  console.log('Response after generating token', resData);
  if (liveToken) {
    setIsModalVisible(false);
    NavigationService.navigate(SCREENS.GO_LIVE, {
      liveToken,
      channelName: uniqueChannelName,
      uid: userId,
      live_id: liveId,
    });
  }
} catch (e) {
  console.error('error', e);
}

};

return (

{ console.log('pressed fz1'); NavigationService.goBack(); }}> {usersDp.map((image, index) => { return ( ); })} 20 followers active now { agoraEngineRef.current = null; setIsModalVisible(true); }}> {isModalVisible && ( setIsModalVisible(false)} onPressBtn2={() => join()} onPressBtn1={() => { setIsModalVisible(false); }} /> )}

); };`

[guoxianzhe]

@favaztechcurve please call engine.initialize first