WebRTC视频通话+屏幕共享问题：摄像头流被screenShare流替换

核心问题分析 #

当前实现中，开启屏幕共享时大概率是直接用屏幕流的视频轨道替换了PeerConnection中已有的摄像头轨道，或是本地预览仅绑定了单个播放元素，导致摄像头流被覆盖。WebRTC支持在同一个PeerConnection中传输多个MediaStream，或是在单个MediaStream中添加多轨道，我们需要调整逻辑来同时承载摄像头流与屏幕共享流。

具体修复步骤 #

1. 保留摄像头流引用，避免被覆盖 #

初始化摄像头流后，将其保存为全局变量，确保后续操作不会丢失该流的引用：

let cameraStream; // 全局保存摄像头流

// 初始化摄像头的函数（比如initUserMedia）
async function initUserMedia() {
  cameraStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  localVideo.srcObject = cameraStream;
  // 将摄像头流的所有轨道添加到PeerConnection
  cameraStream.getTracks().forEach(track => peerConnection.addTrack(track, cameraStream));
}

2. 开启屏幕共享时新增独立流，单独添加到PeerConnection #

修改屏幕共享触发逻辑，不替换原有轨道，而是创建新的屏幕流并添加到PeerConnection：

async function handleScreenShare() {
  const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
  // 将屏幕流添加到PeerConnection
  screenStream.getTracks().forEach(track => peerConnection.addTrack(track, screenStream));
  
  // 本地预览屏幕流（需新增对应video元素，比如id为localScreen）
  const localScreen = document.getElementById('localScreen');
  localScreen.srcObject = screenStream;
  
  // 监听屏幕共享结束事件，及时移除对应轨道
  screenStream.getVideoTracks()[0].onended = () => {
    const targetSender = peerConnection.getSenders().find(sender => sender.track === screenStream.getVideoTracks()[0]);
    if (targetSender) peerConnection.removeTrack(targetSender);
    localScreen.srcObject = null;
  };
}

3. 接收端区分流类型，分别渲染 #

在ontrack事件中，通过轨道标签或流属性区分摄像头流与屏幕流，渲染到不同的播放元素：

peerConnection.ontrack = (event) => {
  const stream = event.streams[0];
  // 通过轨道标签判断是否为屏幕流（不同浏览器标签可能有差异，可灵活调整）
  const isScreenStream = stream.getVideoTracks()[0].label.includes('screen');
  
  if (isScreenStream) {
    const remoteScreen = document.getElementById('remoteScreen');
    remoteScreen.srcObject = stream;
  } else {
    const remoteVideo = document.getElementById('remoteVideo');
    remoteVideo.srcObject = stream;
  }
};

4. 补充HTML播放元素 #

页面中需要添加对应数量的video元素，分别承载本地/远程的摄像头与屏幕流：

<!-- 本地预览区域 -->
<video id="localVideo" autoplay muted playsinline></video>
<video id="localScreen" autoplay muted playsinline></video>

<!-- 远程视频区域 -->
<video id="remoteVideo" autoplay playsinline></video>
<video id="remoteScreen" autoplay playsinline></video>

5. 删除轨道替换逻辑 #

检查代码中是否存在replaceTrack调用，若有则删除该逻辑，避免用屏幕轨道覆盖摄像头轨道。

关键注意事项 #

• 建议将摄像头流与屏幕流设为独立的MediaStream，便于后续区分和管理。
• 屏幕共享结束后必须及时从PeerConnection中移除对应轨道，避免资源占用。
• 不同浏览器对屏幕流轨道的标签命名可能不同，接收端区分流时可结合轨道kind属性，或通过自定义数据通道传递流类型标识。

内容的提问来源于stack exchange，提问作者Sanjay Sharma