agora-electron-sdk 4.3.2 → 4.4.0-dev.2

package/ts/Private/impl/IAgoraRtcEngineImpl.ts

@@ -20,6 +20,9 @@ import {
   EarMonitoringFilterType,
   EchoTestConfiguration,
   EncryptionConfig,
+  FaceShapeArea,
+  FaceShapeAreaOptions,
+  FaceShapeBeautyOptions,
   FocalLengthInfo,
   HeadphoneEqualizerPreset,
   IAudioEncodedFrameObserver,
@@ -35,6 +38,7 @@ import {
   ScreenScenarioType,
   SegmentationProperty,
   SenderOptions,
+  SimulcastConfig,
   SimulcastStreamConfig,
   SimulcastStreamMode,
   SpatialAudioParams,
@@ -51,6 +55,7 @@ import {
   VideoStreamType,
   VideoSubscriptionOptions,
   VirtualBackgroundSource,
+  VoiceAiTunerType,
   VoiceBeautifierPreset,
   VoiceConversionPreset,
   WatermarkOptions,
@@ -416,7 +421,7 @@ export function processIRtcEngineEventHandler(
 
     case 'onLocalVideoStats':
       if (handler.onLocalVideoStats !== undefined) {
-        handler.onLocalVideoStats(jsonParams.source, jsonParams.stats);
+        handler.onLocalVideoStats(jsonParams.connection, jsonParams.stats);
       }
       break;
 
@@ -910,34 +915,32 @@ export function processIRtcEngineEventHandler(
       }
       break;
 
-    case 'onExtensionEvent':
-      if (handler.onExtensionEvent !== undefined) {
-        handler.onExtensionEvent(
-          jsonParams.provider,
-          jsonParams.extension,
+    case 'onExtensionEventWithContext':
+      if (handler.onExtensionEventWithContext !== undefined) {
+        handler.onExtensionEventWithContext(
+          jsonParams.context,
           jsonParams.key,
           jsonParams.value
         );
       }
       break;
 
-    case 'onExtensionStarted':
-      if (handler.onExtensionStarted !== undefined) {
-        handler.onExtensionStarted(jsonParams.provider, jsonParams.extension);
+    case 'onExtensionStartedWithContext':
+      if (handler.onExtensionStartedWithContext !== undefined) {
+        handler.onExtensionStartedWithContext(jsonParams.context);
       }
       break;
 
-    case 'onExtensionStopped':
-      if (handler.onExtensionStopped !== undefined) {
-        handler.onExtensionStopped(jsonParams.provider, jsonParams.extension);
+    case 'onExtensionStoppedWithContext':
+      if (handler.onExtensionStoppedWithContext !== undefined) {
+        handler.onExtensionStoppedWithContext(jsonParams.context);
       }
       break;
 
-    case 'onExtensionError':
-      if (handler.onExtensionError !== undefined) {
-        handler.onExtensionError(
-          jsonParams.provider,
-          jsonParams.extension,
+    case 'onExtensionErrorWithContext':
+      if (handler.onExtensionErrorWithContext !== undefined) {
+        handler.onExtensionErrorWithContext(
+          jsonParams.context,
           jsonParams.error,
           jsonParams.message
         );
@@ -1619,6 +1622,116 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_setBeautyEffectOptions_e7635d1';
   }
 
+  setFaceShapeBeautyOptions(
+    enabled: boolean,
+    options: FaceShapeBeautyOptions,
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): number {
+    const apiType = this.getApiTypeFromSetFaceShapeBeautyOptions(
+      enabled,
+      options,
+      type
+    );
+    const jsonParams = {
+      enabled: enabled,
+      options: options,
+      type: type,
+      toJSON: () => {
+        return {
+          enabled: enabled,
+          options: options,
+          type: type,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromSetFaceShapeBeautyOptions(
+    enabled: boolean,
+    options: FaceShapeBeautyOptions,
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): string {
+    return 'RtcEngine_setFaceShapeBeautyOptions_a862ce7';
+  }
+
+  setFaceShapeAreaOptions(
+    options: FaceShapeAreaOptions,
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): number {
+    const apiType = this.getApiTypeFromSetFaceShapeAreaOptions(options, type);
+    const jsonParams = {
+      options: options,
+      type: type,
+      toJSON: () => {
+        return {
+          options: options,
+          type: type,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromSetFaceShapeAreaOptions(
+    options: FaceShapeAreaOptions,
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): string {
+    return 'RtcEngine_setFaceShapeAreaOptions_2e242a3';
+  }
+
+  getFaceShapeBeautyOptions(
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): FaceShapeBeautyOptions {
+    const apiType = this.getApiTypeFromGetFaceShapeBeautyOptions(type);
+    const jsonParams = {
+      type: type,
+      toJSON: () => {
+        return {
+          type: type,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    const options = jsonResults.options;
+    return options;
+  }
+
+  protected getApiTypeFromGetFaceShapeBeautyOptions(
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): string {
+    return 'RtcEngine_getFaceShapeBeautyOptions_8382895';
+  }
+
+  getFaceShapeAreaOptions(
+    shapeArea: FaceShapeArea,
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): FaceShapeAreaOptions {
+    const apiType = this.getApiTypeFromGetFaceShapeAreaOptions(shapeArea, type);
+    const jsonParams = {
+      shapeArea: shapeArea,
+      type: type,
+      toJSON: () => {
+        return {
+          shapeArea: shapeArea,
+          type: type,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    const options = jsonResults.options;
+    return options;
+  }
+
+  protected getApiTypeFromGetFaceShapeAreaOptions(
+    shapeArea: FaceShapeArea,
+    type: MediaSourceType = MediaSourceType.PrimaryCameraSource
+  ): string {
+    return 'RtcEngine_getFaceShapeAreaOptions_0783e2c';
+  }
+
   setLowlightEnhanceOptions(
     enabled: boolean,
     options: LowlightEnhanceOptions,
@@ -1958,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 = {
@@ -2056,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);
@@ -3488,6 +3559,29 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_setHeadphoneEQParameters_4e92b3c';
   }
 
+  enableVoiceAITuner(enabled: boolean, type: VoiceAiTunerType): number {
+    const apiType = this.getApiTypeFromEnableVoiceAITuner(enabled, type);
+    const jsonParams = {
+      enabled: enabled,
+      type: type,
+      toJSON: () => {
+        return {
+          enabled: enabled,
+          type: type,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromEnableVoiceAITuner(
+    enabled: boolean,
+    type: VoiceAiTunerType
+  ): string {
+    return 'RtcEngine_enableVoiceAITuner_28f5d5b';
+  }
+
   setLogFile(filePath: string): number {
     const apiType = this.getApiTypeFromSetLogFile(filePath);
     const jsonParams = {
@@ -3730,6 +3824,26 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_setDualStreamMode_b3a4f6c';
   }
 
+  setSimulcastConfig(simulcastConfig: SimulcastConfig): number {
+    const apiType = this.getApiTypeFromSetSimulcastConfig(simulcastConfig);
+    const jsonParams = {
+      simulcastConfig: simulcastConfig,
+      toJSON: () => {
+        return {
+          simulcastConfig: simulcastConfig,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromSetSimulcastConfig(
+    simulcastConfig: SimulcastConfig
+  ): string {
+    return 'RtcEngine_setSimulcastConfig_3dcdfd7';
+  }
+
   enableCustomAudioLocalPlayback(trackId: number, enabled: boolean): number {
     const apiType = this.getApiTypeFromEnableCustomAudioLocalPlayback(
       trackId,
@@ -5686,42 +5800,6 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_setRemoteUserPriority_f34115b';
   }
 
-  setEncryptionMode(encryptionMode: string): number {
-    const apiType = this.getApiTypeFromSetEncryptionMode(encryptionMode);
-    const jsonParams = {
-      encryptionMode: encryptionMode,
-      toJSON: () => {
-        return {
-          encryptionMode: encryptionMode,
-        };
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromSetEncryptionMode(encryptionMode: string): string {
-    return 'RtcEngine_setEncryptionMode_3a2037f';
-  }
-
-  setEncryptionSecret(secret: string): number {
-    const apiType = this.getApiTypeFromSetEncryptionSecret(secret);
-    const jsonParams = {
-      secret: secret,
-      toJSON: () => {
-        return {
-          secret: secret,
-        };
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromSetEncryptionSecret(secret: string): string {
-    return 'RtcEngine_setEncryptionSecret_3a2037f';
-  }
-
   enableEncryption(enabled: boolean, config: EncryptionConfig): number {
     const apiType = this.getApiTypeFromEnableEncryption(enabled, config);
     const jsonParams = {
@@ -6884,7 +6962,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromGetAudioDeviceManager(): string {
-    return 'RtcEngine_queryInterface_257d192';
+    return 'RtcEngine_getAudioDeviceManager';
   }
 
   getVideoDeviceManager(): IVideoDeviceManager {
@@ -6895,7 +6973,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromGetVideoDeviceManager(): string {
-    return 'RtcEngine_queryInterface_257d192';
+    return 'RtcEngine_getVideoDeviceManager';
   }
 
   getMusicContentCenter(): IMusicContentCenter {
@@ -6906,7 +6984,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromGetMusicContentCenter(): string {
-    return 'RtcEngine_queryInterface_257d192';
+    return 'RtcEngine_getMusicContentCenter';
   }
 
   getMediaEngine(): IMediaEngine {
@@ -6917,7 +6995,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromGetMediaEngine(): string {
-    return 'RtcEngine_queryInterface_257d192';
+    return 'RtcEngine_getMediaEngine';
   }
 
   getLocalSpatialAudioEngine(): ILocalSpatialAudioEngine {
@@ -6928,7 +7006,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromGetLocalSpatialAudioEngine(): string {
-    return 'RtcEngine_queryInterface_257d192';
+    return 'RtcEngine_getLocalSpatialAudioEngine';
   }
 
   getH265Transcoder(): IH265Transcoder {
@@ -6939,7 +7017,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromGetH265Transcoder(): string {
-    return 'RtcEngine_queryInterface_257d192';
+    return 'RtcEngine_getH265Transcoder';
   }
 
   sendMetaData(metadata: Metadata, sourceType: VideoSourceType): number {
@@ -6997,7 +7075,7 @@ export class IRtcEngineImpl implements IRtcEngine {
   }
 
   protected getApiTypeFromDestroyRendererByView(view: any): string {
-    return 'RtcEngine_destroyRendererByView';
+    return 'RtcEngine_destroyRendererByView_a55f55f';
   }
 
   destroyRendererByConfig(
@@ -7030,7 +7108,7 @@ export class IRtcEngineImpl implements IRtcEngine {
     channelId?: string,
     uid: number = 0
   ): string {
-    return 'RtcEngine_destroyRendererByConfig';
+    return 'RtcEngine_destroyRendererByConfig_542c2ae';
   }
 
   unregisterAudioEncodedFrameObserver(

package/ts/Private/internal/IrisApiEngine.ts

@@ -1,5 +1,6 @@
 import EventEmitter from 'eventemitter3';
-import JSON from 'json-bigint';
+import JSONBigInt from 'json-bigint';
+const JSON = JSONBigInt({ storeAsString: true });
 
 import { AgoraEnv, logDebug, logError, logInfo, logWarn } from '../../Utils';
 import { IAudioEncodedFrameObserver } from '../AgoraBase';
@@ -339,12 +340,7 @@ export const EVENT_PROCESSORS: EventProcessors = {
           break;
       }
     },
-    handlers: (event: string, data: any) => {
-      if (event === 'onLocalVideoStats' && 'connection' in data) {
-        return undefined;
-      }
-      return RtcEngineExInternal._event_handlers;
-    },
+    handlers: (event: string, data: any) => RtcEngineExInternal._event_handlers,
   },
   IMusicContentCenterEventHandler: {
     suffix: 'MusicContentCenterEventHandler_',

package/ts/Private/internal/MediaEngineInternal.ts

@@ -109,7 +109,6 @@ export class MediaEngineInternal extends IMediaEngineImpl {
     MediaEngineInternal._video_encoded_frame_observers = [];
     MediaEngineInternal._face_info_observers = [];
     this.removeAllListeners();
-    super.release();
   }
 
   _addListenerPreCheck<EventType extends keyof IMediaEngineEvent>(

package/ts/Private/internal/RtcEngineExInternal.ts

@@ -1,6 +1,12 @@
 import { createCheckers } from 'ts-interface-checker';
 
-import { AgoraEnv, logError } from '../../Utils';
+import { AgoraEnv, logError, parseIntPtr2Number } from '../../Utils';
+let RendererManager: any;
+if (typeof window !== 'undefined') {
+  RendererManager = require('../../Renderer/RendererManager').RendererManager;
+} else {
+  RendererManager = undefined;
+}
 import {
   AudioEncodedFrameObserverConfig,
   ClientRoleOptions,
@@ -89,8 +95,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     if (AgoraEnv.webEnvReady) {
       // @ts-ignore
       window.AgoraEnv = AgoraEnv;
-      if (AgoraEnv.AgoraRendererManager === undefined) {
-        const { RendererManager } = require('../../Renderer/RendererManager');
+      if (AgoraEnv.AgoraRendererManager === undefined && RendererManager) {
         AgoraEnv.AgoraRendererManager = new RendererManager();
       }
     }
@@ -105,8 +110,6 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     AgoraEnv.AgoraElectronBridge.ReleaseRenderer();
     AgoraEnv.AgoraRendererManager?.release();
     AgoraEnv.AgoraRendererManager = undefined;
-    this._audio_device_manager.release();
-    this._video_device_manager.release();
     this._media_engine.release();
     this._local_spatial_audio_engine.release();
     RtcEngineExInternal._event_handlers = [];
@@ -419,6 +422,11 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     return this._h265_transcoder;
   }
 
+  override getNativeHandle(): number {
+    let result = super.getNativeHandle();
+    return parseIntPtr2Number(result);
+  }
+
   override registerAudioEncodedFrameObserver(
     config: AudioEncodedFrameObserverConfig,
     observer: IAudioEncodedFrameObserver
@@ -507,6 +515,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
             value.iconImage.length!
           );
         }
+        value.sourceDisplayId = parseIntPtr2Number(value.sourceDisplayId);
         return value;
       }
     );

package/ts/Private/ti/IAgoraRtcEngine-ti.ts

@@ -40,7 +40,7 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onUserEnableLocalVideo": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("enabled", "boolean"))),
   "onRemoteAudioStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("stats", "RemoteAudioStats"))),
   "onLocalAudioStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("stats", "LocalAudioStats"))),
-  "onLocalVideoStats": t.opt(t.func("void", t.param("source", "VideoSourceType"), t.param("stats", "LocalVideoStats"))),
+  "onLocalVideoStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("stats", "LocalVideoStats"))),
   "onRemoteVideoStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("stats", "RemoteVideoStats"))),
   "onCameraReady": t.opt(t.func("void")),
   "onCameraFocusAreaChanged": t.opt(t.func("void", t.param("x", "number"), t.param("y", "number"), t.param("width", "number"), t.param("height", "number"))),
@@ -95,10 +95,10 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onVideoPublishStateChanged": t.opt(t.func("void", t.param("source", "VideoSourceType"), t.param("channel", "string"), t.param("oldState", "StreamPublishState"), t.param("newState", "StreamPublishState"), t.param("elapseSinceLastState", "number"))),
   "onTranscodedStreamLayoutInfo": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("uid", "number"), t.param("width", "number"), t.param("height", "number"), t.param("layoutCount", "number"), t.param("layoutlist", t.array("VideoLayout")))),
   "onAudioMetadataReceived": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("uid", "number"), t.param("metadata", "string"), t.param("length", "number"))),
-  "onExtensionEvent": t.opt(t.func("void", t.param("provider", "string"), t.param("extension", "string"), t.param("key", "string"), t.param("value", "string"))),
-  "onExtensionStarted": t.opt(t.func("void", t.param("provider", "string"), t.param("extension", "string"))),
-  "onExtensionStopped": t.opt(t.func("void", t.param("provider", "string"), t.param("extension", "string"))),
-  "onExtensionError": t.opt(t.func("void", t.param("provider", "string"), t.param("extension", "string"), t.param("error", "number"), t.param("message", "string"))),
+  "onExtensionEventWithContext": t.opt(t.func("void", t.param("context", "ExtensionContext"), t.param("key", "string"), t.param("value", "string"))),
+  "onExtensionStartedWithContext": t.opt(t.func("void", t.param("context", "ExtensionContext"))),
+  "onExtensionStoppedWithContext": t.opt(t.func("void", t.param("context", "ExtensionContext"))),
+  "onExtensionErrorWithContext": t.opt(t.func("void", t.param("context", "ExtensionContext"), t.param("error", "number"), t.param("message", "string"))),
   "onSetRtmFlagResult": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("code", "number"))),
 });
 

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/IRenderer.ts

@@ -45,8 +45,7 @@ export abstract class IRenderer {
 
   public drawFrame(_videoFrame?: VideoFrame): void {
     if (!this.canvas) return;
-    //@ts-ignore
-    if (!this.canvas.checkVisibility()) {
+    if (this.canvas.style.display !== '') {
       this.canvas.style.display = '';
     }
   }