agora-appbuilder-core 2.0.1 → 2.0.3-rc2

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

@@ -16,19 +16,20 @@ import AgoraRTC, {
   IRemoteAudioTrack,
   IRemoteVideoTrack,
   UID,
-  CameraVideoTrackInitConfig,
   ScreenVideoTrackInitConfig,
   RemoteStreamType,
-  ClientConfig,
   ICameraVideoTrack,
   EncryptionMode,
   ILocalTrack,
+  ClientRoleOptions,
 } from 'agora-rtc-sdk-ng';
 import type {
   RtcEngineEvents,
   Subscription,
 } from 'react-native-agora/lib/typescript/src/common/RtcEvents';
-import { VideoProfile } from '../quality';
+import {VideoProfile} from '../quality';
+import {ChannelProfile, ClientRole} from '../../../agora-rn-uikit';
+import {role, mode} from './Types';
 
 interface MediaDeviceInfo {
   readonly deviceId: string;
@@ -43,6 +44,7 @@ declare global {
     engine: RtcEngine;
   }
 }
+
 export enum AREAS {
   /**
    * China.
@@ -141,8 +143,8 @@ AgoraRTC.setArea({
 export default class RtcEngine {
   public appId: string;
   // public AgoraRTC: any;
-  public client: IAgoraRTCClient;
-  public screenClient: IAgoraRTCClient;
+  public client: any | IAgoraRTCClient;
+  public screenClient: any | IAgoraRTCClient;
   public eventsMap = new Map<string, callbackType>([
     ['UserJoined', () => null],
     ['UserOffline', () => null],
@@ -155,12 +157,7 @@ export default class RtcEngine {
   public localStream: LocalStream = {};
   public screenStream: ScreenStream = {};
   public remoteStreams = new Map<UID, RemoteStream>();
-  // public streamSpec: AgoraRTC.StreamSpec;
-  // public streamSpecScreenshare: ScreenVideoTrackInitConfig;
   private inScreenshare: Boolean = false;
-  // private removeStream = (uid: UID) => {
-
-  // };
   private videoProfile: VideoProfile = '480p_9';
   private isPublished = false;
   private isAudioEnabled = true;
@@ -171,45 +168,16 @@ export default class RtcEngine {
   private deviceId = '';
   private muteLocalVideoMutex = false;
 
+  // Create channel profile and set it here
+
   constructor(appId: string) {
     this.appId = appId;
     // this.AgoraRTC = AgoraRTC;
-    this.client = AgoraRTC.createClient({
-      codec: 'vp8',
-      mode: 'rtc',
-    });
-    this.screenClient = AgoraRTC.createClient({
-      codec: 'vp8',
-      mode: 'rtc',
-    });
-    // this.streamSpec = {
-    //   video: true,
-    //   audio: true,
-    // };
-    // this.streamSpecScreenshare = {
-    //   audio: false,
-    //   video: false,
-    //   screen: true,
-    //   screenAudio: true,
-    // };
   }
+
   static async create(appId: string): Promise<RtcEngine> {
     let engine = new RtcEngine(appId);
     window.engine = engine;
-    // let init = new Promise((resolve, reject) => {
-    //   engine.client.init(
-    //     appId,
-    //     function () {
-    //       window.engine = engine;
-    //       resolve();
-    //     },
-    //     function (err) {
-    //       console.error(err);
-    //       reject();
-    //     },
-    //   );
-    // });
-    // await init;
     return engine;
   }
 
@@ -222,25 +190,15 @@ export default class RtcEngine {
       let [localAudio, localVideo] =
         await AgoraRTC.createMicrophoneAndCameraTracks(
           {},
-          { encoderConfig: this.videoProfile },
+          {encoderConfig: this.videoProfile},
         );
-      // localVideo.setEncoderConfiguration(this.videoProfile);
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
     } catch (e) {
       throw e;
     }
-    // let enable = new Promise((resolve, reject) => {
-    //   this.streams.set(0, );
-    //   (this.streams.get(0) as AgoraRTC.Stream).setVideoProfile(
-    //     this.videoProfile,
-    //   );
-    //   (this.streams.get(0) as AgoraRTC.Stream).init(() => {
-    //     resolve();
-    //   }, reject);
-    // });
-    // await enable;
   }
+
   async publish() {
     if (this.localStream.audio && this.localStream.video) {
       try {
@@ -249,7 +207,6 @@ export default class RtcEngine {
         this.isVideoEnabled && tracks.push(this.localStream.video);
 
         if (tracks.length > 0) {
-          console.log('publishing now');
           await this.client.publish(tracks);
           if (tracks[0].trackMediaType === 'audio') {
             this.isAudioPublished = true;
@@ -281,6 +238,7 @@ export default class RtcEngine {
     optionalInfo: string,
     optionalUid: number,
   ): Promise<void> {
+    // TODO create agora client here
     this.client.on('user-joined', (user) => {
       const uid = this.inScreenshare
         ? user.uid !== this.screenClient.uid
@@ -308,7 +266,6 @@ export default class RtcEngine {
           ? user.uid
           : 1
         : user.uid;
-
       // if (uid ===1) {
       //   this.screenStream.audio?.close();
       //   this.screenStream.video?.close();
@@ -333,7 +290,6 @@ export default class RtcEngine {
       } else {
         await this.client.subscribe(user, mediaType);
       }
-
       // If the subscribed track is an audio track
       if (mediaType === 'audio') {
         const audioTrack = user.audioTrack;
@@ -367,7 +323,7 @@ export default class RtcEngine {
     });
     this.client.on('user-unpublished', async (user, mediaType) => {
       if (mediaType === 'audio') {
-        const { audio, ...rest } = this.remoteStreams.get(user.uid);
+        const {audio, ...rest} = this.remoteStreams.get(user.uid);
         this.remoteStreams.set(user.uid, rest);
         (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
           user.uid,
@@ -376,7 +332,7 @@ export default class RtcEngine {
           0,
         );
       } else {
-        const { video, ...rest } = this.remoteStreams.get(user.uid);
+        const {video, ...rest} = this.remoteStreams.get(user.uid);
         this.remoteStreams.set(user.uid, rest);
         (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
           user.uid,
@@ -388,22 +344,35 @@ export default class RtcEngine {
     });
 
     // this.client.on('stream-fallback', (evt))
-    this.client.on('stream-type-changed', function(uid, streamType) {
+    this.client.on('stream-type-changed', function (uid, streamType) {
       console.log('[fallback]: ', uid, streamType);
     });
 
-    this.client.on('network-quality', async ({ downlinkNetworkQuality, uplinkNetworkQuality }) => {
-      const networkQualityIndicatorCallback = this.eventsMap.get('NetworkQuality') as callbackType;
+    this.client.on(
+      'network-quality',
+      async ({downlinkNetworkQuality, uplinkNetworkQuality}) => {
+        const networkQualityIndicatorCallback = this.eventsMap.get(
+          'NetworkQuality',
+        ) as callbackType;
 
-      networkQualityIndicatorCallback(0, downlinkNetworkQuality, uplinkNetworkQuality)
-
-      const remoteUserNetworkQualities = this.client.getRemoteNetworkQuality();
+        networkQualityIndicatorCallback(
+          0,
+          downlinkNetworkQuality,
+          uplinkNetworkQuality,
+        );
 
-      Object.keys(remoteUserNetworkQualities).forEach((uid) => {
-        networkQualityIndicatorCallback(uid, remoteUserNetworkQualities[uid].downlinkNetworkQuality, remoteUserNetworkQualities[uid].uplinkNetworkQuality)
-      })
+        const remoteUserNetworkQualities =
+          this.client.getRemoteNetworkQuality();
 
-    })
+        Object.keys(remoteUserNetworkQualities).forEach((uid) => {
+          networkQualityIndicatorCallback(
+            uid,
+            remoteUserNetworkQualities[uid].downlinkNetworkQuality,
+            remoteUserNetworkQualities[uid].uplinkNetworkQuality,
+          );
+        });
+      },
+    );
 
     await this.client.join(
       this.appId,
@@ -412,10 +381,10 @@ export default class RtcEngine {
       optionalUid || null,
     );
     this.isJoined = true;
+
     await this.publish();
   }
 
-
   async leaveChannel(): Promise<void> {
     this.client.leave();
     this.remoteStreams.forEach((stream, uid, map) => {
@@ -521,6 +490,40 @@ export default class RtcEngine {
     return devices;
   }
 
+  async setChannelProfile(profile: ChannelProfile): Promise<void> {
+    try {
+      this.client = AgoraRTC.createClient({
+        codec: 'vp8',
+        mode:
+          profile === ChannelProfile.LiveBroadcasting ? mode.live : mode.rtc,
+      });
+      this.screenClient = AgoraRTC.createClient({
+        codec: 'vp8',
+        mode:
+          profile === ChannelProfile.LiveBroadcasting ? mode.live : mode.rtc,
+      });
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  async setClientRole(
+    clientRole: ClientRole,
+    options?: ClientRoleOptions,
+  ): Promise<void> {
+    try {
+      if (clientRole == ClientRole.Audience) {
+        await this.client.setClientRole(role.audience, options);
+        await this.screenClient.setClientRole(role.audience, options);
+      } else if (clientRole == ClientRole.Broadcaster) {
+        await this.client.setClientRole(role.host);
+        await this.screenClient.setClientRole(role.host);
+      }
+    } catch (e) {
+      throw e;
+    }
+  }
+
   async changeCamera(cameraId, callback, error): Promise<void> {
     try {
       await this.localStream.video?.setDevice(cameraId);

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

@@ -9,8 +9,62 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-export enum VideoRenderMode{
-    Hidden=1,
-    Fit,
-    Adaptive
-} 
+export enum VideoRenderMode {
+  Hidden = 1,
+  Fit,
+  Adaptive,
+}
+/**
+ *
+ * The latency level of an audience member in a live interactive streaming. Takes effect only when the user role is `"audience"`.
+ * - `1`: Low latency.
+ * - `2`: (Default) Ultra low latency.
+ */
+
+export const enum AudienceLatencyLevelType {
+  /**
+   * Low latency.
+   */
+  AUDIENCE_LEVEL_LOW_LATENCY = 1,
+  /**
+   * Ultra-low latency.
+   */
+  AUDIENCE_LEVEL_ULTRA_LOW_LATENCY = 2,
+  /**
+   * @ignore
+   */
+  AUDIENCE_LEVEL_SYNC_LATENCY = 3,
+}
+
+export interface ClientRoleOptions {
+  /**
+   * The latency level of an audience member in a live interactive streaming.
+   *
+   * > Note:
+   * > - Takes effect only when the user role is `"audience"`.
+   * > - Levels affect prices.
+   */
+  level: AudienceLatencyLevelType;
+}
+
+/* User role for live streaming mode */
+export enum role {
+  /* 1: A host can both send and receive streams. */
+  host = 'host',
+  /* 2: The default role. An audience can only receive streams.*/
+  audience = 'audience',
+}
+
+/* Mode for RTC (Live or Broadcast)*/
+export enum mode {
+  /**
+   * 0: (Default) The Communication profile.
+   * Use this profile in one-on-one calls or group calls, where all users can talk freely.
+   */
+  live = 'live',
+  /**
+   * 1: The Live-Broadcast profile.
+   * Users in a live-broadcast channel have a role as either host or audience. A host can both send and receive streams; an audience can only receive streams.
+   */
+  rtc = 'rtc',
+}

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

@@ -0,0 +1,13 @@
+export interface AttributesMap {
+  [key: string]: string;
+}
+
+export interface ChannelAttributeOptions {
+  /**
+   * Indicates whether or not to notify all channel members of a channel attribute change
+   * This flag is valid only within the current method call:
+   * true:  Notify all channel members of a channel attribute change.
+   * false: (Default) Do not notify all channel members of a channel attribute change.
+   */
+  enableNotificationToChannelMembers?: undefined | false | true;
+}

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

@@ -9,8 +9,17 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import {
+  ChannelAttributeOptions,
+  RtmAttribute,
+  RtmChannelAttribute,
+  Subscription,
+} from 'agora-react-native-rtm';
+import {RtmClientEvents} from 'agora-react-native-rtm/lib/typescript/src/RtmEngine';
 import AgoraRTM, {VERSION} from 'agora-rtm-sdk';
 
+type callbackType = (args?: any) => void;
+
 export default class RtmEngine {
   public appId: string;
   public client: any;
@@ -21,6 +30,7 @@ export default class RtmEngine {
     ['channelMessageReceived', () => null],
     ['channelMemberJoined', () => null],
     ['channelMemberLeft', () => null],
+    ['ChannelAttributesUpdated', () => null],
   ]);
   public clientEventsMap = new Map<string, any>([
     ['connectionStateChanged', () => null],
@@ -50,7 +60,8 @@ export default class RtmEngine {
     if (
       event === 'channelMessageReceived' ||
       event === 'channelMemberJoined' ||
-      event === 'channelMemberLeft'
+      event === 'channelMemberLeft' ||
+      event === 'ChannelAttributesUpdated'
     ) {
       this.channelEventsMap.set(event, listener);
     } else if (
@@ -181,6 +192,22 @@ export default class RtmEngine {
       console.log('Member Left', this.channelEventsMap);
       this.channelEventsMap.get('channelMemberLeft')({uid});
     });
+    this.channelMap
+      .get(channelId)
+      .on('AttributesUpdated', (attributes: RtmChannelAttribute) => {
+        /**
+         * a) The following piece of code is commented for future reference.
+         * b) To be used in future implementations of channel attributes
+         * c) Kindly note the below event listener 'ChannelAttributesUpdated' expects type
+         *    RtmChannelAttribute[] (array of objects [{key: 'valueOfKey', value: 'valueOfValue}])
+         *    whereas the above listener 'AttributesUpdated' receives attributes in object form
+         *    {[valueOfKey]: valueOfValue} of type RtmChannelAttribute
+         * d) Hence in this bridge the data should be modified to keep in sync with both the
+         *    listeners for web and listener for native
+         */
+        // this.channelEventsMap.get('ChannelAttributesUpdated')(attributes); //RN expect evt: any
+      });
+
     return this.channelMap.get(channelId).join();
   }
 
@@ -290,6 +317,40 @@ export default class RtmEngine {
     return this.client.setLocalUserAttributes({...formattedAttributes});
   }
 
+  async addOrUpdateLocalUserAttributes(attributes: RtmAttribute[]) {
+    let formattedAttributes: any = {};
+    attributes.map((attribute) => {
+      let key = Object.values(attribute)[0];
+      let value = Object.values(attribute)[1];
+      formattedAttributes[key] = value;
+    });
+    return this.client.addOrUpdateLocalUserAttributes({...formattedAttributes});
+  }
+
+  addOrUpdateChannelAttributes(
+    channelId: string,
+    attributes: RtmChannelAttribute[],
+    option: ChannelAttributeOptions,
+  ): Promise<void> {
+    /**
+     * The following piece of code is commented and not deleted
+     * to be used in future implementations of channel attributes
+     */
+
+    // let formattedAttributes: any = {};
+    // attributes.map((attribute) => {
+    //   let key = Object.values(attribute)[0];
+    //   let value = Object.values(attribute)[1];
+    //   formattedAttributes[key] = value;
+    // });
+    // return this.client.addOrUpdateChannelAttributes(
+    //   channelId,
+    //   {...formattedAttributes},
+    //   option,
+    // );
+    return Promise.resolve(); // remove this line when functionality is added to the above function
+  }
+
   async sendLocalInvitation(invitationProps: any) {
     let invite = this.client.createLocalInvitation(invitationProps.uid);
     this.localInvititations.set(invitationProps.uid, invite);
@@ -392,4 +453,20 @@ export default class RtmEngine {
   getSdkVersion(callback: (version: string) => void) {
     callback(VERSION);
   }
+
+  addListener<EventType extends keyof RtmClientEvents>(
+    event: EventType,
+    listener: RtmClientEvents[EventType],
+  ): Subscription {
+    if (event === 'ChannelAttributesUpdated') {
+      this.channelEventsMap.set(event, listener as callbackType);
+    }
+    return {
+      remove: () => {
+        console.log(
+          'Use destroy method to remove all the event listeners from the RtcEngine instead.',
+        );
+      },
+    };
+  }
 }

package/template/global.d.ts

@@ -71,5 +71,7 @@ interface ConfigInterface {
   MICROSOFT_CLIENT_ID: string;
   SLACK_CLIENT_ID: string;
   APPLE_CLIENT_ID: string;
+  EVENT_MODE: boolean;
+  RAISE_HAND: boolean;
 }
 declare var $config: ConfigInterface;