root/webRtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成视频渲染

Browse Source
This commit is contained in:
stary
2026-04-25 18:34:54 +08:00
parent 261acf8bc1
commit bd3698d508
2 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
WebApp/client/public/onebyone/renderer.js
View File

@@ -159,8 +159,12 @@ class UIRenderer {
this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
this.renderUserList(state.session.localUser, state.session.remoteUser, state.participants); // 渲染用户列表
// Host端：精准更新发送者participant tile的占位背景
if (changes.participantId) {
this.renderParticipantVideoPlaceholder(changes.participantId, !state.session.remoteUser.mediaState.video);
// 只有Host端需要处理participantId对应的tile占位符（Participant端没有其他Participant的视频流）
if (changes.participantId && state.session.localUser.isHost) {
// 从participants Map中读取该participant的video状态，而非remoteUser（多Participant场景remoteUser不精确）
const pInfo = state.participants[changes.participantId];
const showPlaceholder = pInfo ? !pInfo.mediaState.video : true;
this.renderParticipantVideoPlaceholder(changes.participantId, showPlaceholder);
}
break;
case 'USER_LIST_UPDATE':

48
WebApp/client/public/onebyone/store.js
View File

@@ -559,19 +559,43 @@ class CallStateManager {
} else if (data.type === 'media-state-changed') {
// 处理媒体状态变化
console.log('收到媒体状态变化:', data.data, 'from participant:', data.participantId);
// Host端：同步更新participants中对应participant的mediaState
if (data.participantId && this.role === 'host' && this.state.participants[data.participantId]) {
this.state.participants[data.participantId].mediaState = {
...this.state.participants[data.participantId].mediaState,
...data.data
};
if (this.role === 'host') {
// Host端：按participantId同步更新participants中对应participant的mediaState
if (data.participantId && this.state.participants[data.participantId]) {
this.state.participants[data.participantId].mediaState = {
...this.state.participants[data.participantId].mediaState,
...data.data
};
}
// 更新远端媒体状态
this.updateRemoteMedia(data.data, data.participantId);
// 通知UI更新participants
this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
// Host端广播最新成员列表（含媒体状态）给所有Participant
this.broadcastParticipantsList();
} else {
// Participant端：根据消息来源更新对应条目
if (data.participantId && this.state.participants[data.participantId]) {
// 来自其他Participant的媒体状态变化：仅更新participants中对应条目
// 不调用updateRemoteMedia，因为Participant端没有其他Participant的视频流
this.state.participants[data.participantId].mediaState = {
...this.state.participants[data.participantId].mediaState,
...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
};
}
this.updateRemoteMedia(data.data, data.participantId);
this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
}
}
// 更新远端媒体状态（兼容Participant端）
this.updateRemoteMedia(data.data, data.participantId);
// 通知UI更新participants
this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
// Host端广播最新成员列表（含媒体状态）给所有Participant
this.broadcastParticipantsList();
} else if (data.type === 'user-info') {
// 处理用户信息更新
console.log('收到用户信息:', data.data, 'from participant:', data.participantId);