root/video_socket-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视频没有占位符修复

Browse Source
This commit is contained in:
stary
2026-05-16 20:11:36 +08:00
parent 53166b648f
commit d7264b9102
3 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/public/onebyone/index.html
View File

@@ -169,7 +169,7 @@
<!-- 远端未连接时的占位背景 -->
<div id="remoteVideoPlaceholder"
class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80">
class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900 to-purple-900 z-10">
<div class="text-center">
<div
class="w-32 h-32 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-4">

9
client/public/onebyone/renderer.js
View File

@@ -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');

21
client/public/onebyone/store.js
View File

@@ -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 });
}