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

【m】状态同步

Browse Source
This commit is contained in:
zhangzheng
2026-03-12 17:53:34 +08:00
parent 7b92f69d6a
commit 4ce99ae140
5 changed files with 93 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,8 @@ class UIRenderer {
callDuration: document.getElementById('callDuration'),
encryptionBadge: document.getElementById('encryptionBadge'),
unreadBadge: document.getElementById('unreadBadge'),
remoteNetworkIndicator: document.getElementById('remoteNetworkIndicator'),
remoteNetworkQuality: document.getElementById('remoteNetworkQuality'),
// 远端视频
remoteVideo: document.getElementById('remoteVideo'),
@@ -255,10 +257,9 @@ class UIRenderer {
// 渲染header中的网络状态
renderHeaderNetworkStatus(networkQuality) {
const networkQualityElement = document.getElementById('remoteNetworkQuality');
if (networkQualityElement) {
const textElement = networkQualityElement.querySelector('span');
const iconElement = networkQualityElement.querySelector('i');
if (this.elements.remoteNetworkQuality) {
const textElement = this.elements.remoteNetworkQuality.querySelector('span');
const iconElement = this.elements.remoteNetworkQuality.querySelector('i');
if (textElement && iconElement) {
let qualityText = '未知';
@@ -350,10 +351,7 @@ class UIRenderer {
this.elements.disconnectedOverlay.classList.add('hidden');
}
// 隐藏占位背景
if (this.elements.remoteVideoPlaceholder) {
this.elements.remoteVideoPlaceholder.classList.add('hidden');
}
// 获取视频轨道并处理分辨率
const videoTracks = stream.getVideoTracks();
@@ -380,6 +378,15 @@ class UIRenderer {
this.adjustVideoSize(this.elements.remoteVideo, newResolution);
});
}
// 隐藏连接中提示
if (this.elements.connectingOverlay) {
this.elements.connectingOverlay.classList.add('hidden');
}
// 隐藏占位背景
if (this.elements.remoteVideoPlaceholder) {
this.elements.remoteVideoPlaceholder.classList.add('hidden');
}
} else {
console.log('No valid video tracks in remote stream');
// 清空视频元素的源
@@ -507,8 +514,14 @@ class UIRenderer {
const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
if (remoteStatusIndicator) {
if (remoteUser.status === 'online') {
remoteStatusIndicator.classList.remove('hidden');
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
// 根据网络质量设置状态指示器颜色
if (remoteUser.networkQuality === 'no_signal') {
remoteStatusIndicator.classList.remove('hidden');
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-gray-500 rounded-full border-2 border-slate-900';
} else {
remoteStatusIndicator.classList.remove('hidden');
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
}
} else {
remoteStatusIndicator.classList.add('hidden');
}
@@ -726,6 +739,11 @@ class UIRenderer {
networkStatusText.textContent = this.getNetworkQualityText(quality);
networkStatusText.className = 'text-red-500';
break;
case 'no_signal':
icon.className = 'fas fa-times-circle text-gray-500';
networkStatusText.textContent = this.getNetworkQualityText(quality);
networkStatusText.className = 'text-gray-500';
break;
default:
icon.className = 'fas fa-question-circle text-gray-400';
networkStatusText.textContent = '未知';
@@ -754,6 +772,9 @@ class UIRenderer {
case 'poor':
statusClass = 'text-red-500';
break;
case 'no_signal':
statusClass = 'text-gray-500';
break;
default:
statusClass = 'text-gray-400';
}
@@ -762,8 +783,26 @@ class UIRenderer {
this.elements.connectionQuality.textContent = `连接质量: ${qualityText}`;
this.elements.connectionQuality.className = `text-xs ${statusClass}`;
}
// 同步更新头部网络指示器
this.updateHeaderNetworkIndicator(quality);
}
// 更新头部网络指示器
updateHeaderNetworkIndicator(networkQuality) {
if (!this.elements.remoteNetworkIndicator) return;
// 根据网络质量设置指示器颜色
if (networkQuality === 'no_signal') {
// 无信号时显示灰色点，取消动画
this.elements.remoteNetworkIndicator.className = 'w-2 h-2 bg-gray-500 rounded-full';
} else {
// 有信号时显示绿色点，保持动画
this.elements.remoteNetworkIndicator.className = 'w-2 h-2 bg-green-500 rounded-full animate-pulse';
}
}
// 渲染通话结束
renderCallEnded() {
console.log('Call ended');
@@ -787,7 +826,8 @@ class UIRenderer {
'excellent': '优秀',
'good': '良好',
'fair': '一般',
'poor': '较差'
'poor': '较差',
'no_signal': '无信号'
};
return qualityMap[quality] || quality;
}