agora-appbuilder-core 4.0.24 → 4.0.25-beta-2

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

@@ -1,23 +1,20 @@
-import React, {useState, useEffect, useContext, useRef} from 'react';
-import {
-  createAgoraRtcEngine,
+import React, {useState, useEffect, useContext, useRef, FC} from 'react';
+import RtcEngine, {
   VideoEncoderConfiguration,
   AreaCode,
-  IRtcEngine,
-  AudioProfileType,
-  AudioScenarioType,
+  AudioProfile,
+  AudioScenario,
 } from 'react-native-agora';
 import {Platform} from 'react-native';
 import requestCameraAndAudioPermission from '../Utils/permission';
-import {DispatchType} from '../Contexts/DispatchContext';
+import {DispatchType} from '../Contexts/RtcContext';
 import PropsContext, {
   ToggleState,
-  ClientRoleType,
-  ChannelProfileType,
+  ClientRole,
+  ChannelProfile,
   PermissionState,
 } from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
-import {isBotUser} from '../Utils/isBotUser';
 
 const Create = ({
   dispatch,
@@ -25,9 +22,9 @@ const Create = ({
 }: {
   dispatch: DispatchType;
   children: (
-    engine: React.MutableRefObject<IRtcEngine>,
+    engine: React.MutableRefObject<RtcEngine>,
     tracksReady: boolean,
-  ) => React.ReactElement;
+  ) => JSX.Element;
 }) => {
   const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
@@ -37,8 +34,10 @@ const Create = ({
     geoFencing = true,
     audioRoom = false,
     activeSpeaker = false,
+    preferredCameraId = '',
+    preferredMicrophoneId = '',
   } = rtcProps || {};
-  let engine = useRef<IRtcEngine>({} as IRtcEngine);
+  let engine = useRef<RtcEngine>({} as RtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
   //   ? rtcProps.lifecycle.useBeforeCreate()
@@ -87,7 +86,16 @@ const Create = ({
           value: [ToggleState.disabled],
         });
       } else {
-        await engine.current.enableVideo();
+        if (Platform.OS === 'web') {
+          await engine.current.enableVideo(
+            //@ts-ignore
+            preferredCameraId,
+            //@ts-ignore
+            preferredMicrophoneId,
+          );
+        } else {
+          await engine.current.enableVideo();
+        }
         dispatch({
           type: 'LocalPermissionState',
           value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
@@ -146,7 +154,17 @@ const Create = ({
           value: [ToggleState.enabled],
         });
       } else {
-        await engine.current.enableVideo();
+        if (Platform.OS === 'web') {
+          //@ts-ignore
+          await engine.current.enableVideo(
+            //@ts-ignore
+            preferredCameraId,
+            //@ts-ignore
+            preferredMicrophoneId,
+          );
+        } else {
+          await engine.current.enableVideo();
+        }
         dispatch({
           type: 'LocalPermissionState',
           value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
@@ -191,12 +209,12 @@ const Create = ({
   };
   const enableVideoAndAudioWithInitialStates = async () => {
     if (
-      mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
-      rtcProps?.role === ClientRoleType.ClientRoleAudience
+      mode == ChannelProfile.LiveBroadcasting &&
+      rtcProps?.role == ClientRole.Audience
     ) {
-      enableVideoAndAudioWithDisabledState();
+      await enableVideoAndAudioWithDisabledState();
     } else {
-      enableVideoAndAudioWithEnabledState();
+      await enableVideoAndAudioWithEnabledState();
     }
   };
 
@@ -216,74 +234,62 @@ const Create = ({
       //   console.error('FPE:Error on executing useBeforeCreate', error);
       // }
       try {
-        engine.current = createAgoraRtcEngine();
         if (
           geoFencing === true &&
           (Platform.OS === 'android' || Platform.OS === 'ios')
         ) {
-          if (rtcProps?.appId) {
-            engine.current.initialize({
-              appId: rtcProps.appId,
-              // eslint-disable-next-line no-bitwise
-              areaCode: AreaCode.AreaCodeGlob ^ AreaCode.AreaCodeCn,
-            });
-          }
+          engine.current = await RtcEngine.createWithAreaCode(
+            rtcProps.appId,
+            // eslint-disable-next-line no-bitwise
+            AreaCode.GLOB ^ AreaCode.CN,
+          );
         } else {
-          if (rtcProps?.appId) {
-            engine.current.initialize({appId: rtcProps.appId});
-          }
+          engine.current = await RtcEngine.create(rtcProps.appId);
         }
         /* Live Streaming */
-        if (mode === ChannelProfileType.ChannelProfileLiveBroadcasting) {
+        if (mode == ChannelProfile.LiveBroadcasting) {
           await engine.current.setChannelProfile(
-            ChannelProfileType.ChannelProfileLiveBroadcasting,
+            ChannelProfile.LiveBroadcasting,
           );
           await engine.current.setClientRole(
-            rtcProps?.role === ClientRoleType.ClientRoleAudience
-              ? ClientRoleType.ClientRoleAudience
-              : ClientRoleType.ClientRoleBroadcaster,
+            rtcProps.role === ClientRole.Audience
+              ? ClientRole.Audience
+              : ClientRole.Broadcaster,
           );
         } else {
-          await engine.current.setChannelProfile(
-            ChannelProfileType.ChannelProfileCommunication,
-          );
+          await engine.current.setChannelProfile(ChannelProfile.Communication);
         }
         if (activeSpeaker) {
-          await engine.current.enableAudioVolumeIndication(100, 3, true);
+          await engine.current.enableAudioVolumeIndication(500, 3, true);
         }
         if (!audioRoom) {
-          if (rtcProps && rtcProps.profile) {
+          if (rtcProps.profile) {
             if (Platform.OS === 'web') {
               // move this to bridge?
               // @ts-ignore
               await engine.current.setVideoProfile(rtcProps.profile);
             } else {
-              if (rtcProps && rtcProps?.profile) {
-                const config: VideoEncoderConfiguration =
-                  quality[rtcProps.profile];
-                //@ts-ignore
-                await engine.current.setVideoEncoderConfiguration({
-                  ...config,
-                  bitrate: 0,
-                });
-              }
+              const config: VideoEncoderConfiguration =
+                quality[rtcProps.profile];
+              await engine.current.setVideoEncoderConfiguration({
+                ...config,
+                bitrate: 0,
+              });
             }
           }
         } else {
           //web will work even without audio profile
           //but native need to set audio profile otherwise user will experience low audio issue
           if (Platform.OS === 'android' || Platform.OS === 'ios') {
-            //@ts-ignore
             await engine.current.setAudioProfile(
-              AudioProfileType.AudioProfileDefault,
-              AudioScenarioType.AudioScenarioDefault,
+              AudioProfile.Default,
+              AudioScenario.Default,
             );
             //also audio route for voice-chat will work through earpiece not phonespeaker
             //for audiolivecast it will work through phone speaker
             //ref - https://docs.agora.io/en/help/integration-issues/profile_difference/#audio-route
             //so setting into phone speaker manually as requested
-            if (mode === ChannelProfileType.ChannelProfileCommunication) {
-              //@ts-ignore
+            if (mode == ChannelProfile.Communication) {
               await engine.current.setEnableSpeakerphone(true);
             }
           }
@@ -299,84 +305,98 @@ const Create = ({
          */
         if (
           !(
-            mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
-            rtcProps?.role === ClientRoleType.ClientRoleAudience &&
-            Platform.OS === 'web' &&
-            rtcProps?.recordingBot
+            mode === ChannelProfile.LiveBroadcasting &&
+            rtcProps.role == ClientRole.Audience &&
+            Platform.OS === 'web'
           )
         ) {
-          if (rtcProps?.recordingBot) {
-            console.log(
-              'recording-bot, hence not asking audio/video permission',
-            );
-          } else {
-            enableVideoAndAudioWithInitialStates().then(() => {
-              setTracksReady(true);
-              isVideoEnabledRef.current = true;
-            });
-          }
+          enableVideoAndAudioWithInitialStates().then(() => {
+            setTracksReady(true);
+            isVideoEnabledRef.current = true;
+          });
         }
 
         engine.current.addListener(
-          'onJoinChannelSuccess',
-          async (connection, elapsed) => {
+          'JoinChannelSuccess',
+          async (channel, uid, elapsed) => {
             //Invoke the callback
-            console.log('UIkit enabling dual stream', rtcProps?.dual);
-            if (rtcProps?.dual) {
+            console.log('UIkit enabling dual stream', rtcProps.dual);
+            if (rtcProps.dual) {
               console.log('UIkit enabled dual stream');
               await engine.current!.enableDualStreamMode(rtcProps.dual);
               // await engine.current.setRemoteSubscribeFallbackOption(1);
             }
             callbacks?.JoinChannelSuccess &&
-              callbacks.JoinChannelSuccess(connection, elapsed);
+              callbacks.JoinChannelSuccess(channel, uid, elapsed);
           },
         );
 
-        engine.current.addListener('onUserJoined', async (...args) => {
-          // exluding the connection obj being passed by native sdk
-          const [, ...remainingArgs] = args;
-          //@ts-ignore
-          // preventing bots(ex: STT, recording) in renderlist
-          if (isBotUser(remainingArgs)) {
-            return;
-          }
+        engine.current.addListener('UserJoined', (...args) => {
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
-            //@ts-ignore
-            value: remainingArgs,
+            value: args,
           });
         });
 
-        engine.current.addListener('onUserOffline', (...args) => {
-          const [, ...remainingArgs] = args;
+        engine.current.addListener('UserOffline', (...args) => {
           //If user leaves
           dispatch({
             type: 'UserOffline',
-            //@ts-ignore
-            value: remainingArgs,
+            value: args,
           });
         });
 
-        engine.current.addListener('onRemoteAudioStateChanged', (...args) => {
-          const [, ...remainingArgs] = args;
+        engine.current.addListener('RemoteAudioStateChanged', (...args) => {
           dispatch({
             type: 'RemoteAudioStateChanged',
-            //@ts-ignore
-            value: remainingArgs,
+            value: args,
           });
         });
 
-        engine.current.addListener('onError', (e) => {
+        engine.current.addListener('Error', (e) => {
           console.log('Error: ', e);
         });
 
-        engine.current.addListener('onRemoteVideoStateChanged', (...args) => {
-          const [, ...remainingArgs] = args;
+        engine.current.addListener('RemoteVideoStateChanged', (...args) => {
           dispatch({
             type: 'RemoteVideoStateChanged',
-            //@ts-ignore
-            value: remainingArgs,
+            value: args,
+          });
+        });
+
+        engine.current.addListener('AudioVolumeIndication', (...args) => {
+          // console.log('-- AudioVolumeCallback', args);
+          const [speakers, totalVolume] = args;
+          if (speakers[0]?.uid === 0) {
+            //callback for local user
+            const isLocalUserSpeaking = speakers[0].vad; //1-speaking ,  0-not speaking
+            const localUserVolumeLevel = speakers[0].volume;
+            // vad value is not consistent while speaking so using volume level
+            if (localUserVolumeLevel > 0) {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [rtcProps.uid],
+              });
+            } else {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [undefined],
+              });
+            }
+          } else {
+            // remote users callback, this will be handeled in ActiveSpeaker callback(367)
+            // const highestvolumeObj = speakers.reduce(function (prev, current) {
+            //   return prev.volume > current.volume ? prev : current;
+            // }, null);
+          }
+        });
+
+        engine.current.addListener('ActiveSpeaker', (...args) => {
+          // used as a callback from the web bridge as well remote users
+          dispatch({
+            type: 'ActiveSpeakerDetected',
+            value: args,
           });
         });
 
@@ -390,39 +410,25 @@ const Create = ({
       init();
     }
     return () => {
-      if (Platform.OS !== 'web') {
-        // for web, events are cleared in release method
-        engine.current.removeAllListeners('onJoinChannelSuccess');
-        engine.current.removeAllListeners('onLeaveChannel');
-        engine.current.removeAllListeners('onUserJoined');
-        engine.current.removeAllListeners('onUserOffline');
-        engine.current.removeAllListeners('onRemoteVideoStateChanged');
-        engine.current.removeAllListeners('onRemoteAudioStateChanged');
-        engine.current.removeAllListeners('onError');
-      }
-
       /**
        * if condition add for websdk issue
        * For some reason even if engine.current is defined somehow destroy gets undefined and
        * causes a crash so thats why this check is needed before we call the method
        */
-      if (tracksReady || Platform.OS === 'web') {
-        engine.current.release();
+      if (engine.current.destroy) {
+        engine.current!.destroy();
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rtcProps?.appId, rtcProps?.uid]);
+  }, [rtcProps.appId, rtcProps.uid]);
 
   useEffect(() => {
     const toggleRole = async () => {
       if (
-        mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+        mode == ChannelProfile.LiveBroadcasting &&
         engine.current.setClientRole // Check if engine initialized
       ) {
-        if (rtcProps?.role === ClientRoleType.ClientRoleBroadcaster) {
-          await engine.current?.setClientRole(
-            ClientRoleType.ClientRoleBroadcaster,
-          );
+        if (rtcProps.role == ClientRole.Broadcaster) {
+          await engine.current?.setClientRole(ClientRole.Broadcaster);
           // isVideoEnabledRef checks if the permission is already taken once
           if (!isVideoEnabledRef.current) {
             await enableVideoAndAudioWithDisabledState();
@@ -447,7 +453,7 @@ const Create = ({
             }
           }
         }
-        if (rtcProps?.role === ClientRoleType.ClientRoleAudience) {
+        if (rtcProps.role == ClientRole.Audience) {
           /**
            * To switch the user role back to "audience", call unpublish first
            * Otherwise the setClientRole method call fails and throws an exception.
@@ -466,9 +472,7 @@ const Create = ({
               value: [ToggleState.disabled],
             });
           }
-          await engine.current?.setClientRole(
-            ClientRoleType.ClientRoleAudience,
-          );
+          await engine.current?.setClientRole(ClientRole.Audience);
         }
       }
     };
@@ -478,8 +482,7 @@ const Create = ({
       return;
     }
     toggleRole();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rtcProps?.role]);
+  }, [rtcProps.role]);
 
   return (
     <>

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

@@ -1,23 +1,20 @@
 import React, {useEffect, useContext, useRef} from 'react';
-import {IRtcEngine} from 'react-native-agora';
-import {ContentStateInterface} from '../Contexts/RtcContext';
-import {DispatchType} from '../Contexts/DispatchContext';
+import RtcEngine from 'react-native-agora';
+import {RenderStateInterface, DispatchType} from '../Contexts/RtcContext';
 import PropsContext, {ToggleState} from '../Contexts/PropsContext';
 import {Platform} from 'react-native';
 
 const Join: React.FC<{
   children: React.ReactNode;
   precall: boolean;
-  engineRef: React.MutableRefObject<IRtcEngine>;
-  uidState: ContentStateInterface;
+  engineRef: React.MutableRefObject<RtcEngine>;
+  uidState: RenderStateInterface;
   dispatch: DispatchType;
   tracksReady: boolean;
-  preventJoin?: boolean;
 }> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
-
-  const audioRoom = rtcProps?.audioRoom || false;
+  const {audioRoom = false} = rtcProps;
   //commented for v1 release
   // const beforeJoin = rtcProps?.lifecycle?.useBeforeJoin
   //   ? rtcProps.lifecycle.useBeforeJoin()
@@ -28,14 +25,9 @@ const Join: React.FC<{
       //@ts-ignore
       engineRef.current.publish();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tracksReady]);
 
   useEffect(() => {
-    if (rtcProps?.preventJoin) {
-      return;
-    }
-
     const engine = engineRef.current;
     async function leave() {
       try {
@@ -46,26 +38,20 @@ const Join: React.FC<{
         console.error('Cannot leave the channel:', err);
       }
     }
-    const {defaultContent, activeUids} = uidState;
+    const {renderList, activeUids} = uidState;
     const [maxUid] = activeUids;
-    const videoState = defaultContent[maxUid]?.video;
+    const videoState = renderList[maxUid].video;
     async function join() {
       if (
-        rtcProps?.encryption &&
-        rtcProps?.encryption.key &&
-        rtcProps.encryption.mode &&
-        rtcProps.encryption.salt
+        rtcProps.encryption &&
+        rtcProps.encryption.key &&
+        rtcProps.encryption.mode
       ) {
-        try {
-          await engine.enableEncryption(true, {
-            encryptionKey: rtcProps?.encryption.key,
-            encryptionMode: rtcProps?.encryption.mode,
-            encryptionKdfSalt: rtcProps?.encryption.salt,
-            datastreamEncryptionEnabled: true,
-          });
-        } catch (error) {
-          console.warn('encryption error', error);
-        }
+        console.log('using channel encryption', rtcProps.encryption);
+        await engine.enableEncryption(true, {
+          encryptionKey: rtcProps.encryption.key,
+          encryptionMode: rtcProps.encryption.mode,
+        });
       }
       if (
         !audioRoom &&
@@ -90,16 +76,13 @@ const Join: React.FC<{
       // } catch (error) {
       //   console.error('FPE:Error on executing useBeforeJoin', error);
       // }
-      try {
-        await engine.joinChannel(
-          rtcProps?.token || '',
-          rtcProps?.channel || '',
-          rtcProps?.uid || 0,
-          {},
-        );
-      } catch (error) {
-        console.error('RTC joinChannel error', error);
-      }
+
+      await engine.joinChannel(
+        rtcProps.token || null,
+        rtcProps.channel,
+        null,
+        rtcProps.uid || 0,
+      );
       if (
         !audioRoom &&
         videoState === ToggleState.enabled &&
@@ -125,7 +108,7 @@ const Join: React.FC<{
           await leave();
           await join();
         }
-        console.log('Attempted join: ', rtcProps?.channel);
+        console.log('Attempted join: ', rtcProps.channel);
       } else {
         console.log('In precall - waiting to join');
       }
@@ -136,14 +119,12 @@ const Join: React.FC<{
         leave();
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    rtcProps?.channel,
-    rtcProps?.uid,
-    rtcProps?.token,
+    rtcProps.channel,
+    rtcProps.uid,
+    rtcProps.token,
     precall,
-    rtcProps?.encryption,
-    rtcProps?.preventJoin,
+    rtcProps.encryption,
   ]);
 
   return <>{children}</>;