agora-appbuilder-core 4.0.0-api.7 → 4.0.0-api.9

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -4,18 +4,16 @@ import {
   ContentStateInterface,
   ActionType,
   UidType,
-  CustomContentObjects,
   CustomContentInferface,
 } from './Contexts/RtcContext';
 import {DispatchType} from './Contexts/DispatchContext';
 import PropsContext, {
   ToggleState,
-  RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
   PermissionState,
-  ChannelProfile,
-  ClientRole,
+  ChannelProfileType,
+  ClientRoleType,
 } from './Contexts/PropsContext';
 import {ContentProvider} from './Contexts/ContentContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
@@ -40,7 +38,7 @@ import Join from './Rtc/Join';
 import useLocalUid from './Utils/useLocalUid';
 import {DispatchProvider} from './Contexts/DispatchContext';
 
-const RtcConfigure = (props: {children: React.ReactNode}) => {
+const RtcConfigure = (outerProps: {children: React.ReactNode}) => {
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   let [dualStreamMode, setDualStreamMode] = useState<DualStreamMode>(
     rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
@@ -61,7 +59,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         videoForceDisabled: false,
       },
     },
-    activeUids: [localUid],
+    activeUids: rtcProps?.recordingBot ? [] : [localUid],
     pinnedUid: undefined,
     secondaryPinnedUid: undefined,
     lastJoinedUid: 0,
@@ -73,6 +71,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   React.useEffect(() => {
     setInitialState(JSON.parse(JSON.stringify(initialLocalState)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -415,7 +414,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
     <Create dispatch={dispatch}>
       {(engineRef, tracksReady) => (
         <Join
-          precall={!rtcProps.callActive}
+          precall={!rtcProps?.callActive}
           preventJoin={rtcProps?.preventJoin}
           engineRef={engineRef}
           uidState={uidState}
@@ -434,8 +433,9 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
                   defaultContent: uidState.defaultContent,
                   activeUids:
                     //In livestreaming mode ->audience should not see their local video tile
-                    mode == ChannelProfile.LiveBroadcasting &&
-                    rtcProps?.role == ClientRole.Audience
+                    mode ===
+                      ChannelProfileType.ChannelProfileLiveBroadcasting &&
+                    rtcProps?.role === ClientRoleType.ClientRoleAudience
                       ? [
                           ...new Set(
                             uidState.activeUids.filter((i) => i !== localUid),
@@ -460,7 +460,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
                       : undefined,
                   lastJoinedUid: uidState.lastJoinedUid,
                 }}>
-                {props.children}
+                {outerProps.children}
               </ContentProvider>
             </RtcProvider>
           </DispatchProvider>

package/template/agora-rn-uikit/src/Utils/isBotUser.ts

@@ -0,0 +1,15 @@
+export function isBotUser(args: [uid: number, elapsed: number]): boolean {
+  // STT bot
+  if (args[0] === 111111) {
+    return true;
+  }
+  // Web Recording bot (userUid)
+  if (args[0] === 100000) {
+    return true;
+  }
+  // Web Recording bot (screenUid)
+  if (args[0] === 100001) {
+    return true;
+  }
+  return false;
+}

package/template/agora-rn-uikit/src/Utils/quality.tsx

@@ -239,6 +239,14 @@ const quality = {
     frameRate: 30,
     bitRate: 1380,
   },
+  '720p_7': {
+    dimensions: {
+      width: 1280,
+      height: 720,
+    },
+    frameRate: 30,
+    bitRate: 3000,
+  },
 };
 
 export default quality;

package/template/agora-rn-uikit/src/Views/MaxVideoView.native.tsx

@@ -1,18 +1,16 @@
 import React, {useContext} from 'react';
-import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
+import {
+  RenderModeType,
+  RtcSurfaceView,
+  RtcTextureView,
+} from 'react-native-agora';
 import styles from '../Style';
 import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
-import {
-  View,
-  ViewStyle,
-  useWindowDimensions,
-  Platform,
-  ViewProps,
-} from 'react-native';
+import {View, ViewStyle, Platform, ViewProps, StyleSheet} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
-const LocalView = RtcLocalView.SurfaceView;
-let RemoteView = RtcRemoteView.SurfaceView;
+const LocalView = RtcSurfaceView;
+let RemoteView = RtcSurfaceView;
 
 interface MaxViewInterface {
   user: ContentInterface;
@@ -22,6 +20,13 @@ interface MaxViewInterface {
   isFullView?: boolean;
 }
 
+/* 
+RenderModeType :
+Fill: Stretches or zooms to fill the screen, might distort.
+Fit: Fits the entire video without distortion, might have black bars.
+Hidden: Fills the screen, might cut off parts of the video.
+*/
+
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
@@ -35,7 +40,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
     //SurfaceView does not support transform
     //TextureView only applicable to android
     if (Platform.OS === 'android') {
-      RemoteView = RtcRemoteView.TextureView;
+      RemoteView = RtcTextureView;
     }
     landscapeModeStyle = {
       flex: 1,
@@ -56,12 +61,17 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           ...(maxViewStyles as object),
           ...containerStyle,
         }}
-        renderMode={isFullView ? VideoRenderMode.FILL : VideoRenderMode.Fit}
+        canvas={{
+          renderMode: isFullView
+            ? RenderModeType.RenderModeAdaptive
+            : RenderModeType.RenderModeFit,
+          uid: 0,
+        }}
       />
     ) : Fallback ? (
       <Fallback />
     ) : (
-      <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
+      <View style={[style.containerStyle, containerStyle]} />
     )
   ) : props.user.video ? (
     <RemoteView
@@ -71,14 +81,20 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
         ...containerStyle,
         ...landscapeModeStyle,
       }}
-      uid={uid as number}
-      renderMode={VideoRenderMode.Fit}
+      canvas={{
+        renderMode: RenderModeType.RenderModeFit,
+        uid: uid as number,
+      }}
     />
   ) : Fallback ? (
     <Fallback />
   ) : (
-    <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
+    <View style={[style.containerStyle, containerStyle]} />
   );
 };
 
 export default MaxVideoView;
+
+const style = StyleSheet.create({
+  containerStyle: {flex: 1, backgroundColor: '#000'},
+});

package/template/agora-rn-uikit/src/Views/MaxVideoView.tsx

@@ -1,12 +1,13 @@
 import React, {useContext} from 'react';
-import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
-import styles from '../Style';
+
+import {RenderModeType, RtcSurfaceView} from 'react-native-agora';
+
 import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
-import {View, ViewStyle} from 'react-native';
+import {View, ViewStyle, StyleSheet} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
-const LocalView = RtcLocalView.SurfaceView;
-const RemoteView = RtcRemoteView.SurfaceView;
+const LocalView = RtcSurfaceView;
+const RemoteView = RtcSurfaceView;
 
 interface MaxViewInterface {
   user: ContentInterface;
@@ -17,8 +18,8 @@ interface MaxViewInterface {
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
-  const {styleProps, rtcProps} = useContext(PropsContext);
-  const {maxViewStyles} = styleProps || {};
+  const {rtcProps} = useContext(PropsContext);
+
   const Fallback = props.fallback;
   const {
     containerStyle = {},
@@ -40,16 +41,22 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
     props.user.video ? (
       <LocalView
         style={containerStyle}
-        renderMode={isFullView ? VideoRenderMode.FILL : VideoRenderMode.Fit}
+        canvas={{
+          renderMode: isFullView
+            ? RenderModeType.RenderModeAdaptive
+            : RenderModeType.RenderModeFit,
+          uid: 0,
+        }}
       />
     ) : Fallback ? (
       <Fallback />
     ) : (
-      <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
+      <View style={[style.containerStyle, containerStyle]} />
     )
   ) : (
     <>
       <div
+        // eslint-disable-next-line react-native/no-inline-styles
         style={{
           flex: 1,
           overflow: 'hidden',
@@ -58,8 +65,10 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
         }}>
         <RemoteView
           style={containerStyle}
-          uid={uid as number}
-          renderMode={VideoRenderMode.Fit}
+          canvas={{
+            renderMode: RenderModeType.RenderModeFit,
+            uid: uid as number,
+          }}
         />
       </div>
       {props.user.video ? (
@@ -69,9 +78,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           {Fallback ? (
             <Fallback />
           ) : (
-            <View
-              style={[{flex: 1, backgroundColor: '#000'}, containerStyle]}
-            />
+            <View style={[style.containerStyle, containerStyle]} />
           )}
         </>
       )}
@@ -80,3 +87,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
 };
 
 export default MaxVideoView;
+
+const style = StyleSheet.create({
+  containerStyle: {flex: 1, backgroundColor: '#000'},
+});

package/template/agora-rn-uikit/src/Views/MinVideoView.tsx

@@ -1,14 +1,16 @@
+/* eslint-disable react-native/no-inline-styles */
 import React, {useState, useContext} from 'react';
 import {View, TouchableOpacity, Image} from 'react-native';
-import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
+
+import {RenderModeType, RtcSurfaceView} from 'react-native-agora';
 import styles from '../Style';
 import icons from '../Controls/Icons';
 import RemoteControls from '../Controls/RemoteControls';
 import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
 import useLocalUid from '../Utils/useLocalUid';
 
-const LocalView = RtcLocalView.SurfaceView;
-const RemoteView = RtcRemoteView.SurfaceView;
+const LocalView = RtcSurfaceView;
+const RemoteView = RtcSurfaceView;
 
 interface MinViewInterface {
   user: ContentInterface;
@@ -33,7 +35,7 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
             props.user.video ? (
               <LocalView
                 style={{...styles.minView, ...(minViewStyles as object)}}
-                renderMode={VideoRenderMode.Hidden}
+                canvas={{renderMode: RenderModeType.RenderModeHidden, uid: 0}}
                 zOrderMediaOverlay={true}
               />
             ) : (
@@ -49,8 +51,10 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
           ) : (
             <RemoteView
               style={{...styles.minView, ...(minViewStyles as object)}}
-              uid={uid as number}
-              renderMode={VideoRenderMode.Hidden}
+              canvas={{
+                renderMode: RenderModeType.RenderModeHidden,
+                uid: uid as number,
+              }}
               zOrderMediaOverlay={true}
             />
           )}
@@ -58,14 +62,16 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
       ) : uid === localUid ? (
         <LocalView
           style={{...styles.minView, ...(minViewStyles as object)}}
-          renderMode={VideoRenderMode.Hidden}
+          canvas={{renderMode: RenderModeType.RenderModeHidden, uid: 0}}
           zOrderMediaOverlay={true}
         />
       ) : (
         <RemoteView
           style={{...styles.minView, ...(minViewStyles as object)}}
-          uid={uid as number}
-          renderMode={VideoRenderMode.Hidden}
+          canvas={{
+            renderMode: RenderModeType.RenderModeHidden,
+            uid: uid as number,
+          }}
           zOrderMediaOverlay={true}
         />
       )}

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

@@ -42,7 +42,7 @@ export type {
   PropsInterface,
 } from './Contexts/PropsContext';
 
-export {ClientRole, ChannelProfile} from './Contexts/PropsContext';
+export {ClientRoleType, ChannelProfileType} from './Contexts/PropsContext';
 
 export {
   default as RtcContext,

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

@@ -31,9 +31,11 @@ import type {
   RtcEngineEvents,
   Subscription,
 } from 'react-native-agora/lib/typescript/src/common/RtcEvents';
+
+import {IRtcEngine} from 'react-native-agora';
 import {VideoProfile} from '../quality';
-import {ChannelProfile, ClientRole} from '../../../agora-rn-uikit';
-import {role, mode} from './Types';
+import {ChannelProfileType, ClientRoleType} from '../../../agora-rn-uikit';
+import {role, mode, RtcEngineContext} from './Types';
 import {LOG_ENABLED, GEO_FENCING} from '../../../config.json';
 import {Platform} from 'react-native';
 import isMobileOrTablet from '../../../src/utils/isMobileOrTablet';
@@ -170,6 +172,7 @@ interface RemoteStream {
   audio?: IRemoteAudioTrack;
   video?: IRemoteVideoTrack;
 }
+
 if ($config.GEO_FENCING) {
   AgoraRTC.setArea({
     areaCode: AREAS.GLOBAL,
@@ -191,15 +194,15 @@ export default class RtcEngine {
   public client: any | IAgoraRTCClient;
   public screenClient: any | IAgoraRTCClient;
   public eventsMap = new Map<string, callbackType>([
-    ['UserJoined', () => null],
-    ['UserOffline', () => null],
-    ['JoinChannelSuccess', () => null],
-    ['ScreenshareStopped', () => null],
-    ['RemoteAudioStateChanged', () => null],
-    ['RemoteVideoStateChanged', () => null],
-    ['NetworkQuality', () => null],
-    ['ActiveSpeaker', () => null],
-    ['StreamMessage', () => null],
+    ['onUserJoined', () => null],
+    ['onUserOffline', () => null],
+    ['onJoinChannelSuccess', () => null],
+    ['onScreenshareStopped', () => null],
+    ['onRemoteAudioStateChanged', () => null],
+    ['onRemoteVideoStateChanged', () => null],
+    ['onNetworkQuality', () => null],
+    ['onActiveSpeaker', () => null],
+    ['onStreamMessage', () => null],
   ]);
   public localStream: LocalStream = {};
   public screenStream: ScreenStream = {};
@@ -220,17 +223,9 @@ export default class RtcEngine {
   private usersVolumeLevel = [];
   // Create channel profile and set it here
 
-  // Create channel profile and set it here
-
-  constructor(appId: string) {
+  initialize(context: RtcEngineContext) {
+    const {appId} = context;
     this.appId = appId;
-    // this.AgoraRTC = AgoraRTC;
-  }
-
-  static async create(appId: string): Promise<RtcEngine> {
-    let engine = new RtcEngine(appId);
-    window.engine = engine;
-    return engine;
   }
 
   getRemoteVideoStats(id: string) {
@@ -412,7 +407,7 @@ export default class RtcEngine {
 
           if (this.isPublished === false) {
             this.isPublished = true;
-            (this.eventsMap.get('JoinChannelSuccess') as callbackType)();
+            (this.eventsMap.get('onJoinChannelSuccess') as callbackType)();
           }
         }
       } catch (e) {
@@ -425,19 +420,21 @@ export default class RtcEngine {
   async joinChannel(
     token: string,
     channelName: string,
-    optionalInfo: string,
     optionalUid: number,
+    _optionalInfo: {},
   ): Promise<void> {
     // TODO create agora client here
     this.client.on('user-joined', user => {
-      (this.eventsMap.get('UserJoined') as callbackType)(user.uid);
-      (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
+      (this.eventsMap.get('onUserJoined') as callbackType)({}, user.uid);
+      (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
+        {},
         user.uid,
         0,
         0,
         0,
       );
-      (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
+      (this.eventsMap.get('onRemoteAudioStateChanged') as callbackType)(
+        {},
         user.uid,
         0,
         0,
@@ -450,13 +447,14 @@ export default class RtcEngine {
       if (this.remoteStreams.has(uid)) {
         this.remoteStreams.delete(uid);
       }
-      (this.eventsMap.get('UserOffline') as callbackType)(uid);
+      (this.eventsMap.get('onUserOffline') as callbackType)({}, uid);
       // (this.eventsMap.get('UserJoined') as callbackType)(uid);
     });
     this.client.on('user-published', async (user, mediaType) => {
       // Initiate the subscription
       if (this.inScreenshare && user.uid === this.screenClient.uid) {
-        (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
+        (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
+          {},
           user.uid,
           2,
           0,
@@ -480,7 +478,8 @@ export default class RtcEngine {
             .get(user.uid)
             ?.audio?.setPlaybackDevice(this.speakerDeviceId);
         }
-        (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
+        (this.eventsMap.get('onRemoteAudioStateChanged') as callbackType)(
+          {},
           user.uid,
           2,
           0,
@@ -494,7 +493,8 @@ export default class RtcEngine {
           ...this.remoteStreams.get(user.uid),
           video: videoTrack,
         });
-        (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
+        (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
+          {},
           user.uid,
           2,
           0,
@@ -506,7 +506,8 @@ export default class RtcEngine {
       if (mediaType === 'audio') {
         const {audio, ...rest} = this.remoteStreams.get(user.uid);
         this.remoteStreams.set(user.uid, rest);
-        (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
+        (this.eventsMap.get('onRemoteAudioStateChanged') as callbackType)(
+          {},
           user.uid,
           0,
           0,
@@ -515,7 +516,8 @@ export default class RtcEngine {
       } else {
         const {video, ...rest} = this.remoteStreams.get(user.uid);
         this.remoteStreams.set(user.uid, rest);
-        (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
+        (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
+          {},
           user.uid,
           0,
           0,
@@ -567,13 +569,14 @@ export default class RtcEngine {
       'network-quality',
       async ({downlinkNetworkQuality, uplinkNetworkQuality}) => {
         const networkQualityIndicatorCallback = this.eventsMap.get(
-          'NetworkQuality',
+          'onNetworkQuality',
         ) as callbackType;
 
         networkQualityIndicatorCallback(
+          {},
           0,
-          downlinkNetworkQuality,
           uplinkNetworkQuality,
+          downlinkNetworkQuality,
         );
 
         const remoteUserNetworkQualities =
@@ -581,9 +584,10 @@ export default class RtcEngine {
 
         Object.keys(remoteUserNetworkQualities).forEach(uid => {
           networkQualityIndicatorCallback(
+            {},
             uid,
-            remoteUserNetworkQualities[uid].downlinkNetworkQuality,
             remoteUserNetworkQualities[uid].uplinkNetworkQuality,
+            remoteUserNetworkQualities[uid].downlinkNetworkQuality,
           );
         });
       },
@@ -594,7 +598,7 @@ export default class RtcEngine {
       console.log(
         `stt-web: onStreamMessageCallback uid:${uid} , payload:${payload}`,
       );
-      (this.eventsMap.get('StreamMessage') as callbackType)(uid, payload);
+      (this.eventsMap.get('onStreamMessage') as callbackType)(uid, payload);
     });
 
     await this.client.join(
@@ -628,15 +632,15 @@ export default class RtcEngine {
     listener: RtcEngineEvents[EventType],
   ): Subscription {
     if (
-      event === 'UserJoined' ||
-      event === 'UserOffline' ||
-      event === 'JoinChannelSuccess' ||
-      event === 'ScreenshareStopped' ||
-      event === 'RemoteAudioStateChanged' ||
-      event === 'RemoteVideoStateChanged' ||
-      event === 'NetworkQuality' ||
-      event === 'ActiveSpeaker' ||
-      event === 'StreamMessage'
+      event === 'onUserJoined' ||
+      event === 'onUserOffline' ||
+      event === 'onJoinChannelSuccess' ||
+      event === 'onScreenshareStopped' ||
+      event === 'onRemoteAudioStateChanged' ||
+      event === 'onRemoteVideoStateChanged' ||
+      event === 'onNetworkQuality' ||
+      event === 'onActiveSpeaker' ||
+      event === 'onStreamMessage'
     ) {
       this.eventsMap.set(event, listener as callbackType);
     }
@@ -741,17 +745,21 @@ export default class RtcEngine {
     return devices;
   }
 
-  async setChannelProfile(profile: ChannelProfile): Promise<void> {
+  async setChannelProfile(profile: ChannelProfileType): Promise<void> {
     try {
       this.client = AgoraRTC.createClient({
         codec: 'vp8',
         mode:
-          profile === ChannelProfile.LiveBroadcasting ? mode.live : mode.rtc,
+          profile === ChannelProfileType.ChannelProfileLiveBroadcasting
+            ? mode.live
+            : mode.rtc,
       });
       this.screenClient = AgoraRTC.createClient({
         codec: 'vp8',
         mode:
-          profile === ChannelProfile.LiveBroadcasting ? mode.live : mode.rtc,
+          profile === ChannelProfileType.ChannelProfileLiveBroadcasting
+            ? mode.live
+            : mode.rtc,
       });
     } catch (e) {
       throw e;
@@ -759,11 +767,11 @@ export default class RtcEngine {
   }
 
   async setClientRole(
-    clientRole: ClientRole,
+    clientRole: ClientRoleType,
     options?: ClientRoleOptions,
   ): Promise<void> {
     try {
-      if (clientRole == ClientRole.Audience) {
+      if (clientRole == ClientRoleType.ClientRoleAudience) {
         if (this.isJoined) {
           // Unpublish the streams when role is changed to Audience
           await this.client.unpublish();
@@ -773,7 +781,7 @@ export default class RtcEngine {
         }
         await this.client.setClientRole(role.audience, options);
         await this.screenClient.setClientRole(role.audience, options);
-      } else if (clientRole == ClientRole.Broadcaster) {
+      } else if (clientRole == ClientRoleType.ClientRoleBroadcaster) {
         await this.client.setClientRole(role.host);
         await this.screenClient.setClientRole(role.host);
       }
@@ -947,13 +955,18 @@ export default class RtcEngine {
     console.error('Please use enableEncryption instead');
   }
 
-  async destroy(): Promise<void> {
+  // async removeAllListeners<EventType extends keyof RtcEngineEvents>(event: EventType) {
+  //   this.client.removeAllListeners(eventName);
+  // }
+
+  async release(): Promise<void> {
     if (this.inScreenshare) {
-      (this.eventsMap.get('UserOffline') as callbackType)(
+      (this.eventsMap.get('onUserOffline') as callbackType)(
+        {},
         this.screenClient.uid,
       );
       this.screenClient.leave();
-      (this.eventsMap.get('ScreenshareStopped') as callbackType)();
+      (this.eventsMap.get('onScreenshareStopped') as callbackType)();
     }
     this.eventsMap.forEach((callback, event, map) => {
       this.client.off(event, callback);
@@ -1063,7 +1076,8 @@ export default class RtcEngine {
       );
 
       this.screenStream.video.on('track-ended', () => {
-        (this.eventsMap.get('UserOffline') as callbackType)(
+        (this.eventsMap.get('onUserOffline') as callbackType)(
+          {},
           this.screenClient.uid,
         );
 
@@ -1073,15 +1087,16 @@ export default class RtcEngine {
         this.screenStream.video?.close();
         this.screenStream = {};
 
-        (this.eventsMap.get('ScreenshareStopped') as callbackType)();
+        (this.eventsMap.get('onScreenshareStopped') as callbackType)();
         this.inScreenshare = false;
       });
     } else {
-      (this.eventsMap.get('UserOffline') as callbackType)(
+      (this.eventsMap.get('onUserOffline') as callbackType)(
+        {},
         this.screenClient.uid,
       );
       this.screenClient.leave();
-      (this.eventsMap.get('ScreenshareStopped') as callbackType)();
+      (this.eventsMap.get('onScreenshareStopped') as callbackType)();
       try {
         this.screenStream.audio?.close();
         this.screenStream.video?.close();