diff --git a/example/src/renderer/components/BaseComponent.tsx b/example/src/renderer/components/BaseComponent.tsx
index fe644f18e..4d0f925cb 100644
--- a/example/src/renderer/components/BaseComponent.tsx
+++ b/example/src/renderer/components/BaseComponent.tsx
@@ -226,7 +226,7 @@ export abstract class BaseComponent<
           {enableVideo ? (
             <>
               <AgoraText>Click view to mirror</AgoraText>
-              <RtcSurfaceView canvas={{ uid }} connection={{ channelId }} />
+              <RtcSurfaceView canvas={{ uid }} />
             </>
           ) : undefined}
         </Card>
diff --git a/example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx b/example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx
index e79344085..2f0ee595e 100644
--- a/example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx
+++ b/example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx
@@ -453,7 +453,6 @@ export default class LocalVideoTranscoder
               uid,
               sourceType,
             }}
-            connection={{ channelId }}
           />
         </Card>
       </List.Item>
@@ -473,7 +472,6 @@ export default class LocalVideoTranscoder
                 uid: 0,
                 sourceType: this._getVideoSourceTypeCamera(value),
               }}
-              connection={{ channelId }}
             />
           );
         })}
diff --git a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
index 1a4337e33..0ad6fef02 100644
--- a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
+++ b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
@@ -191,14 +191,12 @@ export default class JoinChannelVideo
   }
 
   protected renderVideo(uid: number): ReactNode {
-    const { channelId, enableVideo, remoteUsers } = this.state;
+    const { enableVideo, remoteUsers } = this.state;
     return (
       <List.Item>
         <Card title={`${uid === 0 ? 'Local' : 'Remote'} Uid: ${uid}`}>
           <AgoraText>Click view to mirror</AgoraText>
-          {enableVideo ? (
-            <RtcSurfaceView canvas={{ uid }} connection={{ channelId }} />
-          ) : undefined}
+          {enableVideo ? <RtcSurfaceView canvas={{ uid }} /> : undefined}
           <AgoraButton
             title={`Append`}
             onPress={() => {
diff --git a/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx
index c82d1c504..3f7b8778a 100644
--- a/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx
+++ b/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx
@@ -288,9 +288,7 @@ export default function JoinChannelVideo() {
       <List.Item>
         <Card title={`${uid === 0 ? 'Local' : 'Remote'} Uid: ${uid}`}>
           <AgoraText>Click view to mirror</AgoraText>
-          {enableVideo ? (
-            <RtcSurfaceView canvas={{ uid }} connection={{ channelId }} />
-          ) : undefined}
+          {enableVideo ? <RtcSurfaceView canvas={{ uid }} /> : undefined}
           <AgoraButton
             title={`Append`}
             onPress={() => {
diff --git a/ts/Private/internal/RtcEngineExInternal.ts b/ts/Private/internal/RtcEngineExInternal.ts
index 21b3cf8cf..cfd26b66f 100644
--- a/ts/Private/internal/RtcEngineExInternal.ts
+++ b/ts/Private/internal/RtcEngineExInternal.ts
@@ -346,6 +346,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     uid: number,
     options: ChannelMediaOptions
   ): string {
+    AgoraEnv.defaultChannelId = channelId;
     return 'RtcEngine_joinChannel2';
   }
 
@@ -439,6 +440,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     userAccount: string,
     options?: ChannelMediaOptions
   ): string {
+    AgoraEnv.defaultChannelId = channelId;
     return options === undefined
       ? 'RtcEngine_joinChannelWithUserAccount'
       : 'RtcEngine_joinChannelWithUserAccount2';
@@ -579,7 +581,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     return (
       AgoraEnv.AgoraRendererManager?.setupRemoteVideo({
         videoSourceType: sourceType,
-        channelId: '',
+        channelId: AgoraEnv.defaultChannelId,
         uid,
         view,
         rendererOptions: {
diff --git a/ts/Renderer/RendererManager.ts b/ts/Renderer/RendererManager.ts
index 7e200a569..e1e441552 100644
--- a/ts/Renderer/RendererManager.ts
+++ b/ts/Renderer/RendererManager.ts
@@ -1,14 +1,14 @@
-import { VideoSourceType } from '../Private/AgoraBase';
+import { ErrorCodeType, VideoSourceType } from '../Private/AgoraBase';
 import { RenderModeType } from '../Private/AgoraMediaBase';
 import {
   AgoraElectronBridge,
   Channel,
   ChannelIdMap,
   FormatRendererVideoConfig,
+  RENDER_MODE,
   RenderConfig,
   RendererVideoConfig,
   RenderMap,
-  RENDER_MODE,
   ShareVideoFrame,
   UidMap,
   VideoFrameCacheConfig,
@@ -119,7 +119,7 @@ class RendererManager {
 
     if (!rendererConfig.view) {
       logError('setRenderOptionByView: view not exist');
-      return -1;
+      return -ErrorCodeType.ErrInvalidArgument;
     }
 
     const renderList = this.getRenderers({ uid, channelId, videoSourceType });
@@ -132,7 +132,7 @@ class RendererManager {
       : logWarn(
           `RenderStreamType: ${videoSourceType} channelId:${channelId} uid:${uid} have no render view, you need to call this api after setView`
         );
-    return 0;
+    return ErrorCodeType.ErrOk;
   }
 
   public checkWebglEnv(): boolean {
@@ -171,7 +171,7 @@ class RendererManager {
         channelId,
         uid
       );
-      return -1;
+      return -ErrorCodeType.ErrInvalidArgument;
     }
 
     // ensure a render to RenderMap
@@ -189,30 +189,27 @@ class RendererManager {
 
     // enable render
     this.enableRender(true);
-    return 0;
+    return ErrorCodeType.ErrOk;
   }
 
   public setupLocalVideo(rendererConfig: RendererVideoConfig): number {
     const { videoSourceType } = rendererConfig;
     if (videoSourceType === VideoSourceType.VideoSourceRemote) {
       logError('setupLocalVideo videoSourceType error', videoSourceType);
-      return -1;
+      return -ErrorCodeType.ErrInvalidArgument;
     }
     this.setupVideo({ ...rendererConfig });
-    return 0;
+    return ErrorCodeType.ErrOk;
   }
 
   public setupRemoteVideo(rendererConfig: RendererVideoConfig): number {
     const { videoSourceType } = rendererConfig;
     if (videoSourceType !== VideoSourceType.VideoSourceRemote) {
       logError('setupRemoteVideo videoSourceType error', videoSourceType);
-      return -1;
+      return -ErrorCodeType.ErrInvalidArgument;
     }
-    this.setupVideo({
-      ...rendererConfig,
-      videoSourceType: VideoSourceType.VideoSourceRemote,
-    });
-    return 0;
+    this.setupVideo({ ...rendererConfig });
+    return ErrorCodeType.ErrOk;
   }
 
   public destroyRendererByView(view: Element): void {
diff --git a/ts/Types.ts b/ts/Types.ts
index a2ed56b6b..20ad1b8c3 100644
--- a/ts/Types.ts
+++ b/ts/Types.ts
@@ -23,6 +23,10 @@ export interface AgoraEnvType {
    * @ignore
    */
   AgoraRendererManager?: RendererManager;
+  /**
+   * @ignore
+   */
+  defaultChannelId?: string;
 }
 
 /**