diff --git a/client/public/onebyone/index.html b/client/public/onebyone/index.html index e92815b..a0fc777 100644 --- a/client/public/onebyone/index.html +++ b/client/public/onebyone/index.html @@ -169,7 +169,7 @@
+ 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 }); }