+ class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900 to-purple-900 z-10">
diff --git a/client/public/onebyone/renderer.js b/client/public/onebyone/renderer.js
index 5cf1b76..9ff7af8 100644
--- a/client/public/onebyone/renderer.js
+++ b/client/public/onebyone/renderer.js
@@ -290,6 +290,15 @@ class UIRenderer {
const shouldShowPlaceholder = !remoteUser.mediaState.video;
toggleElement(this.elements.remoteVideoPlaceholder, shouldShowPlaceholder);
+ // 当远程视频关闭时,隐藏视频元素本身,避免冻结画面透过占位符
+ if (this.elements.remoteVideo) {
+ if (shouldShowPlaceholder) {
+ this.elements.remoteVideo.style.opacity = '0';
+ } else {
+ this.elements.remoteVideo.style.opacity = '1';
+ }
+ }
+
// 更新占位符文本内容
if (shouldShowPlaceholder) {
const placeholderContent = this.elements.remoteVideoPlaceholder.querySelector('.text-center');
diff --git a/client/public/onebyone/store.js b/client/public/onebyone/store.js
index b5d6978..371c2be 100644
--- a/client/public/onebyone/store.js
+++ b/client/public/onebyone/store.js
@@ -653,7 +653,11 @@ class CallStateManager {
this.broadcastParticipantsList();
} else {
// Participant端:根据消息来源更新对应条目
- if (data.participantId && this.state.participants[data.participantId]) {
+ // Host的participantId在participants-sync中也会同步,所以不能仅靠participants中有无该key判断
+ // 自身发出的消息回声(participantId === selfParticipantId)可以忽略
+ // 来自其他Participant:participantId存在且在participants中,且不是自身
+ // 来自Host:participantId存在但不是自身(Host不在selfParticipantId中)
+ if (data.participantId && data.participantId !== this.selfParticipantId && this.state.participants[data.participantId]) {
// 来自其他Participant的媒体状态变化:仅更新participants中对应条目
// 不调用updateRemoteMedia,因为Participant端没有其他Participant的视频流
this.state.participants[data.participantId].mediaState = {
@@ -661,15 +665,12 @@ class CallStateManager {
...data.data
};
this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
- } else if (!data.participantId) {
- // 来自Host的媒体状态变化(无participantId):
- // 更新participants中Host条目 + 更新remoteUser(Host的视频流是本端远端画面)
- if (this.state.participants['host']) {
- this.state.participants['host'].mediaState = {
- ...this.state.participants['host'].mediaState,
- ...data.data
- };
- }
+ } else if (data.participantId === this.selfParticipantId) {
+ // 自身消息回声,忽略
+ } else {
+ // 来自Host的媒体状态变化(Host的participantId不匹配participants中任何条目,或无participantId):
+ // 更新remoteUser(Host的视频流是本端远端画面)
+ console.log('Received media-state-changed from Host, updating remoteUser:', data.data);
this.updateRemoteMedia(data.data, data.participantId);
this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
}