agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/agora-rn-uikit/src/Controls/Local/Recording.tsx

@@ -1,6 +1,5 @@
 import React, {useContext} from 'react';
 import PropsContext from '../../Contexts/PropsContext';
-import RtcContext, {DispatchType} from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
@@ -8,7 +7,6 @@ function Recording() {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {recording} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
 
   return (
     <BtnTemplate

package/template/agora-rn-uikit/src/Controls/Local/SwitchCamera.tsx

@@ -1,28 +1,28 @@
 import React, {useContext} from 'react';
-import PropsContext,{ToggleState} from '../../Contexts/PropsContext';
+import PropsContext, {ToggleState} from '../../Contexts/PropsContext';
 import {LocalContext} from '../../Contexts/LocalUserContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
-interface Props{
-  btnText?: string
+interface Props {
+  btnText?: string;
 }
 
 function SwitchCamera(props?: Props) {
   const {styleProps, callbacks} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {switchCamera} = localBtnStyles || {};
-  const {RtcEngine} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
   const local = useContext(LocalContext);
   return (
     <BtnTemplate
       name={'switchCamera'}
       style={{...styles.localBtn, ...(switchCamera as object)}}
-      btnText={props?.btnText ||'Switch'}
+      btnText={props?.btnText || 'Switch'}
       disabled={local.video === ToggleState.enabled ? false : true}
       onPress={() => {
-        RtcEngine.switchCamera();
+        RtcEngineUnsafe.switchCamera();
         callbacks?.SwitchCamera && callbacks.SwitchCamera();
       }}
     />

package/template/agora-rn-uikit/src/Controls/LocalControls.tsx

@@ -6,7 +6,7 @@ import LocalAudioMute from './Local/LocalAudioMute';
 import LocalVideoMute from './Local/LocalVideoMute';
 import SwitchCamera from './Local/SwitchCamera';
 import RemoteControls from './RemoteControls';
-import {RenderConsumer} from '../Contexts/RenderContext';
+import {ContentConsumer} from '../Contexts/ContentContext';
 import PropsContext from '../Contexts/PropsContext';
 import LocalUserContextComponent from '../Contexts/LocalUserContext';
 import useLocalUid from '../Utils/useLocalUid';
@@ -29,16 +29,16 @@ function Controls(props: ControlsPropsInterface) {
         <EndCall />
       </View>
       {showButton ? (
-        <RenderConsumer>
-          {({renderList, activeUids}) => (
+        <ContentConsumer>
+          {({defaultContent, activeUids}) => (
             <View style={{...styles.Controls, top: styles.Controls.top - 100}}>
               <RemoteControls
-                user={renderList[activeUids[0]]}
+                user={defaultContent[activeUids[0]]}
                 showRemoteSwap={false}
               />
             </View>
           )}
-        </RenderConsumer>
+        </ContentConsumer>
       ) : (
         <></>
       )}

package/template/agora-rn-uikit/src/Controls/Remote/RemoteAudioMute.tsx

@@ -4,16 +4,16 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import PropsContext, {
   ToggleState,
-  RenderInterface,
+  ContentInterface,
 } from '../../Contexts/PropsContext';
 import useLocalUid from '../../Utils/useLocalUid';
 
 interface RemoteAudioMuteInterface {
-  user: RenderInterface;
+  user: ContentInterface;
 }
 
 const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
-  const {RtcEngine} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {muteRemoteAudio} = remoteBtnStyles || {};
@@ -23,7 +23,7 @@ const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
       name={props.user.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       style={{...styles.leftRemoteBtn, ...(muteRemoteAudio as object)}}
       onPress={() => {
-        RtcEngine.muteRemoteAudioStream(
+        RtcEngineUnsafe.muteRemoteAudioStream(
           props.user.uid as number,
           props.user.audio === ToggleState.enabled,
         );

package/template/agora-rn-uikit/src/Controls/Remote/RemoteVideoMute.tsx

@@ -2,19 +2,19 @@ import React, {useContext} from 'react';
 import useLocalUid from '../../Utils/useLocalUid';
 import PropsContext, {
   ToggleState,
-  RenderInterface,
+  ContentInterface,
 } from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import styles from '../../Style';
 import BtnTemplate from '../BtnTemplate';
 
 interface RemoteVideoMuteInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   rightButton: boolean;
 }
 
 const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
-  const {RtcEngine} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {muteRemoteVideo} = remoteBtnStyles || {};
@@ -30,7 +30,7 @@ const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
           : {...(muteRemoteVideo as object)}
       }
       onPress={() => {
-        RtcEngine.muteRemoteVideoStream(
+        RtcEngineUnsafe.muteRemoteVideoStream(
           props.user.uid as number,
           props.user.video === ToggleState.enabled, //If enabled, disable or vice-versa
         );

package/template/agora-rn-uikit/src/Controls/RemoteControls.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
+import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
 import styles from '../Style';
 import RemoteAudioMute from './Remote/RemoteAudioMute';
 import RemoteSwap from './Remote/RemoteSwap';
@@ -10,7 +10,7 @@ interface RemoteControlsInterface {
   showMuteRemoteVideo?: boolean;
   showMuteRemoteAudio?: boolean;
   showRemoteSwap?: boolean;
-  user: RenderInterface;
+  user: ContentInterface;
 }
 
 const RemoteControls: React.FC<RemoteControlsInterface> = (props) => {

package/template/agora-rn-uikit/src/Reducer/LocalMuteAudio.ts

@@ -1,19 +1,19 @@
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalMuteAudio(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'LocalMuteAudio'>,
   localUid: UidType,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
       [localUid]: {
-        ...state.renderList[localUid],
+        ...state.defaultContent[localUid],
         audio: action.value[0],
       },
     },

package/template/agora-rn-uikit/src/Reducer/LocalMuteVideo.ts

@@ -1,19 +1,19 @@
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalMuteVideo(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'LocalMuteVideo'>,
   localUid: UidType,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
       [localUid]: {
-        ...state.renderList[localUid],
+        ...state.defaultContent[localUid],
         video: action.value[0],
       },
     },

package/template/agora-rn-uikit/src/Reducer/LocalPermissionState.ts

@@ -0,0 +1,23 @@
+import {
+  ActionType,
+  ContentStateInterface,
+  UidType,
+} from '../Contexts/RtcContext';
+
+export default function LocalPermissionState(
+  state: ContentStateInterface,
+  action: ActionType<'LocalPermissionState'>,
+  localUid: UidType,
+) {
+  let stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
+      [localUid]: {
+        ...state.defaultContent[localUid],
+        permissionStatus: action.value[0],
+      },
+    },
+    activeUids: [...state.activeUids],
+  };
+  return stateUpdate;
+}

package/template/agora-rn-uikit/src/Reducer/RemoteAudioStateChanged.ts

@@ -1,8 +1,8 @@
 import {ToggleState} from '../Contexts/PropsContext';
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function RemoteAudioStateChanged(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'RemoteAudioStateChanged'>,
 ) {
   let audioState: ToggleState;
@@ -12,11 +12,11 @@ export default function RemoteAudioStateChanged(
     audioState = ToggleState.disabled;
   }
 
-  const stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  const stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
       [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+        ...state.defaultContent[action.value[0]],
         audio: audioState,
       },
     },

package/template/agora-rn-uikit/src/Reducer/RemoteVideoStateChanged.ts

@@ -1,8 +1,8 @@
 import {ToggleState} from '../Contexts/PropsContext';
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function RemoteVideoStateChanged(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'RemoteVideoStateChanged'>,
 ) {
   let videoState: ToggleState;
@@ -12,15 +12,15 @@ export default function RemoteVideoStateChanged(
     videoState = ToggleState.enabled;
   }
 
-  const stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  const stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
       [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+        ...state.defaultContent[action.value[0]],
         video:
           videoState !== undefined
             ? videoState
-            : state.renderList[action.value[0]].video,
+            : state.defaultContent[action.value[0]].video,
       },
     },
     activeUids: [...state.activeUids],

package/template/agora-rn-uikit/src/Reducer/UpdateDualStreamMode.ts

@@ -1,23 +1,23 @@
 import {DualStreamMode} from '../Contexts/PropsContext';
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function UpdateDualStreamMode(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UpdateDualStreamMode'>,
 ) {
   const newMode = action.value[0];
-  let renderList = {...state.renderList};
-  let stateUpdate: RenderStateInterface;
+  let defaultContent = {...state.defaultContent};
+  let stateUpdate: ContentStateInterface;
   const setHighStreamType = (uid: UidType) => {
-    renderList[uid].streamType = 'high';
+    defaultContent[uid].streamType = 'high';
   };
 
   const setLowStreamType = (uid: UidType) => {
-    renderList[uid].streamType = 'low';
+    defaultContent[uid].streamType = 'low';
   };
 
   if (newMode === DualStreamMode.HIGH) {
@@ -36,7 +36,7 @@ export default function UpdateDualStreamMode(
     minUids.forEach(setLowStreamType);
   }
   stateUpdate = {
-    renderList: renderList,
+    defaultContent: defaultContent,
     activeUids: [...state.activeUids],
   };
   return stateUpdate;

package/template/agora-rn-uikit/src/Reducer/UserJoined.ts

@@ -1,12 +1,12 @@
 import {DualStreamMode, ToggleState} from '../Contexts/PropsContext';
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function UserJoined(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserJoined'>,
   dualStreamMode: DualStreamMode,
   localUid: UidType,
@@ -17,14 +17,14 @@ export default function UserJoined(
   let typeData = {
     type: 'rtc',
   };
-  if (state.renderList[newUid] && 'type' in state.renderList[newUid]) {
-    typeData.type = state.renderList[newUid].type;
+  if (state.defaultContent[newUid] && 'type' in state.defaultContent[newUid]) {
+    typeData.type = state.defaultContent[newUid].type;
   }
 
-  let renderList: RenderStateInterface['renderList'] = {
-    ...state.renderList,
+  let defaultContent: ContentStateInterface['defaultContent'] = {
+    ...state.defaultContent,
     [newUid]: {
-      ...state.renderList[newUid],
+      ...state.defaultContent[newUid],
       uid: newUid,
       audio: ToggleState.disabled,
       video: ToggleState.disabled,
@@ -40,18 +40,18 @@ export default function UserJoined(
     //Only one remote and local is maximized
     //Change stream type to high if dualStreaMode is DYNAMIC
     if (dualStreamMode === DualStreamMode.DYNAMIC) {
-      renderList[newUid].streamType = 'high';
+      defaultContent[newUid].streamType = 'high';
     }
     //Swap render positions
     stateUpdate = {
-      renderList: renderList,
+      defaultContent: defaultContent,
       activeUids: activeUids.reverse(),
       lastJoinedUid: newUid,
     };
   } else {
     //More than one remote
     stateUpdate = {
-      renderList: renderList,
+      defaultContent: defaultContent,
       activeUids: activeUids,
       lastJoinedUid: newUid,
     };

package/template/agora-rn-uikit/src/Reducer/UserMuteRemoteAudio.ts

@@ -1,14 +1,14 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteAudio(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
       [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+        ...state.defaultContent[action.value[0]],
         audio: action.value[1],
       },
     },

package/template/agora-rn-uikit/src/Reducer/UserMuteRemoteVideo.ts

@@ -1,14 +1,14 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteVideo(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: ContentStateInterface = {
+    defaultContent: {
+      ...state.defaultContent,
       [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+        ...state.defaultContent[action.value[0]],
         video: action.value[1],
       },
     },

package/template/agora-rn-uikit/src/Reducer/UserOffline.ts

@@ -1,11 +1,11 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserOffline(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserOffline'>,
 ) {
   // let updatedRenderList = {
-  //   ...state.renderList,
+  //   ...state.defaultContent,
   // };
   // //don't delete user data from renderlist
   // //we will update user data with {offline:true} from RTM user left event
@@ -15,8 +15,8 @@ export default function UserOffline(
   const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
-  const stateUpdate: RenderStateInterface = {
-    renderList: state.renderList,
+  const stateUpdate: ContentStateInterface = {
+    defaultContent: state.defaultContent,
     activeUids: updatedActiveUids,
   };
 

package/template/agora-rn-uikit/src/Reducer/UserPin.ts

@@ -0,0 +1,11 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function UserPin(
+  state: ContentStateInterface,
+  action: ActionType<'UserPin'>,
+) {
+  return {
+    ...state,
+    pinnedUid: action?.value && action.value?.length ? action.value[0] : '',
+  };
+}

package/template/agora-rn-uikit/src/Reducer/index.ts

@@ -5,5 +5,7 @@ export {default as UserMuteRemoteAudio} from './UserMuteRemoteAudio';
 export {default as UserMuteRemoteVideo} from './UserMuteRemoteVideo';
 export {default as LocalMuteAudio} from './LocalMuteAudio';
 export {default as LocalMuteVideo} from './LocalMuteVideo';
+export {default as LocalPermissionState} from './LocalPermissionState';
 export {default as RemoteAudioStateChanged} from './RemoteAudioStateChanged';
 export {default as RemoteVideoStateChanged} from './RemoteVideoStateChanged';
+export {default as UserPin} from './UserPin';

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -7,11 +7,12 @@ import RtcEngine, {
 } from 'react-native-agora';
 import {Platform} from 'react-native';
 import requestCameraAndAudioPermission from '../Utils/permission';
-import {DispatchType} from '../Contexts/RtcContext';
+import {DispatchType} from '../Contexts/DispatchContext';
 import PropsContext, {
   ToggleState,
   ClientRole,
   ChannelProfile,
+  PermissionState,
 } from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
 
@@ -22,9 +23,14 @@ const Create = ({
   dispatch: DispatchType;
   children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
 }) => {
+  const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
-  const {geoFencing = true, audioRoom = false} = rtcProps || {};
+  const {
+    geoFencing = true,
+    audioRoom = false,
+    activeSpeaker = false,
+  } = rtcProps || {};
   let engine = useRef<RtcEngine>({} as RtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
@@ -33,16 +39,52 @@ const Create = ({
   const isVideoEnabledRef = useRef<boolean>(false);
   const firstUpdate = useRef(true);
 
+  const dispatchPermissionState = (audioError: any, videoError: any) => {
+    if (audioError && videoError) {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.REJECTED],
+      });
+    } else if (audioError && !videoError) {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.GRANTED_FOR_CAM_ONLY],
+      });
+    } else if (!audioError && videoError) {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.GRANTED_FOR_MIC_ONLY],
+      });
+    } else {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
+      });
+    }
+  };
+
   const enableVideoAndAudioWithDisabledState = async () => {
     try {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.REQUESTED],
+      });
       if (audioRoom === true) {
         await engine.current.enableAudio();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_MIC_ONLY],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.disabled],
         });
       } else {
         await engine.current.enableVideo();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.disabled],
@@ -75,20 +117,33 @@ const Create = ({
         } else {
           console.error('No video device', videoError);
         }
+        dispatchPermissionState(audioError, videoError);
       }
       console.error('No devices', error);
     }
   };
   const enableVideoAndAudioWithEnabledState = async () => {
     try {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.REQUESTED],
+      });
       if (audioRoom === true) {
         await engine.current.enableAudio();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_MIC_ONLY],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.enabled],
         });
       } else {
         await engine.current.enableVideo();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.enabled],
@@ -122,6 +177,7 @@ const Create = ({
         } else {
           console.error('No video device', videoError);
         }
+        dispatchPermissionState(audioError, videoError);
       }
       console.error('No devices', e);
     }
@@ -131,14 +187,15 @@ const Create = ({
       mode == ChannelProfile.LiveBroadcasting &&
       rtcProps?.role == ClientRole.Audience
     ) {
-      enableVideoAndAudioWithDisabledState();
+      await enableVideoAndAudioWithDisabledState();
     } else {
-      enableVideoAndAudioWithEnabledState();
+      await enableVideoAndAudioWithEnabledState();
     }
   };
 
   useEffect(() => {
     async function init() {
+      mutexLock.current = true;
       if (Platform.OS === 'android') {
         //Request required permissions from Android
         await requestCameraAndAudioPermission(audioRoom);
@@ -177,6 +234,9 @@ const Create = ({
         } else {
           await engine.current.setChannelProfile(ChannelProfile.Communication);
         }
+        if (activeSpeaker) {
+          await engine.current.enableAudioVolumeIndication(500, 3, true);
+        }
         if (!audioRoom) {
           if (rtcProps.profile) {
             if (Platform.OS === 'web') {
@@ -277,12 +337,16 @@ const Create = ({
             value: args,
           });
         });
+
         setReady(true);
       } catch (e) {
         console.error(e);
       }
+      mutexLock.current = false;
+    }
+    if (!mutexLock.current) {
+      init();
     }
-    init();
     return () => {
       /**
        * if condition add for websdk issue
@@ -293,11 +357,14 @@ const Create = ({
         engine.current!.destroy();
       }
     };
-  }, [rtcProps.appId]);
+  }, [rtcProps.appId, rtcProps.uid]);
 
   useEffect(() => {
     const toggleRole = async () => {
-      if (mode == ChannelProfile.LiveBroadcasting) {
+      if (
+        mode == ChannelProfile.LiveBroadcasting &&
+        engine.current.setClientRole // Check if engine initialized
+      ) {
         if (rtcProps.role == ClientRole.Broadcaster) {
           await engine.current?.setClientRole(ClientRole.Broadcaster);
           // isVideoEnabledRef checks if the permission is already taken once