diff --git a/ts/Private/internal/RtcEngineExInternal.ts b/ts/Private/internal/RtcEngineExInternal.ts
index 46d632379..8777dff45 100644
--- a/ts/Private/internal/RtcEngineExInternal.ts
+++ b/ts/Private/internal/RtcEngineExInternal.ts
@@ -66,6 +66,7 @@ import { MusicContentCenterInternal } from './MusicContentCenterInternal';
 
 import { callIrisApi, DeviceEventEmitter, EVENT_TYPE } from './IrisApiEngine';
 import { EmitterSubscription } from './emitter/EventEmitter';
+import { RendererManager } from '../../Renderer/RendererManager';
 
 const checkers = createCheckers(
   AgoraBaseTI,
@@ -105,7 +106,8 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
   >();
 
   initialize(context: RtcEngineContext): number {
-    AgoraEnv.AgoraRendererManager?.enableRender();
+    AgoraEnv.AgoraRendererManager = new RendererManager();
+    AgoraEnv.AgoraRendererManager.enableRender();
     const ret = super.initialize(context);
     callIrisApi.call(this, 'RtcEngine_setAppType', {
       appType: 3,
@@ -115,6 +117,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
 
   release(sync: boolean = false) {
     AgoraEnv.AgoraRendererManager?.enableRender(false);
+    AgoraEnv.AgoraRendererManager = undefined;
     this._audio_device_manager.release();
     this._video_device_manager.release();
     this._media_engine.release();
diff --git a/ts/Renderer/AgoraView.ts b/ts/Renderer/AgoraView.ts
index 8db9f5fa7..ff58b7c99 100644
--- a/ts/Renderer/AgoraView.ts
+++ b/ts/Renderer/AgoraView.ts
@@ -1,6 +1,6 @@
 import { VideoSourceType } from '../Private/AgoraBase';
 import { RenderModeType } from '../Private/AgoraMediaBase';
-import AgoraRendererManager from './RendererManager';
+import { AgoraEnv } from '../Utils';
 
 const VIDEO_SOURCE_TYPE_STRING = 'video-source-type';
 const UID_STRING = 'uid';
@@ -95,6 +95,7 @@ export default class AgoraView extends HTMLElement {
       this.removeAttribute(UID_STRING);
     }
   }
+
   get channelId(): string {
     return this.getAttribute(CHANNEL_ID_STRING) || '';
   }
@@ -122,6 +123,7 @@ export default class AgoraView extends HTMLElement {
       this.removeAttribute(RENDERER_CONTENT_MODE_STRING);
     }
   }
+
   get renderMirror(): boolean {
     return this.getAttribute(RENDERER_MIRROR_STRING) === 'true';
   }
@@ -137,9 +139,10 @@ export default class AgoraView extends HTMLElement {
   constructor() {
     super();
   }
+
   initializeRender = () => {
-    AgoraRendererManager.destroyRendererByView(this);
-    AgoraRendererManager.setupVideo({
+    AgoraEnv.AgoraRendererManager?.destroyRendererByView(this);
+    AgoraEnv.AgoraRendererManager?.setupVideo({
       videoSourceType: this.videoSourceType,
       view: this,
       uid: this.uid,
@@ -150,8 +153,9 @@ export default class AgoraView extends HTMLElement {
       },
     });
   };
+
   destroyRender = () => {
-    AgoraRendererManager.destroyRendererByView(this);
+    AgoraEnv.AgoraRendererManager?.destroyRendererByView(this);
   };
 
   connectedCallback() {
@@ -169,7 +173,7 @@ export default class AgoraView extends HTMLElement {
     ].includes(attrName);
 
     if (isSetRenderOption) {
-      AgoraRendererManager.setRenderOption(
+      AgoraEnv.AgoraRendererManager?.setRenderOption(
         this,
         this.renderContentMode,
         this.renderMirror
@@ -182,6 +186,7 @@ export default class AgoraView extends HTMLElement {
     }
     this.initializeRender();
   }
+
   disconnectedCallback() {
     this.isConnectedCallback = false;
     this.destroyRender();
diff --git a/ts/Renderer/RendererManager.ts b/ts/Renderer/RendererManager.ts
index 4719e86a0..4df54389d 100644
--- a/ts/Renderer/RendererManager.ts
+++ b/ts/Renderer/RendererManager.ts
@@ -29,7 +29,7 @@ import { YUVCanvasRenderer } from './YUVCanvasRenderer';
 /**
  * @ignore
  */
-class RendererManager {
+export class RendererManager {
   /**
    * @ignore
    */
@@ -89,7 +89,7 @@ class RendererManager {
   /**
    * @ignore
    */
-  setFPS(fps: number) {
+  public setFPS(fps: number) {
     this.renderFps = fps;
     this.restartRender();
   }
@@ -139,7 +139,7 @@ class RendererManager {
 
   public checkWebglEnv(): boolean {
     let gl;
-    const canvas = document.createElement('canvas');
+    let canvas: HTMLCanvasElement = document.createElement('canvas');
 
     try {
       gl =
@@ -150,11 +150,7 @@ class RendererManager {
       return false;
     }
 
-    if (gl) {
-      return true;
-    } else {
-      return false;
-    }
+    return !!gl;
   }
 
   public setupVideo(rendererVideoConfig: RendererVideoConfig): number {
@@ -165,11 +161,7 @@ class RendererManager {
 
     if (!formatConfig.view) {
       logWarn('setupVideo->destroyRenderersByConfig, because of view is null');
-      AgoraRendererManager.destroyRenderersByConfig(
-        videoSourceType,
-        channelId,
-        uid
-      );
+      this.destroyRenderersByConfig(videoSourceType, channelId, uid);
       return -ErrorCodeType.ErrInvalidArgument;
     }
 
@@ -551,10 +543,3 @@ class RendererManager {
         );
   }
 }
-
-const AgoraRendererManager = new RendererManager();
-
-AgoraEnv.AgoraRendererManager = AgoraRendererManager;
-
-export default AgoraRendererManager;
-export { RendererManager };