agora-appbuilder-core 4.0.0-spl.13 → 4.0.0-spl.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-spl.13",
+  "version": "4.0.0-spl.15",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -113,6 +113,8 @@ export interface RtcPropsInterface {
       | EncryptionMode.AES256XTS
       | EncryptionMode.AES128ECB;
   };
+  preferredCameraId?: string;
+  preferredMicrophoneId?: string;
   // commented for v1 release
   // lifecycle?: {
   //   useBeforeJoin?: () => () => Promise<void>;

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

@@ -34,6 +34,8 @@ const Create = ({
     geoFencing = true,
     audioRoom = false,
     activeSpeaker = false,
+    preferredCameraId = '',
+    preferredMicrophoneId = '',
   } = rtcProps || {};
   let engine = useRef<RtcEngine>({} as RtcEngine);
   // commented for v1 release
@@ -84,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],
@@ -143,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],

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -25,6 +25,7 @@ import AgoraRTC, {
   ClientRoleOptions,
   CameraVideoTrackInitConfig,
   MicrophoneAudioTrackInitConfig,
+  IMicrophoneAudioTrack,
 } from 'agora-rtc-sdk-ng';
 import type {
   RtcEngineEvents,
@@ -240,7 +241,10 @@ export default class RtcEngine {
     }
   }
 
-  async enableVideo(): Promise<void> {
+  async enableVideo(
+    preferredCameraId?: string,
+    preferredMicrophoneId?: string,
+  ): Promise<void> {
     /**
      * Issue: Backgrounding the browser or app causes the audio streaming to be cut off.
      * Impact: All browsers and apps that use WKWebView on iOS 15.x, such as Safari and Chrome.
@@ -252,14 +256,16 @@ export default class RtcEngine {
 
     const audioConfig: MicrophoneAudioTrackInitConfig = {
       bypassWebAudio: Platform.OS == 'web' && isMobileOrTablet(),
-      // microphoneId: this.audioDeviceId,
+      microphoneId: preferredMicrophoneId,
     };
     const videoConfig: CameraVideoTrackInitConfig = {
       encoderConfig: this.videoProfile,
-      // cameraId: this.videoDeviceId,
+      cameraId: preferredCameraId,
     };
     try {
       let [localAudio, localVideo] =
+        // If preferred devices are not present, the createTrack call will fallover to
+        // the catch block below.
         await AgoraRTC.createMicrophoneAndCameraTracks(
           audioConfig,
           videoConfig,
@@ -277,9 +283,15 @@ export default class RtcEngine {
     } catch (e) {
       let audioError = false;
       let videoError = false;
-      try {
-        let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
 
+      try {
+        let localAudio: IMicrophoneAudioTrack;
+        try {
+          localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
+        } catch (e) {
+          videoConfig.microphoneId = '';
+          localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
+        }
         this.localStream.audio = localAudio;
         this.audioDeviceId = localAudio
           ?.getMediaStreamTrack()
@@ -288,8 +300,15 @@ export default class RtcEngine {
       } catch (error) {
         audioError = error;
       }
+
       try {
-        let localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
+        let localVideo: ICameraVideoTrack;
+        try {
+          localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
+        } catch (e) {
+          videoConfig.cameraId = '';
+          localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
+        }
         this.localStream.video = localVideo;
         this.videoDeviceId = localVideo
           ?.getMediaStreamTrack()
@@ -298,6 +317,7 @@ export default class RtcEngine {
       } catch (error) {
         videoError = error;
       }
+
       e.status = {audioError, videoError};
       throw e;
       // if (audioError && videoError) throw e;

package/template/bridge/rtm/web/index.ts

@@ -18,6 +18,7 @@ import {
 } from 'agora-react-native-rtm/lib/typescript/src';
 import {RtmClientEvents} from 'agora-react-native-rtm/lib/typescript/src/RtmEngine';
 import AgoraRTM, {VERSION} from 'agora-rtm-sdk';
+import RtmClient from 'agora-react-native-rtm';
 // export {RtmAttribute}
 //
 interface RtmAttributePlaceholder {}
@@ -175,7 +176,7 @@ export default class RtmEngine {
   }
 
   async logout(): Promise<any> {
-    return this.client.logout();
+    return await this.client.logout();
   }
 
   async joinChannel(channelId: string): Promise<any> {

package/template/src/components/SdkApiContext.tsx

@@ -185,6 +185,8 @@ const registerListener = () => {
   ];
 };
 
+registerListener();
+
 const deRegisterListener = () => {
   moduleEventsUnsub.forEach((v) => v());
 };

package/template/src/pages/VideoCall.tsx

@@ -68,7 +68,7 @@ import {SdkApiContext, SDK_MEETING_TAG} from '../components/SdkApiContext';
 import isSDK from '../utils/isSDK';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 import SdkMuteToggleListener from '../components/SdkMuteToggleListener';
-
+import StorageContext from '../components/StorageContext';
 enum RnEncryptionEnum {
   /**
    * @deprecated
@@ -117,6 +117,15 @@ const VideoCall: React.FC = () => {
     editName: false,
   });
   const {phrase} = useParams<{phrase: string}>();
+
+  const {store} = useContext(StorageContext);
+  const {
+    join: SdkJoinState,
+    microphoneDevice: sdkMicrophoneDevice,
+    cameraDevice: sdkCameraDevice,
+    clearState,
+  } = useContext(SdkApiContext);
+
   // commented for v1 release
   //const lifecycle = useCustomization((data) => data.lifecycle);
   const [rtcProps, setRtcProps] = React.useState({
@@ -136,9 +145,12 @@ const VideoCall: React.FC = () => {
     geoFencing: $config.GEO_FENCING,
     audioRoom: $config.AUDIO_ROOM,
     activeSpeaker: $config.ACTIVE_SPEAKER,
+    preferredCameraId:
+      sdkCameraDevice.deviceId || store?.activeDeviceId?.videoinput || null,
+    preferredMicrophoneId:
+      sdkMicrophoneDevice.deviceId || store?.activeDeviceId?.audioinput || null,
   });
 
-  const {join: SdkJoinState, clearState} = useContext(SdkApiContext);
   const history = useHistory();
   const currentMeetingPhrase = useRef(history.location.pathname);
 
@@ -207,14 +219,12 @@ const VideoCall: React.FC = () => {
 
   React.useEffect(() => {
     if (isJoinDataFetched === true && !queryComplete) {
-      setRtcProps({
-        appId: $config.APP_ID,
+      setRtcProps((prevRtcProps) => ({
+        ...prevRtcProps,
         channel: data.channel,
         uid: data.uid,
         token: data.token,
         rtm: data.rtmToken,
-        dual: true,
-        profile: $config.PROFILE,
         encryption: $config.ENCRYPTION_ENABLED
           ? {
               key: data.encryptionSecret,
@@ -225,10 +235,7 @@ const VideoCall: React.FC = () => {
         screenShareUid: data.screenShareUid,
         screenShareToken: data.screenShareToken,
         role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
-        geoFencing: $config.GEO_FENCING,
-        audioRoom: $config.AUDIO_ROOM,
-        activeSpeaker: $config.ACTIVE_SPEAKER,
-      });
+      }));
 
       // 1. Store the display name from API
       // if (data.username) {