agora-electron-sdk 4.2.6 → 4.3.0-dev.1

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

@@ -28,7 +28,7 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onFirstLocalVideoFramePublished": t.opt(t.func("void", t.param("source", "VideoSourceType"), t.param("elapsed", "number"))),
   "onFirstRemoteVideoDecoded": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("width", "number"), t.param("height", "number"), t.param("elapsed", "number"))),
   "onVideoSizeChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("sourceType", "VideoSourceType"), t.param("uid", "number"), t.param("width", "number"), t.param("height", "number"), t.param("rotation", "number"))),
-  "onLocalVideoStateChanged": t.opt(t.func("void", t.param("source", "VideoSourceType"), t.param("state", "LocalVideoStreamState"), t.param("error", "LocalVideoStreamError"))),
+  "onLocalVideoStateChanged": t.opt(t.func("void", t.param("source", "VideoSourceType"), t.param("state", "LocalVideoStreamState"), t.param("reason", "LocalVideoStreamReason"))),
   "onRemoteVideoStateChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("state", "RemoteVideoState"), t.param("reason", "RemoteVideoStateReason"), t.param("elapsed", "number"))),
   "onFirstRemoteVideoFrame": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("width", "number"), t.param("height", "number"), t.param("elapsed", "number"))),
   "onUserJoined": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("elapsed", "number"))),
@@ -38,8 +38,8 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onUserEnableVideo": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("enabled", "boolean"))),
   "onUserStateChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("state", "number"))),
   "onUserEnableLocalVideo": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("enabled", "boolean"))),
-  "onLocalAudioStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("stats", "LocalAudioStats"))),
   "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"))),
   "onRemoteVideoStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("stats", "RemoteVideoStats"))),
   "onCameraReady": t.opt(t.func("void")),
@@ -48,7 +48,7 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onFacePositionChanged": t.opt(t.func("void", t.param("imageWidth", "number"), t.param("imageHeight", "number"), t.param("vecRectangle", t.array("Rectangle")), t.param("vecDistance", t.array("number")), t.param("numFaces", "number"))),
   "onVideoStopped": t.opt(t.func("void")),
   "onAudioMixingStateChanged": t.opt(t.func("void", t.param("state", "AudioMixingStateType"), t.param("reason", "AudioMixingReasonType"))),
-  "onRhythmPlayerStateChanged": t.opt(t.func("void", t.param("state", "RhythmPlayerStateType"), t.param("errorCode", "RhythmPlayerErrorType"))),
+  "onRhythmPlayerStateChanged": t.opt(t.func("void", t.param("state", "RhythmPlayerStateType"), t.param("reason", "RhythmPlayerReason"))),
   "onConnectionLost": t.opt(t.func("void", t.param("connection", "RtcConnection"))),
   "onConnectionInterrupted": t.opt(t.func("void", t.param("connection", "RtcConnection"))),
   "onConnectionBanned": t.opt(t.func("void", t.param("connection", "RtcConnection"))),
@@ -58,9 +58,9 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onTokenPrivilegeWillExpire": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("token", "string"))),
   "onLicenseValidationFailure": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("reason", "LicenseErrorType"))),
   "onFirstLocalAudioFramePublished": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("elapsed", "number"))),
-  "onFirstRemoteAudioFrame": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("userId", "number"), t.param("elapsed", "number"))),
   "onFirstRemoteAudioDecoded": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("uid", "number"), t.param("elapsed", "number"))),
-  "onLocalAudioStateChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("state", "LocalAudioStreamState"), t.param("error", "LocalAudioStreamError"))),
+  "onFirstRemoteAudioFrame": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("userId", "number"), t.param("elapsed", "number"))),
+  "onLocalAudioStateChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("state", "LocalAudioStreamState"), t.param("reason", "LocalAudioStreamReason"))),
   "onRemoteAudioStateChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("state", "RemoteAudioState"), t.param("reason", "RemoteAudioStateReason"), t.param("elapsed", "number"))),
   "onActiveSpeaker": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("uid", "number"))),
   "onContentInspectResult": t.opt(t.func("void", t.param("result", "ContentInspectResult"))),
@@ -68,12 +68,11 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onClientRoleChanged": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("oldRole", "ClientRoleType"), t.param("newRole", "ClientRoleType"), t.param("newRoleOptions", "ClientRoleOptions"))),
   "onClientRoleChangeFailed": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("reason", "ClientRoleChangeFailedReason"), t.param("currentRole", "ClientRoleType"))),
   "onAudioDeviceVolumeChanged": t.opt(t.func("void", t.param("deviceType", "MediaDeviceType"), t.param("volume", "number"), t.param("muted", "boolean"))),
-  "onRtmpStreamingStateChanged": t.opt(t.func("void", t.param("url", "string"), t.param("state", "RtmpStreamPublishState"), t.param("errCode", "RtmpStreamPublishErrorType"))),
+  "onRtmpStreamingStateChanged": t.opt(t.func("void", t.param("url", "string"), t.param("state", "RtmpStreamPublishState"), t.param("reason", "RtmpStreamPublishReason"))),
   "onRtmpStreamingEvent": t.opt(t.func("void", t.param("url", "string"), t.param("eventCode", "RtmpStreamingEvent"))),
   "onTranscodingUpdated": t.opt(t.func("void")),
   "onAudioRoutingChanged": t.opt(t.func("void", t.param("routing", "number"))),
   "onChannelMediaRelayStateChanged": t.opt(t.func("void", t.param("state", "ChannelMediaRelayState"), t.param("code", "ChannelMediaRelayError"))),
-  "onChannelMediaRelayEvent": t.opt(t.func("void", t.param("code", "ChannelMediaRelayEvent"))),
   "onLocalPublishFallbackToAudioOnly": t.opt(t.func("void", t.param("isFallbackOrRecover", "boolean"))),
   "onRemoteSubscribeFallbackToAudioOnly": t.opt(t.func("void", t.param("uid", "number"), t.param("isFallbackOrRecover", "boolean"))),
   "onRemoteAudioTransportStats": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("delay", "number"), t.param("lost", "number"), t.param("rxKBitRate", "number"))),
@@ -86,18 +85,20 @@ export const IRtcEngineEventHandler = t.iface([], {
   "onPermissionError": t.opt(t.func("void", t.param("permissionType", "PermissionType"))),
   "onLocalUserRegistered": t.opt(t.func("void", t.param("uid", "number"), t.param("userAccount", "string"))),
   "onUserInfoUpdated": t.opt(t.func("void", t.param("uid", "number"), t.param("info", "UserInfo"))),
+  "onUserAccountUpdated": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("remoteUserAccount", "string"))),
+  "onVideoRenderingTracingResult": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("uid", "number"), t.param("currentEvent", "MediaTraceEvent"), t.param("tracingInfo", "VideoRenderingTracingInfo"))),
+  "onLocalVideoTranscoderError": t.opt(t.func("void", t.param("stream", "TranscodingVideoStream"), t.param("error", "VideoTranscoderError"))),
   "onUploadLogResult": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("requestId", "string"), t.param("success", "boolean"), t.param("reason", "UploadErrorReason"))),
   "onAudioSubscribeStateChanged": t.opt(t.func("void", t.param("channel", "string"), t.param("uid", "number"), t.param("oldState", "StreamSubscribeState"), t.param("newState", "StreamSubscribeState"), t.param("elapseSinceLastState", "number"))),
   "onVideoSubscribeStateChanged": t.opt(t.func("void", t.param("channel", "string"), t.param("uid", "number"), t.param("oldState", "StreamSubscribeState"), t.param("newState", "StreamSubscribeState"), t.param("elapseSinceLastState", "number"))),
   "onAudioPublishStateChanged": t.opt(t.func("void", t.param("channel", "string"), t.param("oldState", "StreamPublishState"), t.param("newState", "StreamPublishState"), t.param("elapseSinceLastState", "number"))),
   "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")))),
   "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"))),
-  "onUserAccountUpdated": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("remoteUid", "number"), t.param("userAccount", "string"))),
-  "onLocalVideoTranscoderError": t.opt(t.func("void", t.param("stream", "TranscodingVideoStream"), t.param("error", "VideoTranscoderError"))),
-  "onVideoRenderingTracingResult": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("uid", "number"), t.param("currentEvent", "MediaTraceEvent"), t.param("tracingInfo", "VideoRenderingTracingInfo"))),
+  "onSetRtmFlagResult": t.opt(t.func("void", t.param("connection", "RtcConnection"), t.param("code", "number"))),
 });
 
 export const IMetadataObserver = t.iface([], {
@@ -105,7 +106,7 @@ export const IMetadataObserver = t.iface([], {
 });
 
 export const IDirectCdnStreamingEventHandler = t.iface([], {
-  "onDirectCdnStreamingStateChanged": t.opt(t.func("void", t.param("state", "DirectCdnStreamingState"), t.param("error", "DirectCdnStreamingError"), t.param("message", "string"))),
+  "onDirectCdnStreamingStateChanged": t.opt(t.func("void", t.param("state", "DirectCdnStreamingState"), t.param("reason", "DirectCdnStreamingReason"), t.param("message", "string"))),
   "onDirectCdnStreamingStats": t.opt(t.func("void", t.param("stats", "DirectCdnStreamingStats"))),
 });
 

package/ts/Renderer/AgoraView.ts

@@ -1,3 +1,4 @@
+import { VideoMirrorModeType, VideoViewSetupMode } from '../Private/AgoraBase';
 import { RenderModeType, VideoSourceType } from '../Private/AgoraMediaBase';
 import { AgoraEnv } from '../Utils';
 
@@ -70,12 +71,12 @@ export default class AgoraView extends HTMLElement {
     return observedAttributes;
   }
 
-  get videoSourceType(): VideoSourceType {
+  get sourceType(): VideoSourceType {
     const number = Number(this.getAttribute(VIDEO_SOURCE_TYPE_STRING));
     return isNaN(number) ? 0 : number;
   }
 
-  set videoSourceType(val) {
+  set sourceType(val) {
     if (val) {
       this.setAttribute(VIDEO_SOURCE_TYPE_STRING, String(val));
     } else {
@@ -108,7 +109,7 @@ export default class AgoraView extends HTMLElement {
     }
   }
 
-  get renderContentMode(): RenderModeType {
+  get renderMode(): RenderModeType {
     const number = Number(
       this.getAttribute(RENDERER_CONTENT_MODE_STRING) ||
         RenderModeType.RenderModeFit
@@ -116,7 +117,7 @@ export default class AgoraView extends HTMLElement {
     return isNaN(number) ? RenderModeType.RenderModeFit : number;
   }
 
-  set renderContentMode(val) {
+  set renderMode(val) {
     if (val) {
       this.setAttribute(RENDERER_CONTENT_MODE_STRING, String(val));
     } else {
@@ -141,21 +142,28 @@ export default class AgoraView extends HTMLElement {
   }
 
   initializeRender = () => {
-    AgoraEnv.AgoraRendererManager?.destroyRendererByView(this);
-    AgoraEnv.AgoraRendererManager?.setupVideo({
-      videoSourceType: this.videoSourceType,
+    const { channelId, uid, sourceType, renderMode, renderMirror } = this;
+    AgoraEnv.AgoraRendererManager?.addOrRemoveRenderer({
+      sourceType,
       view: this,
-      uid: this.uid,
-      channelId: this.channelId,
-      rendererOptions: {
-        mirror: this.renderMirror,
-        contentMode: this.renderContentMode,
-      },
+      uid,
+      channelId,
+      renderMode,
+      mirrorMode: renderMirror
+        ? VideoMirrorModeType.VideoMirrorModeEnabled
+        : VideoMirrorModeType.VideoMirrorModeDisabled,
+      setupMode: VideoViewSetupMode.VideoViewSetupReplace,
     });
   };
 
   destroyRender = () => {
-    AgoraEnv.AgoraRendererManager?.destroyRendererByView(this);
+    const { channelId, uid, sourceType } = this;
+    AgoraEnv.AgoraRendererManager?.removeRendererFromCache({
+      channelId,
+      uid,
+      sourceType,
+      view: this,
+    });
   };
 
   connectedCallback() {
@@ -173,11 +181,13 @@ export default class AgoraView extends HTMLElement {
     ].includes(attrName);
 
     if (isSetRenderOption) {
-      AgoraEnv.AgoraRendererManager?.setRenderOption(
-        this,
-        this.renderContentMode,
-        this.renderMirror
-      );
+      AgoraEnv.AgoraRendererManager?.setRendererContext({
+        view: this,
+        renderMode: this.renderMode,
+        mirrorMode: this.renderMirror
+          ? VideoMirrorModeType.VideoMirrorModeEnabled
+          : VideoMirrorModeType.VideoMirrorModeDisabled,
+      });
       return;
     }
     const isNeedReInitialize = observedAttributes.includes(attrName);

package/ts/Renderer/IRenderer.ts

@@ -1,19 +1,14 @@
-import { RenderModeType } from '../Private/AgoraMediaBase';
-import { RendererOptions, ShareVideoFrame } from '../Types';
+import { VideoMirrorModeType } from '../Private/AgoraBase';
+import { RenderModeType, VideoFrame } from '../Private/AgoraMediaBase';
+import { RendererContext } from '../Types';
+
+type Context = Pick<RendererContext, 'renderMode' | 'mirrorMode'>;
 
 export abstract class IRenderer {
   parentElement?: HTMLElement;
   container?: HTMLElement;
   canvas?: HTMLCanvasElement;
-  contentMode = RenderModeType.RenderModeHidden;
-  mirror?: boolean;
-
-  public snapshot(fileType = 'image/png') {
-    if (this.canvas && this.canvas.toDataURL) {
-      return this.canvas.toDataURL(fileType);
-    }
-    return null;
-  }
+  _context: Context = {};
 
   public bind(element: HTMLElement) {
     this.parentElement = element;
@@ -47,22 +42,76 @@ export abstract class IRenderer {
     this.parentElement = undefined;
   }
 
-  public equalsElement(element: Element): boolean {
-    if (!this.parentElement) {
-      console.error('parentElement is null');
+  public abstract drawFrame(videoFrame: VideoFrame): void;
+
+  public set context({ renderMode, mirrorMode }: Context) {
+    if (this.context.renderMode !== renderMode) {
+      this.context.renderMode = renderMode;
+      this.updateRenderMode();
+    }
+
+    if (this.context.mirrorMode !== mirrorMode) {
+      this.context.mirrorMode = mirrorMode;
+      this.updateMirrorMode();
     }
-    return element === this.parentElement;
   }
 
-  abstract drawFrame(imageData: ShareVideoFrame): void;
+  public get context(): Context {
+    return this._context;
+  }
+
+  protected updateRenderMode() {
+    if (!this.canvas || !this.container) return;
+
+    const { clientWidth, clientHeight } = this.container;
+    const { width, height } = this.canvas;
 
-  public setRenderOption({ contentMode, mirror }: RendererOptions) {
-    this.contentMode = contentMode ?? RenderModeType.RenderModeFit;
-    this.mirror = mirror;
-    Object.assign(this.parentElement!.style, {
-      transform: mirror ? 'rotateY(180deg)' : '',
+    const containerAspectRatio = clientWidth / clientHeight;
+    const canvasAspectRatio = width / height;
+    const widthScale = clientWidth / width;
+    const heightScale = clientHeight / height;
+
+    const isHidden =
+      this.context?.renderMode === RenderModeType.RenderModeHidden;
+
+    let scale = 1;
+    // If container's aspect ratio is larger than canvas's aspect ratio
+    if (containerAspectRatio > canvasAspectRatio) {
+      // Scale canvas to fit container's width on hidden mode
+      // Scale canvas to fit container's height on fit mode
+      scale = isHidden ? widthScale : heightScale;
+    } else {
+      // Scale canvas to fit container's height on hidden mode
+      // Scale canvas to fit container's width on fit mode
+      scale = isHidden ? heightScale : widthScale;
+    }
+    this.canvas.style.transform = `scale(${scale})`;
+  }
+
+  protected updateMirrorMode(): void {
+    if (!this.parentElement) return;
+
+    Object.assign(this.parentElement.style, {
+      transform:
+        this.context.mirrorMode === VideoMirrorModeType.VideoMirrorModeEnabled
+          ? 'rotateY(180deg)'
+          : '',
     });
   }
 
-  abstract refreshCanvas(): void;
+  protected rotateCanvas({ width, height, rotation }: VideoFrame): void {
+    if (!this.canvas) return;
+
+    if (rotation === 0 || rotation === 180) {
+      this.canvas.width = width!;
+      this.canvas.height = height!;
+    } else if (rotation === 90 || rotation === 270) {
+      this.canvas.height = width!;
+      this.canvas.width = height!;
+    } else {
+      throw new Error(
+        `Invalid rotation: ${rotation}, only 0, 90, 180, 270 are supported`
+      );
+    }
+  }
 }

package/ts/Renderer/IRendererManager.ts

@@ -1,35 +1,289 @@
+import { VideoMirrorModeType, VideoViewSetupMode } from '../Private/AgoraBase';
 import { RenderModeType, VideoSourceType } from '../Private/AgoraMediaBase';
-import { Channel, RendererVideoConfig } from '../Types';
+import { RendererContext, RendererType } from '../Types';
+import { logDebug } from '../Utils';
+
+import { IRenderer } from './IRenderer';
+import { RendererCache, generateRendererCacheKey } from './RendererCache';
 
 /**
  * @ignore
  */
 export abstract class IRendererManager {
-  abstract get defaultRenderConfig(): RendererVideoConfig;
+  /**
+   * @ignore
+   */
+  private _renderingFps: number;
+  /**
+   * @ignore
+   */
+  private _currentFrameCount: number;
+  /**
+   * @ignore
+   */
+  private _previousFirstFrameTime: number;
+  /**
+   * @ignore
+   */
+  private _renderingTimer?: number;
+  /**
+   * @ignore
+   */
+  private _rendererCaches: RendererCache[];
+  /**
+   * @ignore
+   */
+  private _context: RendererContext;
+
+  constructor() {
+    this._renderingFps = 15;
+    this._currentFrameCount = 0;
+    this._previousFirstFrameTime = 0;
+    this._rendererCaches = [];
+    this._context = {
+      renderMode: RenderModeType.RenderModeHidden,
+      mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
+    };
+  }
+
+  public set renderingFps(fps: number) {
+    if (this._renderingFps !== fps) {
+      this._renderingFps = fps;
+      if (this._renderingTimer) {
+        this.stopRendering();
+        this.startRendering();
+      }
+    }
+  }
+
+  public get renderingFps(): number {
+    return this._renderingFps;
+  }
+
+  public set defaultChannelId(channelId: string) {
+    this._context.channelId = channelId;
+  }
+
+  public get defaultChannelId(): string {
+    return this._context.channelId ?? '';
+  }
+
+  public get defaultRenderMode(): RenderModeType {
+    return this._context.renderMode!;
+  }
+
+  public get defaultMirrorMode(): VideoMirrorModeType {
+    return this._context.mirrorMode!;
+  }
+
+  public release(): void {
+    this.stopRendering();
+    this.clearRendererCache();
+  }
+
+  private precheckRendererContext(context: RendererContext): RendererContext {
+    let {
+      sourceType,
+      uid,
+      channelId,
+      mediaPlayerId,
+      renderMode = this.defaultRenderMode,
+      mirrorMode = this.defaultMirrorMode,
+    } = context;
+    switch (sourceType) {
+      case VideoSourceType.VideoSourceRemote:
+        if (uid === undefined) {
+          throw new Error('uid is required');
+        }
+        channelId = channelId ?? this.defaultChannelId;
+        break;
+      case VideoSourceType.VideoSourceMediaPlayer:
+        if (mediaPlayerId === undefined) {
+          throw new Error('mediaPlayerId is required');
+        }
+        channelId = '';
+        uid = mediaPlayerId;
+        break;
+      case undefined:
+        if (uid) {
+          sourceType = VideoSourceType.VideoSourceRemote;
+        }
+        break;
+      default:
+        channelId = '';
+        uid = 0;
+        break;
+    }
+    return { ...context, sourceType, uid, channelId, renderMode, mirrorMode };
+  }
+
+  public addOrRemoveRenderer(
+    context: RendererContext
+  ): RendererCache | undefined {
+    // To be compatible with the old API
+    let { setupMode = VideoViewSetupMode.VideoViewSetupAdd } = context;
+    if (!context.view) setupMode = VideoViewSetupMode.VideoViewSetupRemove;
+    switch (setupMode) {
+      case VideoViewSetupMode.VideoViewSetupAdd:
+        return this.addRendererToCache(context);
+      case VideoViewSetupMode.VideoViewSetupRemove:
+        this.removeRendererFromCache(context);
+        return undefined;
+      case VideoViewSetupMode.VideoViewSetupReplace:
+        this.removeRendererFromCache(context);
+        return this.addRendererToCache(context);
+    }
+  }
+
+  private addRendererToCache(
+    context: RendererContext
+  ): RendererCache | undefined {
+    const checkedContext = this.precheckRendererContext(context);
+
+    if (!checkedContext.view) return undefined;
+
+    if (this.findRenderer(checkedContext.view)) {
+      throw new Error('You have already added this view to the renderer');
+    }
+
+    let rendererCache = this.getRendererCache(checkedContext);
+    if (!rendererCache) {
+      rendererCache = new RendererCache(checkedContext);
+      this._rendererCaches.push(rendererCache);
+    }
+    rendererCache.addRenderer(this.createRenderer(checkedContext));
+    this.startRendering();
+    return rendererCache;
+  }
+
+  public removeRendererFromCache(context: RendererContext): void {
+    const checkedContext = this.precheckRendererContext(context);
+
+    const rendererCache = this.getRendererCache(checkedContext);
+    if (!rendererCache) return;
+    if (checkedContext.view) {
+      const renderer = rendererCache.findRenderer(checkedContext.view);
+      if (!renderer) return;
+      rendererCache.removeRenderer(renderer);
+    } else {
+      rendererCache.removeRenderer();
+    }
+    if (rendererCache.renderers.length === 0) {
+      this._rendererCaches.splice(
+        this._rendererCaches.indexOf(rendererCache),
+        1
+      );
+    }
+  }
+
+  public clearRendererCache(): void {
+    for (const rendererCache of this._rendererCaches) {
+      rendererCache.removeRenderer();
+    }
+    this._rendererCaches.splice(0);
+  }
+
+  public getRendererCache(context: RendererContext): RendererCache | undefined {
+    return this._rendererCaches.find(
+      (cache) => cache.key === generateRendererCacheKey(context)
+    );
+  }
+
+  public getRenderers(context: RendererContext): IRenderer[] {
+    return this.getRendererCache(context)?.renderers || [];
+  }
+
+  public findRenderer(view: Element): IRenderer | undefined {
+    for (const rendererCache of this._rendererCaches) {
+      const renderer = rendererCache.findRenderer(view);
+      if (renderer) return renderer;
+    }
+    return undefined;
+  }
+
+  protected abstract createRenderer(
+    context: RendererContext,
+    rendererType?: RendererType
+  ): IRenderer;
+
+  public startRendering(): void {
+    if (this._renderingTimer) return;
+
+    const renderingLooper = () => {
+      if (this._previousFirstFrameTime === 0) {
+        // Get the current time as the time of the first frame of per second
+        this._previousFirstFrameTime = performance.now();
+        // Reset the frame count
+        this._currentFrameCount = 0;
+      }
+
+      // Increase the frame count
+      ++this._currentFrameCount;
 
-  abstract enableRender(enabled?: boolean): void;
+      // Get the current time
+      const currentFrameTime = performance.now();
+      // Calculate the time difference between the current frame and the previous frame
+      const deltaTime = currentFrameTime - this._previousFirstFrameTime;
+      // Calculate the expected time of the current frame
+      const expectedTime =
+        (this._currentFrameCount * 1000) / this._renderingFps;
+      logDebug(
+        new Date().toLocaleTimeString(),
+        'currentFrameCount',
+        this._currentFrameCount,
+        'expectedTime',
+        expectedTime,
+        'deltaTime',
+        deltaTime
+      );
 
-  abstract clear(): void;
+      if (this._rendererCaches.length === 0) {
+        // If there is no renderer, stop rendering
+        this.stopRendering();
+        return;
+      }
 
-  abstract setupVideo(rendererVideoConfig: RendererVideoConfig): number;
+      // Render all renderers
+      for (const rendererCache of this._rendererCaches) {
+        this.doRendering(rendererCache);
+      }
 
-  abstract setupLocalVideo(rendererConfig: RendererVideoConfig): number;
+      if (this._currentFrameCount >= this.renderingFps) {
+        this._previousFirstFrameTime = 0;
+      }
 
-  abstract setupRemoteVideo(rendererConfig: RendererVideoConfig): number;
+      if (deltaTime < expectedTime) {
+        // If the time difference between the current frame and the previous frame is less than the expected time, then wait for the difference
+        this._renderingTimer = window.setTimeout(
+          renderingLooper,
+          expectedTime - deltaTime
+        );
+      } else {
+        // If the time difference between the current frame and the previous frame is greater than the expected time, then render immediately
+        renderingLooper();
+      }
+    };
+    renderingLooper();
+  }
 
-  abstract setRenderOptionByConfig(rendererConfig: RendererVideoConfig): number;
+  public abstract doRendering(rendererCache: RendererCache): void;
 
-  abstract destroyRendererByView(view: Element): void;
+  public stopRendering(): void {
+    if (this._renderingTimer) {
+      window.clearTimeout(this._renderingTimer);
+      this._renderingTimer = undefined;
+    }
+  }
 
-  abstract destroyRenderersByConfig(
-    videoSourceType: VideoSourceType,
-    channelId?: Channel,
-    uid?: number
-  ): void;
+  public setRendererContext(context: RendererContext): boolean {
+    const checkedContext = this.precheckRendererContext(context);
 
-  abstract setRenderOption(
-    view: HTMLElement,
-    contentMode?: RenderModeType,
-    mirror?: boolean
-  ): void;
+    for (const rendererCache of this._rendererCaches) {
+      const result = rendererCache.setRendererContext(checkedContext);
+      if (result) {
+        return true;
+      }
+    }
+    return false;
+  }
 }