agora-appbuilder-core 4.0.0 → 4.0.2

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

@@ -1,32 +1,44 @@
-import React, {useState, useEffect, useContext, useRef, FC} from 'react';
-import RtcEngine, {
+import React, {useState, useEffect, useContext, useRef} from 'react';
+import {
+  createAgoraRtcEngine,
   VideoEncoderConfiguration,
   AreaCode,
-  AudioProfile,
-  AudioScenario,
+  IRtcEngine,
+  AudioProfileType,
+  AudioScenarioType,
 } 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,
+  ClientRoleType,
+  ChannelProfileType,
   PermissionState,
 } from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
+import {isBotUser} from '../Utils/isBotUser';
 
 const Create = ({
   dispatch,
   children,
 }: {
   dispatch: DispatchType;
-  children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
+  children: (
+    engine: React.MutableRefObject<IRtcEngine>,
+    tracksReady: boolean,
+  ) => React.ReactElement;
 }) => {
+  const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
+  const [tracksReady, setTracksReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
-  const {geoFencing = true, audioRoom = false} = rtcProps || {};
-  let engine = useRef<RtcEngine>({} as RtcEngine);
+  const {
+    geoFencing = true,
+    audioRoom = false,
+    activeSpeaker = false,
+  } = rtcProps || {};
+  let engine = useRef<IRtcEngine>({} as IRtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
   //   ? rtcProps.lifecycle.useBeforeCreate()
@@ -179,8 +191,8 @@ const Create = ({
   };
   const enableVideoAndAudioWithInitialStates = async () => {
     if (
-      mode == ChannelProfile.LiveBroadcasting &&
-      rtcProps?.role == ClientRole.Audience
+      mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+      rtcProps?.role === ClientRoleType.ClientRoleAudience
     ) {
       enableVideoAndAudioWithDisabledState();
     } else {
@@ -190,6 +202,7 @@ const Create = ({
 
   useEffect(() => {
     async function init() {
+      mutexLock.current = true;
       if (Platform.OS === 'android') {
         //Request required permissions from Android
         await requestCameraAndAudioPermission(audioRoom);
@@ -203,60 +216,74 @@ const Create = ({
       //   console.error('FPE:Error on executing useBeforeCreate', error);
       // }
       try {
+        engine.current = createAgoraRtcEngine();
         if (
           geoFencing === true &&
           (Platform.OS === 'android' || Platform.OS === 'ios')
         ) {
-          engine.current = await RtcEngine.createWithAreaCode(
-            rtcProps.appId,
-            // eslint-disable-next-line no-bitwise
-            AreaCode.GLOB ^ AreaCode.CN,
-          );
+          if (rtcProps?.appId) {
+            engine.current.initialize({
+              appId: rtcProps.appId,
+              // eslint-disable-next-line no-bitwise
+              areaCode: AreaCode.AreaCodeGlob ^ AreaCode.AreaCodeCn,
+            });
+          }
         } else {
-          engine.current = await RtcEngine.create(rtcProps.appId);
+          if (rtcProps?.appId) {
+            engine.current.initialize({appId: rtcProps.appId});
+          }
         }
         /* Live Streaming */
-        if (mode == ChannelProfile.LiveBroadcasting) {
+        if (mode === ChannelProfileType.ChannelProfileLiveBroadcasting) {
           await engine.current.setChannelProfile(
-            ChannelProfile.LiveBroadcasting,
+            ChannelProfileType.ChannelProfileLiveBroadcasting,
           );
           await engine.current.setClientRole(
-            rtcProps.role === ClientRole.Audience
-              ? ClientRole.Audience
-              : ClientRole.Broadcaster,
+            rtcProps?.role === ClientRoleType.ClientRoleAudience
+              ? ClientRoleType.ClientRoleAudience
+              : ClientRoleType.ClientRoleBroadcaster,
           );
         } else {
-          await engine.current.setChannelProfile(ChannelProfile.Communication);
+          await engine.current.setChannelProfile(
+            ChannelProfileType.ChannelProfileCommunication,
+          );
+        }
+        if (activeSpeaker) {
+          await engine.current.enableAudioVolumeIndication(100, 3, true);
         }
-        await engine.current.enableAudioVolumeIndication(500, 3, true);
         if (!audioRoom) {
-          if (rtcProps.profile) {
+          if (rtcProps && rtcProps.profile) {
             if (Platform.OS === 'web') {
               // move this to bridge?
               // @ts-ignore
               await engine.current.setVideoProfile(rtcProps.profile);
             } else {
-              const config: VideoEncoderConfiguration =
-                quality[rtcProps.profile];
-              await engine.current.setVideoEncoderConfiguration({
-                ...config,
-                bitrate: 0,
-              });
+              if (rtcProps && rtcProps?.profile) {
+                const config: VideoEncoderConfiguration =
+                  quality[rtcProps.profile];
+                //@ts-ignore
+                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(
-              AudioProfile.Default,
-              AudioScenario.Default,
+              AudioProfileType.AudioProfileDefault,
+              AudioScenarioType.AudioScenarioDefault,
             );
             //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 == ChannelProfile.Communication) {
+            if (mode === ChannelProfileType.ChannelProfileCommunication) {
+              //@ts-ignore
               await engine.current.setEnableSpeakerphone(true);
             }
           }
@@ -272,96 +299,84 @@ const Create = ({
          */
         if (
           !(
-            mode === ChannelProfile.LiveBroadcasting &&
-            rtcProps.role == ClientRole.Audience &&
-            Platform.OS === 'web'
+            mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+            rtcProps?.role === ClientRoleType.ClientRoleAudience &&
+            Platform.OS === 'web' &&
+            rtcProps?.recordingBot
           )
         ) {
-          await enableVideoAndAudioWithInitialStates();
-          isVideoEnabledRef.current = true;
+          if (rtcProps?.recordingBot) {
+            console.log(
+              'recording-bot, hence not asking audio/video permission',
+            );
+          } else {
+            enableVideoAndAudioWithInitialStates().then(() => {
+              setTracksReady(true);
+              isVideoEnabledRef.current = true;
+            });
+          }
         }
 
         engine.current.addListener(
-          'JoinChannelSuccess',
-          async (channel, uid, elapsed) => {
+          'onJoinChannelSuccess',
+          async (connection, 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(channel, uid, elapsed);
+              callbacks.JoinChannelSuccess(connection, elapsed);
           },
         );
 
-        engine.current.addListener('UserJoined', (...args) => {
+        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;
+          }
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
-            value: args,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('UserOffline', (...args) => {
+        engine.current.addListener('onUserOffline', (...args) => {
+          const [, ...remainingArgs] = args;
           //If user leaves
           dispatch({
             type: 'UserOffline',
-            value: args,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('RemoteAudioStateChanged', (...args) => {
+        engine.current.addListener('onRemoteAudioStateChanged', (...args) => {
+          const [, ...remainingArgs] = args;
           dispatch({
             type: 'RemoteAudioStateChanged',
-            value: args,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('Error', (e) => {
+        engine.current.addListener('onError', (e) => {
           console.log('Error: ', e);
         });
 
-        engine.current.addListener('RemoteVideoStateChanged', (...args) => {
+        engine.current.addListener('onRemoteVideoStateChanged', (...args) => {
+          const [, ...remainingArgs] = args;
           dispatch({
             type: 'RemoteVideoStateChanged',
-            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,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
 
@@ -369,25 +384,45 @@ const Create = ({
       } catch (e) {
         console.error(e);
       }
+      mutexLock.current = false;
+    }
+    if (!mutexLock.current) {
+      init();
     }
-    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 (engine.current.destroy) {
-        engine.current!.destroy();
+      if (tracksReady || Platform.OS === 'web') {
+        engine.current.release();
       }
     };
-  }, [rtcProps.appId, rtcProps.uid]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rtcProps?.appId, rtcProps?.uid]);
 
   useEffect(() => {
     const toggleRole = async () => {
-      if (mode == ChannelProfile.LiveBroadcasting) {
-        if (rtcProps.role == ClientRole.Broadcaster) {
-          await engine.current?.setClientRole(ClientRole.Broadcaster);
+      if (
+        mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+        engine.current.setClientRole // Check if engine initialized
+      ) {
+        if (rtcProps?.role === ClientRoleType.ClientRoleBroadcaster) {
+          await engine.current?.setClientRole(
+            ClientRoleType.ClientRoleBroadcaster,
+          );
           // isVideoEnabledRef checks if the permission is already taken once
           if (!isVideoEnabledRef.current) {
             await enableVideoAndAudioWithDisabledState();
@@ -412,7 +447,7 @@ const Create = ({
             }
           }
         }
-        if (rtcProps.role == ClientRole.Audience) {
+        if (rtcProps?.role === ClientRoleType.ClientRoleAudience) {
           /**
            * To switch the user role back to "audience", call unpublish first
            * Otherwise the setClientRole method call fails and throws an exception.
@@ -431,7 +466,9 @@ const Create = ({
               value: [ToggleState.disabled],
             });
           }
-          await engine.current?.setClientRole(ClientRole.Audience);
+          await engine.current?.setClientRole(
+            ClientRoleType.ClientRoleAudience,
+          );
         }
       }
     };
@@ -441,13 +478,14 @@ const Create = ({
       return;
     }
     toggleRole();
-  }, [rtcProps.role]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rtcProps?.role]);
 
   return (
     <>
       {
         // Render children once RTCEngine has been initialized
-        ready && engine ? children(engine) : <></>
+        ready && engine ? children(engine, tracksReady) : <></>
       }
     </>
   );

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

@@ -1,25 +1,41 @@
 import React, {useEffect, useContext, useRef} from 'react';
-import RtcEngine from 'react-native-agora';
-import {RenderStateInterface, DispatchType} from '../Contexts/RtcContext';
+import {IRtcEngine} from 'react-native-agora';
+import {ContentStateInterface} from '../Contexts/RtcContext';
+import {DispatchType} from '../Contexts/DispatchContext';
 import PropsContext, {ToggleState} from '../Contexts/PropsContext';
 import {Platform} from 'react-native';
 
 const Join: React.FC<{
   children: React.ReactNode;
   precall: boolean;
-  engineRef: React.MutableRefObject<RtcEngine>;
-  uidState: RenderStateInterface;
+  engineRef: React.MutableRefObject<IRtcEngine>;
+  uidState: ContentStateInterface;
   dispatch: DispatchType;
-}> = ({children, precall, engineRef, uidState, dispatch}) => {
+  tracksReady: boolean;
+  preventJoin?: boolean;
+}> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
-  const {audioRoom = false} = rtcProps;
+
+  const audioRoom = rtcProps?.audioRoom || false;
   //commented for v1 release
   // const beforeJoin = rtcProps?.lifecycle?.useBeforeJoin
   //   ? rtcProps.lifecycle.useBeforeJoin()
   //   : null;
 
   useEffect(() => {
+    if (joinState.current && tracksReady && Platform.OS === 'web') {
+      //@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 {
@@ -30,20 +46,26 @@ const Join: React.FC<{
         console.error('Cannot leave the channel:', err);
       }
     }
-    const {renderList, activeUids} = uidState;
+    const {defaultContent, activeUids} = uidState;
     const [maxUid] = activeUids;
-    const videoState = renderList[maxUid].video;
+    const videoState = defaultContent[maxUid]?.video;
     async function join() {
       if (
-        rtcProps.encryption &&
-        rtcProps.encryption.key &&
-        rtcProps.encryption.mode
+        rtcProps?.encryption &&
+        rtcProps?.encryption.key &&
+        rtcProps.encryption.mode &&
+        rtcProps.encryption.salt
       ) {
-        console.log('using channel encryption', rtcProps.encryption);
-        await engine.enableEncryption(true, {
-          encryptionKey: rtcProps.encryption.key,
-          encryptionMode: 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);
+        }
       }
       if (
         !audioRoom &&
@@ -68,13 +90,16 @@ const Join: React.FC<{
       // } catch (error) {
       //   console.error('FPE:Error on executing useBeforeJoin', error);
       // }
-
-      await engine.joinChannel(
-        rtcProps.token || null,
-        rtcProps.channel,
-        null,
-        rtcProps.uid || 0,
-      );
+      try {
+        await engine.joinChannel(
+          rtcProps?.token || '',
+          rtcProps?.channel || '',
+          rtcProps?.uid || 0,
+          {},
+        );
+      } catch (error) {
+        console.error('RTC joinChannel error', error);
+      }
       if (
         !audioRoom &&
         videoState === ToggleState.enabled &&
@@ -100,7 +125,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');
       }
@@ -111,12 +136,14 @@ 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?.encryption,
+    rtcProps?.preventJoin,
   ]);
 
   return <>{children}</>;