diff --git a/web/flat-web/src/apiMiddleware/rtc/avatar.ts b/web/flat-web/src/apiMiddleware/rtc/avatar.ts
index 8ae1b378c60..c8db257ca49 100644
--- a/web/flat-web/src/apiMiddleware/rtc/avatar.ts
+++ b/web/flat-web/src/apiMiddleware/rtc/avatar.ts
@@ -54,6 +54,7 @@ export class RtcAvatar extends EventEmitter {
         this.avatarUser = avatarUser;
         this.isLocal = userUUID === avatarUser.userUUID;
         this.rtc.addAvatar(this);
+        this.prepareRemoteTracks();
         this.observeVolumeId = window.setInterval(this.checkVolume, 500);
     }
 
@@ -66,6 +67,18 @@ export class RtcAvatar extends EventEmitter {
         return this.rtc.client!;
     }
 
+    public prepareRemoteTracks(): void {
+        this.remoteUser = this.client.remoteUsers.find(user => user.uid === this.avatarUser.rtcUID);
+        if (this.remoteUser) {
+            if (this.remoteUser.videoTrack) {
+                this.pendingSetCamera = { promise: Promise.resolve() };
+            }
+            if (this.remoteUser.audioTrack) {
+                this.pendingSetMic = { promise: Promise.resolve() };
+            }
+        }
+    }
+
     public refreshRemoteTracks(): void {
         this.remoteUser = this.client.remoteUsers.find(user => user.uid === this.avatarUser.rtcUID);
         if (!this.remoteUser) {
@@ -130,6 +143,22 @@ export class RtcAvatar extends EventEmitter {
     private isPendingCamera = false;
     private isPendingMic = false;
 
+    public onSubscribeCamera(): void {
+        if (!this.pendingSetCamera) {
+            this.pendingSetCamera = { promise: Promise.resolve() };
+        } else {
+            this.pendingSetCamera.resolve?.();
+        }
+    }
+
+    public onSubscribeMic(): void {
+        if (!this.pendingSetMic) {
+            this.pendingSetMic = { promise: Promise.resolve() };
+        } else {
+            this.pendingSetMic.resolve?.();
+        }
+    }
+
     public async setCamera(enable: boolean): Promise<void> {
         if (this.isPendingCamera) {
             return;
diff --git a/web/flat-web/src/apiMiddleware/rtc/room.ts b/web/flat-web/src/apiMiddleware/rtc/room.ts
index e73d24a86d9..360494c439a 100644
--- a/web/flat-web/src/apiMiddleware/rtc/room.ts
+++ b/web/flat-web/src/apiMiddleware/rtc/room.ts
@@ -147,22 +147,7 @@ export class RtcRoom {
         }
         console.log("[rtc] subscribe uid=%O, media=%O", user.uid, mediaType);
         await this.client?.subscribe(user, mediaType);
-        this.avatars.forEach(avatar => {
-            if (mediaType === "video") {
-                if (!avatar.pendingSetCamera) {
-                    avatar.pendingSetCamera = { promise: Promise.resolve() };
-                } else {
-                    avatar.pendingSetCamera.resolve?.();
-                }
-            }
-            if (mediaType === "audio") {
-                if (!avatar.pendingSetMic) {
-                    avatar.pendingSetMic = { promise: Promise.resolve() };
-                } else {
-                    avatar.pendingSetMic.resolve?.();
-                }
-            }
-        });
+        this.refreshAvatar(user, mediaType);
     };
 
     private onUserUnpublished = async (
@@ -184,4 +169,17 @@ export class RtcRoom {
             await this.client.renewToken(token);
         }
     };
+
+    private refreshAvatar(user: IAgoraRTCRemoteUser, mediaType: string): void {
+        this.avatars.forEach(avatar => {
+            if (avatar.avatarUser.rtcUID === user.uid) {
+                if (mediaType === "video") {
+                    avatar.onSubscribeCamera();
+                }
+                if (mediaType === "audio") {
+                    avatar.onSubscribeMic();
+                }
+            }
+        });
+    }
 }