agora-electron-sdk 4.4.0-dev.1 → 4.4.0

package/ts/Private/IAgoraRtcEngineEx.ts

@@ -46,15 +46,14 @@ export class RtcConnection {
  */
 export abstract class IRtcEngineEx extends IRtcEngine {
   /**
-   * Joins a channel with the connection ID.
+   * Joins a channel.
    *
-   * You can call this method multiple times to join more than one channel.
-   *  If you are already in a channel, you cannot rejoin it with the same user ID.
-   *  If you want to join the same channel from different devices, ensure that the user IDs are different for all devices.
-   *  Ensure that the App ID you use to generate the token is the same as the App ID used when creating the IRtcEngine instance.
-   *  If you choose the Testing Mode (using an App ID for authentication) for your project and call this method to join a channel, you will automatically exit the channel after 24 hours.
+   * You can call this method multiple times to join more than one channel. If you want to join the same channel from different devices, ensure that the user IDs are different for all devices.
    *
-   * @param token The token generated on your server for authentication. If you need to join different channels at the same time or switch between channels, Agora recommends using a wildcard token so that you don't need to apply for a new token every time joining a channel.
+   * @param token The token generated on your server for authentication.
+   *  (Recommended) If your project has enabled the security mode (using APP ID and Token for authentication), this parameter is required.
+   *  If you have only enabled the testing mode (using APP ID for authentication), this parameter is optional. You will automatically exit the channel 24 hours after successfully joining in.
+   *  If you need to join different channels at the same time or switch between channels, Agora recommends using a wildcard token so that you don't need to apply for a new token every time joining a channel.
    * @param connection The connection information. See RtcConnection.
    * @param options The channel media options. See ChannelMediaOptions.
    *
@@ -62,11 +61,11 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    * 0: Success.
    *  < 0: Failure.
    *  -2: The parameter is invalid. For example, the token is invalid, the uid parameter is not set to an integer, or the value of a member in ChannelMediaOptions is invalid. You need to pass in a valid parameter and join the channel again.
-   *  -3: Failes to initialize the IRtcEngine object. You need to reinitialize the IRtcEngine object.
+   *  -3: Fails to initialize the IRtcEngine object. You need to reinitialize the IRtcEngine object.
    *  -7: The IRtcEngine object has not been initialized. You need to initialize the IRtcEngine object before calling this method.
-   *  -8: The internal state of the IRtcEngine object is wrong. The typical cause is that you call this method to join the channel without calling startEchoTest to stop the test after calling stopEchoTest to start a call loop test. You need to call stopEchoTest before calling this method.
-   *  -17: The request to join the channel is rejected. The typical cause is that the user is in the channel. Agora recommends that you use the onConnectionStateChanged callback to determine whether the user exists in the channel. Do not call this method to join the channel unless you receive the ConnectionStateDisconnected (1) state.
-   *  -102: The channel name is invalid. You need to pass in a valid channelname in channelId to rejoin the channel.
+   *  -8: The internal state of the IRtcEngine object is wrong. The typical cause is that after calling startEchoTest to start a call loop test, you call this method to join the channel without calling stopEchoTest to stop the test. You need to call stopEchoTest before calling this method.
+   *  -17: The request to join the channel is rejected. The typical cause is that the user is already in the channel. Agora recommends that you use the onConnectionStateChanged callback to see whether the user is in the channel. Do not call this method to join the channel unless you receive the ConnectionStateDisconnected (1) state.
+   *  -102: The channel name is invalid. You need to pass in a valid channel name in channelId to rejoin the channel.
    *  -121: The user ID is invalid. You need to pass in a valid user ID in uid to rejoin the channel.
    */
   abstract joinChannelEx(
@@ -103,9 +102,9 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    * @returns
    * 0: Success.
    *  < 0: Failure.
-   *  -2: The value of a member in the ChannelMediaOptions structure is invalid. For example, the token or the user ID is invalid. You need to fill in a valid parameter.
+   *  -2: The value of a member in ChannelMediaOptions is invalid. For example, the token or the user ID is invalid. You need to fill in a valid parameter.
    *  -7: The IRtcEngine object has not been initialized. You need to initialize the IRtcEngine object before calling this method.
-   *  -8: The internal state of the IRtcEngine object is wrong. The possible reason is that the user is not in the channel. Agora recommends that you use the onConnectionStateChanged callback to determine whether the user exists in the channel. If you receive the ConnectionStateDisconnected (1) or ConnectionStateFailed (5) state, the user is not in the channel. You need to call joinChannel to join a channel before calling this method.
+   *  -8: The internal state of the IRtcEngine object is wrong. The possible reason is that the user is not in the channel. Agora recommends that you use the onConnectionStateChanged callback to see whether the user is in the channel. If you receive the ConnectionStateDisconnected (1) or ConnectionStateFailed (5) state, the user is not in the channel. You need to call joinChannel to join a channel before calling this method.
    */
   abstract updateChannelMediaOptionsEx(
     options: ChannelMediaOptions,
@@ -132,7 +131,8 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Initializes the video view of a remote user.
    *
-   * This method initializes the video view of a remote stream on the local device. It affects only the video view that the local user sees. Call this method to bind the remote video stream to a video view and to set the rendering and mirror modes of the video view. The application specifies the uid of the remote video in the VideoCanvas method before the remote user joins the channel. If the remote uid is unknown to the application, set it after the application receives the onUserJoined callback. If the Video Recording function is enabled, the Video Recording Service joins the channel as a dummy client, causing other clients to also receive the onUserJoined callback. Do not bind the dummy client to the application view because the dummy client does not send any video streams. To unbind the remote user from the view, set the view parameter to NULL. Once the remote user leaves the channel, the SDK unbinds the remote user. To update the rendering or mirror mode of the remote video view during a call, use the setRemoteRenderModeEx method.
+   * This method initializes the video view of a remote stream on the local device. It affects only the video view that the local user sees. Call this method to bind the remote video stream to a video view and to set the rendering and mirror modes of the video view. The application specifies the uid of the remote video in the VideoCanvas method before the remote user joins the channel. If the remote uid is unknown to the application, set it after the application receives the onUserJoined callback. If the Video Recording function is enabled, the Video Recording Service joins the channel as a dummy client, causing other clients to also receive the onUserJoined callback. Do not bind the dummy client to the application view because the dummy client does not send any video streams. To unbind the remote user from the view, set the view parameter to NULL. Once the remote user leaves the channel, the SDK unbinds the remote user.
+   *  To update the rendering or mirror mode of the remote video view during a call, use the setRemoteRenderModeEx method.
    *
    * @param canvas The remote video view settings. See VideoCanvas.
    * @param connection The connection information. See RtcConnection.
@@ -185,7 +185,10 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Sets the video stream type to subscribe to.
    *
-   * The SDK will dynamically adjust the size of the corresponding video stream based on the size of the video window to save bandwidth and computing resources. The default aspect ratio of the low-quality video stream is the same as that of the high-quality video stream. According to the current aspect ratio of the high-quality video stream, the system will automatically allocate the resolution, frame rate, and bitrate of the low-quality video stream. The SDK defaults to enabling low-quality video stream adaptive mode (AutoSimulcastStream) on the sending end, which means the sender does not actively send low-quality video stream. The receiver with the role of the host can initiate a low-quality video stream request by calling this method, and upon receiving the request, the sending end automatically starts sending the low-quality video stream.
+   * The SDK will dynamically adjust the size of the corresponding video stream based on the size of the video window to save bandwidth and computing resources. The default aspect ratio of the low-quality video stream is the same as that of the high-quality video stream. According to the current aspect ratio of the high-quality video stream, the system will automatically allocate the resolution, frame rate, and bitrate of the low-quality video stream. Depending on the default behavior of the sender and the specific settings when calling setDualStreamMode, the scenarios for the receiver calling this method are as follows:
+   *  The SDK enables low-quality video stream adaptive mode (AutoSimulcastStream) on the sender side by default, meaning only the high-quality video stream is transmitted. Only the receiver with the role of the host can call this method to initiate a low-quality video stream request. Once the sender receives the request, it starts automatically sending the low-quality video stream. At this point, all users in the channel can call this method to switch to low-quality video stream subscription mode.
+   *  If the sender calls setDualStreamMode and sets mode to DisableSimulcastStream (never send low-quality video stream), then calling this method will have no effect.
+   *  If the sender calls setDualStreamMode and sets mode to EnableSimulcastStream (always send low-quality video stream), both the host and audience receivers can call this method to switch to low-quality video stream subscription mode.
    *  If the publisher has already called setDualStreamModeEx and set mode to DisableSimulcastStream (never send low-quality video stream), calling this method will not take effect, you should call setDualStreamModeEx again on the sending end and adjust the settings.
    *  Calling this method on the receiving end of the audience role will not take effect.
    *
@@ -485,8 +488,6 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    * Adjusts the playback signal volume of a specified remote user.
    *
    * You can call this method to adjust the playback volume of a specified remote user. To adjust the playback volume of different remote users, call the method as many times, once for each remote user.
-   *  Call this method after joining a channel.
-   *  The playback volume here refers to the mixed volume of a specified remote user.
    *
    * @param uid The user ID of the remote user.
    * @param volume The volume of the user. The value range is [0,400].
@@ -518,7 +519,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Enables or disables the built-in encryption.
    *
-   * All users in the same channel must use the same encryption mode and encryption key. After the user leaves the channel, the SDK automatically disables the built-in encryption. To enable the built-in encryption, call this method before the user joins the channel again. In scenarios requiring high security, Agora recommends calling this method to enable the built-in encryption before joining a channel.
+   * After the user leaves the channel, the SDK automatically disables the built-in encryption. To enable the built-in encryption, call this method before the user joins the channel again.
    *
    * @param connection The connection information. See RtcConnection.
    * @param enabled Whether to enable built-in encryption: true : Enable the built-in encryption. false : (Default) Disable the built-in encryption.
@@ -552,10 +553,11 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Sends data stream messages.
    *
-   * After calling createDataStreamEx, you can call this method to send data stream messages to all users in the channel. The SDK has the following restrictions on this method:
-   *  Up to 60 packets can be sent per second in a channel with each packet having a maximum size of 1 KB.
-   *  Each client can send up to 30 KB of data per second.
-   *  Each user can have up to five data streams simultaneously. A successful method call triggers the onStreamMessage callback on the remote client, from which the remote user gets the stream message. A failed method call triggers the onStreamMessageError callback on the remote client.
+   * A successful method call triggers the onStreamMessage callback on the remote client, from which the remote user gets the stream message. A failed method call triggers the onStreamMessageError callback on the remote client. The SDK has the following restrictions on this method:
+   *  Each user can have up to five data streams simultaneously.
+   *  Up to 60 packets can be sent per second in a data stream with each packet having a maximum size of 1 KB.
+   *  Up to 30 KB of data can be sent per second in a data stream. After calling createDataStreamEx, you can call this method to send data stream messages to all users in the channel.
+   *  Call this method after joinChannelEx.
    *  Ensure that you call createDataStreamEx to create a data channel before calling this method.
    *  This method applies only to the COMMUNICATION profile or to the hosts in the LIVE_BROADCASTING profile. If an audience in the LIVE_BROADCASTING profile calls this method, the audience may be switched to a host.
    *
@@ -630,7 +632,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Enables the reporting of users' volume indication.
    *
-   * This method enables the SDK to regularly report the volume information to the app of the local user who sends a stream and remote users (three users at most) whose instantaneous volumes are the highest. Once you call this method and users send streams in the channel, the SDK triggers the onAudioVolumeIndication callback at the time interval set in this method.
+   * This method enables the SDK to regularly report the volume information to the app of the local user who sends a stream and remote users (three users at most) whose instantaneous volumes are the highest.
    *
    * @param interval Sets the time interval between two consecutive volume indications:
    *  ≤ 0: Disables the volume indication.
@@ -747,7 +749,6 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    *  < 0: Failure.
    *  -1: A general error occurs (no specified reason).
    *  -2: The parameter is invalid.
-   *  -7: The method call was rejected. It may be because the SDK has not been initialized successfully, or the user role is not a host.
    *  -8: Internal state error. Probably because the user is not a broadcaster.
    */
   abstract startOrUpdateChannelMediaRelayEx(
@@ -765,6 +766,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    * @returns
    * 0: Success.
    *  < 0: Failure.
+   *  -5: The method call was rejected. There is no ongoing channel media relay.
    */
   abstract stopChannelMediaRelayEx(connection: RtcConnection): number;
 
@@ -778,6 +780,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    * @returns
    * 0: Success.
    *  < 0: Failure.
+   *  -5: The method call was rejected. There is no ongoing channel media relay.
    */
   abstract pauseAllChannelMediaRelayEx(connection: RtcConnection): number;
 
@@ -791,6 +794,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
    * @returns
    * 0: Success.
    *  < 0: Failure.
+   *  -5: The method call was rejected. There is no paused channel media relay.
    */
   abstract resumeAllChannelMediaRelayEx(connection: RtcConnection): number;
 
@@ -831,7 +835,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Sets the dual-stream mode on the sender side.
    *
-   * The SDK defaults to enabling low-quality video stream adaptive mode (AutoSimulcastStream) on the sending end, which means the sender does not actively send low-quality video stream. The receiver with the role of the host can initiate a low-quality video stream request by calling setRemoteVideoStreamTypeEx, and upon receiving the request, the sending end automatically starts sending the low-quality video stream.
+   * The SDK defaults to enabling low-quality video stream adaptive mode (AutoSimulcastStream) on the sender side, which means the sender does not actively send low-quality video stream. The receiving end with the role of the host can initiate a low-quality video stream request by calling setRemoteVideoStreamTypeEx, and upon receiving the request, the sending end automatically starts sending low-quality stream.
    *  If you want to modify this behavior, you can call this method and set mode to DisableSimulcastStream (never send low-quality video streams) or EnableSimulcastStream (always send low-quality video streams).
    *  If you want to restore the default behavior after making changes, you can call this method again with mode set to AutoSimulcastStream. The difference and connection between this method and enableDualStreamModeEx is as follows:
    *  When calling this method and setting mode to DisableSimulcastStream, it has the same effect as enableDualStreamModeEx (false).
@@ -871,12 +875,9 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   ): number;
 
   /**
-   * Takes a snapshot of a video stream.
+   * Takes a snapshot of a video stream using connection ID.
    *
-   * The method is asynchronous, and the SDK has not taken the snapshot when the method call returns. After a successful method call, the SDK triggers the onSnapshotTaken callback to report whether the snapshot is successfully taken, as well as the details for that snapshot. This method takes a snapshot of a video stream from the specified user, generates a JPG image, and saves it to the specified path.
-   *  Call this method after the joinChannelEx method.
-   *  When used for local video snapshots, this method takes a snapshot for the video streams specified in ChannelMediaOptions.
-   *  If the user's video has been preprocessed, for example, watermarked or beautified, the resulting snapshot includes the pre-processing effect.
+   * This method takes a snapshot of a video stream from the specified user, generates a JPG image, and saves it to the specified path.
    *
    * @param connection The connection information. See RtcConnection.
    * @param uid The user ID. Set uid as 0 if you want to take a snapshot of the local user's video.
@@ -897,10 +898,10 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Enables or disables video screenshot and upload.
    *
-   * This method can take screenshots for multiple video streams and upload them. When video screenshot and upload function is enabled, the SDK takes screenshots and uploads videos sent by local users based on the type and frequency of the module you set in ContentInspectConfig. After video screenshot and upload, the Agora server sends the callback notification to your app server in HTTPS requests and sends all screenshots to the third-party cloud storage service. Before calling this method, ensure that you have contacted to activate the video screenshot upload service.
+   * This method can take screenshots for multiple video streams and upload them. When video screenshot and upload function is enabled, the SDK takes screenshots and uploads videos sent by local users based on the type and frequency of the module you set in ContentInspectConfig. After video screenshot and upload, the Agora server sends the callback notification to your app server in HTTPS requests and sends all screenshots to the third-party cloud storage service.
    *
-   * @param enabled Whether to enable video screenshot and upload : true : Enables video screenshot and upload. false : Disables video screenshot and upload.
-   * @param config Configuration of video screenshot and upload. See ContentInspectConfig. When the video moderation module is set to video moderation via Agora self-developed extension(ContentInspectSupervision), the video screenshot and upload dynamic library libagora_content_inspect_extension.dll is required. Deleting this library disables the screenshot and upload feature.
+   * @param enabled Whether to enalbe video screenshot and upload: true : Enables video screenshot and upload. false : Disables video screenshot and upload.
+   * @param config Screenshot and upload configuration. See ContentInspectConfig. When the video moderation module is set to video moderation via Agora self-developed extension(ContentInspectSupervision), the video screenshot and upload dynamic library libagora_content_inspect_extension.dll is required. Deleting this library disables the screenshot and upload feature.
    * @param connection The connection information. See RtcConnection.
    *
    * @returns
@@ -938,7 +939,7 @@ export abstract class IRtcEngineEx extends IRtcEngine {
   /**
    * Gets the call ID with the connection ID.
    *
-   * Call this method after joining a channel. When a user joins a channel on a client, a callId is generated to identify the call from the client. You can call this method to get the callId parameter, and pass it in when calling methods such as rate and complain.
+   * When a user joins a channel on a client, a callId is generated to identify the call from the client. You can call this method to get the callId parameter, and pass it in when calling methods such as rate and complain.
    *
    * @param connection The connection information. See RtcConnection.
    *

package/ts/Private/IAudioDeviceManager.ts

@@ -193,7 +193,7 @@ export abstract class IAudioDeviceManager {
   /**
    * Starts the audio playback device test.
    *
-   * This method tests whether the audio device for local playback works properly. Once a user starts the test, the SDK plays an audio file specified by the user. If the user can hear the audio, the playback device works properly. After calling this method, the SDK triggers the onAudioVolumeIndication callback every 100 ms, reporting uid = 1 and the volume information of the playback device. The difference between this method and the startEchoTest method is that the former checks if the local audio playback device is working properly, while the latter can check the audio and video devices and network conditions. Ensure that you call this method before joining a channel. After the test is completed, call stopPlaybackDeviceTest to stop the test before joining a channel.
+   * This method tests whether the audio device for local playback works properly. Once a user starts the test, the SDK plays an audio file specified by the user. If the user can hear the audio, the playback device works properly. After calling this method, the SDK triggers the onAudioVolumeIndication callback every 100 ms, reporting uid = 1 and the volume information of the playback device. The difference between this method and the startEchoTest method is that the former checks if the local audio playback device is working properly, while the latter can check the audio and video devices and network conditions. Call this method before joining a channel. After the test is completed, call stopPlaybackDeviceTest to stop the test before joining a channel.
    *
    * @param testAudioFilePath The path of the audio file. The data format is string in UTF-8.
    *  Supported file formats: wav, mp3, m4a, and aac.
@@ -208,7 +208,7 @@ export abstract class IAudioDeviceManager {
   /**
    * Stops the audio playback device test.
    *
-   * This method stops the audio playback device test. You must call this method to stop the test after calling the startPlaybackDeviceTest method. Ensure that you call this method before joining a channel.
+   * This method stops the audio playback device test. You must call this method to stop the test after calling the startPlaybackDeviceTest method. Call this method before joining a channel.
    *
    * @returns
    * 0: Success.
@@ -219,7 +219,7 @@ export abstract class IAudioDeviceManager {
   /**
    * Starts the audio capturing device test.
    *
-   * This method tests whether the audio capturing device works properly. After calling this method, the SDK triggers the onAudioVolumeIndication callback at the time interval set in this method, which reports uid = 0 and the volume information of the capturing device. The difference between this method and the startEchoTest method is that the former checks if the local audio capturing device is working properly, while the latter can check the audio and video devices and network conditions. Ensure that you call this method before joining a channel. After the test is completed, call stopRecordingDeviceTest to stop the test before joining a channel.
+   * This method tests whether the audio capturing device works properly. After calling this method, the SDK triggers the onAudioVolumeIndication callback at the time interval set in this method, which reports uid = 0 and the volume information of the capturing device. The difference between this method and the startEchoTest method is that the former checks if the local audio capturing device is working properly, while the latter can check the audio and video devices and network conditions. Call this method before joining a channel. After the test is completed, call stopRecordingDeviceTest to stop the test before joining a channel.
    *
    * @param indicationInterval The interval (ms) for triggering the onAudioVolumeIndication callback. This value should be set to greater than 10, otherwise, you will not receive the onAudioVolumeIndication callback and the SDK returns the error code -2. Agora recommends that you set this value to 100.
    *
@@ -233,7 +233,7 @@ export abstract class IAudioDeviceManager {
   /**
    * Stops the audio capturing device test.
    *
-   * This method stops the audio capturing device test. You must call this method to stop the test after calling the startRecordingDeviceTest method. Ensure that you call this method before joining a channel.
+   * This method stops the audio capturing device test. You must call this method to stop the test after calling the startRecordingDeviceTest method. Call this method before joining a channel.
    *
    * @returns
    * 0: Success.

package/ts/Private/impl/IAgoraRtcEngineImpl.ts

@@ -2071,27 +2071,6 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_muteAllRemoteAudioStreams_5039d15';
   }
 
-  setDefaultMuteAllRemoteAudioStreams(mute: boolean): number {
-    const apiType =
-      this.getApiTypeFromSetDefaultMuteAllRemoteAudioStreams(mute);
-    const jsonParams = {
-      mute: mute,
-      toJSON: () => {
-        return {
-          mute: mute,
-        };
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromSetDefaultMuteAllRemoteAudioStreams(
-    mute: boolean
-  ): string {
-    return 'RtcEngine_setDefaultMuteAllRemoteAudioStreams_5039d15';
-  }
-
   muteRemoteAudioStream(uid: number, mute: boolean): number {
     const apiType = this.getApiTypeFromMuteRemoteAudioStream(uid, mute);
     const jsonParams = {
@@ -2169,27 +2148,6 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_muteAllRemoteVideoStreams_5039d15';
   }
 
-  setDefaultMuteAllRemoteVideoStreams(mute: boolean): number {
-    const apiType =
-      this.getApiTypeFromSetDefaultMuteAllRemoteVideoStreams(mute);
-    const jsonParams = {
-      mute: mute,
-      toJSON: () => {
-        return {
-          mute: mute,
-        };
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromSetDefaultMuteAllRemoteVideoStreams(
-    mute: boolean
-  ): string {
-    return 'RtcEngine_setDefaultMuteAllRemoteVideoStreams_5039d15';
-  }
-
   setRemoteDefaultVideoStreamType(streamType: VideoStreamType): number {
     const apiType =
       this.getApiTypeFromSetRemoteDefaultVideoStreamType(streamType);

package/ts/Private/internal/RtcEngineExInternal.ts

@@ -1,7 +1,12 @@
 import { createCheckers } from 'ts-interface-checker';
 
-import { RendererManager } from '../../Renderer/RendererManager';
 import { AgoraEnv, logError, parseIntPtr2Number } from '../../Utils';
+let RendererManager: any;
+if (typeof window !== 'undefined') {
+  RendererManager = require('../../Renderer/RendererManager').RendererManager;
+} else {
+  RendererManager = undefined;
+}
 import {
   AudioEncodedFrameObserverConfig,
   ClientRoleOptions,
@@ -90,7 +95,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     if (AgoraEnv.webEnvReady) {
       // @ts-ignore
       window.AgoraEnv = AgoraEnv;
-      if (AgoraEnv.AgoraRendererManager === undefined) {
+      if (AgoraEnv.AgoraRendererManager === undefined && RendererManager) {
         AgoraEnv.AgoraRendererManager = new RendererManager();
       }
     }

package/ts/Renderer/AgoraView.ts

@@ -1,10 +1,15 @@
 import { VideoMirrorModeType, VideoViewSetupMode } from '../Private/AgoraBase';
-import { RenderModeType, VideoSourceType } from '../Private/AgoraMediaBase';
+import {
+  RenderModeType,
+  VideoModulePosition,
+  VideoSourceType,
+} from '../Private/AgoraMediaBase';
 import { AgoraEnv } from '../Utils';
 
 const VIDEO_SOURCE_TYPE_STRING = 'video-source-type';
 const UID_STRING = 'uid';
 const CHANNEL_ID_STRING = 'channel-id';
+const POSITION_STRING = 'position';
 const RENDERER_CONTENT_MODE_STRING = 'renderer-content-mode';
 const RENDERER_MIRROR_STRING = 'renderer-mirror';
 
@@ -12,6 +17,7 @@ const observedAttributes = [
   VIDEO_SOURCE_TYPE_STRING,
   UID_STRING,
   CHANNEL_ID_STRING,
+  POSITION_STRING,
   RENDERER_CONTENT_MODE_STRING,
   RENDERER_MIRROR_STRING,
 ];
@@ -19,7 +25,7 @@ const observedAttributes = [
 declare global {
   /**
    * Attributes of the Agora custom element.
-   * You can use this custom element as follows:<agora-view video-source-type="{VideoSourceType.VideoSourceCamera}" channel-id="" uid="{0}"></agora-view>
+   * You can use this custom element as follows:<agora-view video-source-type="{VideoSourceType.VideoSourceCamera}" channel-id="" uid="{0}" position="{VideoModulePosition.PositionPreRenderer}"></agora-view>
    */
   interface AgoraView {
     /**
@@ -39,6 +45,10 @@ declare global {
      * "!", "#", "$", "%", "&", "(", ")", "+", "-", ":", ";", "<", "= ", ".", ">", "?", "@", "[", "]", "^", "_", "{", "}", "|", "~", ","
      */
     'channel-id': string;
+    /**
+     * The frame position of the video observer.
+     */
+    'position': VideoModulePosition;
     /**
      * The video display mode.
      */
@@ -109,6 +119,22 @@ export default class AgoraView extends HTMLElement {
     }
   }
 
+  get position(): VideoModulePosition {
+    const number = Number(this.getAttribute(POSITION_STRING));
+    return isNaN(number)
+      ? VideoModulePosition.PositionPreEncoder |
+          VideoModulePosition.PositionPreRenderer
+      : number;
+  }
+
+  set position(val) {
+    if (val) {
+      this.setAttribute(POSITION_STRING, String(val));
+    } else {
+      this.removeAttribute(POSITION_STRING);
+    }
+  }
+
   get renderMode(): RenderModeType {
     const number = Number(
       this.getAttribute(RENDERER_CONTENT_MODE_STRING) ||
@@ -142,12 +168,14 @@ export default class AgoraView extends HTMLElement {
   }
 
   initializeRender = () => {
-    const { channelId, uid, sourceType, renderMode, renderMirror } = this;
+    const { channelId, uid, sourceType, position, renderMode, renderMirror } =
+      this;
     AgoraEnv.AgoraRendererManager?.addOrRemoveRenderer({
       sourceType,
       view: this,
       uid,
       channelId,
+      position,
       renderMode,
       mirrorMode: renderMirror
         ? VideoMirrorModeType.VideoMirrorModeEnabled
@@ -157,9 +185,10 @@ export default class AgoraView extends HTMLElement {
   };
 
   destroyRender = () => {
-    const { channelId, uid, sourceType } = this;
+    const { channelId, uid, sourceType, position } = this;
     AgoraEnv.AgoraRendererManager?.removeRendererFromCache({
       channelId,
+      position,
       uid,
       sourceType,
       view: this,

package/ts/Renderer/IRendererManager.ts

@@ -1,5 +1,9 @@
 import { VideoMirrorModeType, VideoViewSetupMode } from '../Private/AgoraBase';
-import { RenderModeType, VideoSourceType } from '../Private/AgoraMediaBase';
+import {
+  RenderModeType,
+  VideoModulePosition,
+  VideoSourceType,
+} from '../Private/AgoraMediaBase';
 import { RendererContext, RendererType } from '../Types';
 import { logDebug } from '../Utils';
 
@@ -86,6 +90,7 @@ export abstract class IRendererManager {
       sourceType,
       uid,
       channelId,
+      position,
       mediaPlayerId,
       renderMode = this.defaultRenderMode,
       mirrorMode = this.defaultMirrorMode,
@@ -114,7 +119,20 @@ export abstract class IRendererManager {
         uid = 0;
         break;
     }
-    return { ...context, sourceType, uid, channelId, renderMode, mirrorMode };
+    if (!position) {
+      position =
+        VideoModulePosition.PositionPreEncoder |
+        VideoModulePosition.PositionPreRenderer;
+    }
+    return {
+      ...context,
+      position,
+      sourceType,
+      uid,
+      channelId,
+      renderMode,
+      mirrorMode,
+    };
   }
 
   public addOrRemoveRenderer(

package/ts/Renderer/RendererCache.ts

@@ -18,7 +18,7 @@ export class RendererCache {
   private _context: RendererCacheContext;
   private _enabled: boolean;
 
-  constructor({ channelId, uid, sourceType }: RendererContext) {
+  constructor({ channelId, uid, sourceType, position }: RendererContext) {
     this._renderers = [];
     this._videoFrame = {
       yBuffer: Buffer.alloc(0),
@@ -31,7 +31,7 @@ export class RendererCache {
       vStride: 0,
       rotation: 0,
     };
-    this._context = { channelId, uid, sourceType };
+    this._context = { channelId, uid, sourceType, position };
     this._enabled = false;
   }
 

package/ts/Types.ts

@@ -55,7 +55,7 @@ export type RendererContext = VideoCanvas & RtcConnection;
 
 export type RendererCacheContext = Pick<
   RendererContext,
-  'channelId' | 'uid' | 'sourceType'
+  'channelId' | 'uid' | 'sourceType' | 'position'
 >;
 
 /**

package/types/AgoraSdk.d.ts

@@ -30,7 +30,7 @@ export declare function createAgoraRtcEngine(options?: AgoraEnvOptions): IRtcEng
 /**
  * Gets one IMediaPlayerCacheManager instance.
  *
- * When you successfully call this method, the SDK returns a media player cache manager instance. The cache manager is a singleton pattern. Therefore, multiple calls to this method returns the same instance. Make sure the IRtcEngine is initialized before you call this method.
+ * Before calling any APIs in the IMediaPlayerCacheManager class, you need to call this method to get a cache manager instance of a media player.
  *
  * @returns
  * The IMediaPlayerCacheManager instance.