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-06 15:15:01 +08:00
parent f416db6375
commit bcf3520111
2 changed files with 135 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -234,39 +234,80 @@ class UIRenderer {
// 渲染远程视频流
renderRemoteStream(stream) {
if (this.elements.remoteVideo && stream) {
this.elements.remoteVideo.srcObject = stream;
this.elements.remoteVideo.autoplay = true;
console.log('Rendering remote stream:', stream);
// 关键设置：启用硬件加速和最佳质量渲染
this.elements.remoteVideo.style.transform = 'translateZ(0)'; // 启用硬件加速
this.elements.remoteVideo.style.imageRendering = 'pixelated'; // 保持像素清晰
this.elements.remoteVideo.style.objectFit = 'contain'; // 保持比例
console.log('Remote stream set successfully:', this.elements.remoteVideo.srcObject);
// 即使流对象相同，也要重新设置，确保视频元素能够识别轨道变化
this.elements.remoteVideo.srcObject = null;
// 隐藏断开连接覆盖层
if (this.elements.disconnectedOverlay) {
this.elements.disconnectedOverlay.classList.add('hidden');
}
// 延迟设置srcObject，确保视频元素能够正确处理
setTimeout(() => {
this.elements.remoteVideo.srcObject = stream;
console.log('Remote stream reset successfully:', stream);
// 隐藏占位背景
if (this.elements.remoteVideoPlaceholder) {
this.elements.remoteVideoPlaceholder.classList.add('hidden');
}
// 获取视频轨道并处理分辨率
const videoTracks = stream.getVideoTracks();
if (videoTracks.length > 0) {
const resolution = this.getVideoResolution(videoTracks[0]);
this.adjustVideoSize(this.elements.remoteVideo, resolution);
// 确保视频元素的属性正确设置
this.elements.remoteVideo.autoplay = true;
this.elements.remoteVideo.playsinline = true;
this.elements.remoteVideo.muted = true;
// 监听轨道变化，处理分辨率调整
videoTracks[0].addEventListener('resize', () => {
const newResolution = this.getVideoResolution(videoTracks[0]);
this.adjustVideoSize(this.elements.remoteVideo, newResolution);
// 关键设置：启用硬件加速和最佳质量渲染
this.elements.remoteVideo.style.transform = 'translateZ(0)'; // 启用硬件加速
this.elements.remoteVideo.style.imageRendering = 'pixelated'; // 保持像素清晰
this.elements.remoteVideo.style.objectFit = 'contain'; // 保持比例
// 隐藏断开连接覆盖层
if (this.elements.disconnectedOverlay) {
this.elements.disconnectedOverlay.classList.add('hidden');
}
// 隐藏占位背景
if (this.elements.remoteVideoPlaceholder) {
this.elements.remoteVideoPlaceholder.classList.add('hidden');
}
// 获取视频轨道并处理分辨率
const videoTracks = stream.getVideoTracks();
console.log('Remote video tracks:', videoTracks);
// 检查是否有有效的视频轨道
const hasValidVideoTrack = videoTracks.length > 0 && videoTracks.some(track => {
// 检查轨道是否已停止或被禁用
return track.readyState === 'live';
});
}
console.log('Has valid video track:', hasValidVideoTrack);
if (hasValidVideoTrack) {
console.log('Found valid video tracks, updating resolution');
const activeVideoTrack = videoTracks.find(track => track.readyState === 'live');
if (activeVideoTrack) {
const resolution = this.getVideoResolution(activeVideoTrack);
this.adjustVideoSize(this.elements.remoteVideo, resolution);
// 监听轨道变化，处理分辨率调整
activeVideoTrack.addEventListener('resize', () => {
const newResolution = this.getVideoResolution(activeVideoTrack);
this.adjustVideoSize(this.elements.remoteVideo, newResolution);
});
}
} else {
console.log('No valid video tracks in remote stream');
// 清空视频元素的源
this.elements.remoteVideo.srcObject = null;
// 显示占位背景
if (this.elements.remoteVideoPlaceholder) {
this.elements.remoteVideoPlaceholder.classList.remove('hidden');
}
}
}, 50); // 增加延迟时间，确保视频元素有足够的时间处理
} else {
console.error('Either remoteVideo element or stream is missing');
// 清空视频元素的源
if (this.elements.remoteVideo) {
this.elements.remoteVideo.srcObject = null;
}
// 显示占位背景
if (this.elements.remoteVideoPlaceholder) {
this.elements.remoteVideoPlaceholder.classList.remove('hidden');