MediaStream API切换媒体流无法复用已保存DisplayMedia流问题

黑屏+重复弹授权的核心原因非常明确：

1. 你实现的removeVideoTracks()方法在切换到摄像头时，错误调用了屏幕共享流（DisplayMedia）轨道的track.stop()方法。MediaStreamTrack一旦调用stop就会永久进入终止状态，哪怕你保留了原screenStream的对象引用，失效的轨道也无法输出画面，赋值给video标签只会显示黑屏。
2. 切回屏幕时你重新调用navigator.mediaDevices.getDisplayMedia()，触发浏览器安全限制——只要主动调用这个API，浏览器必然弹出屏幕选择授权窗口，没有任何方法可以绕过这个交互。

核心逻辑：只要用户没有主动触发「停止屏幕共享」操作，就绝对不要终止屏幕流的轨道。切换画面时仅替换video标签的srcObject指向即可，不需要销毁暂不显示但仍需使用的流。

注意：用useRef存储MediaStream对象比useState更合适，ref的持久化引用不会随组件重渲染丢失，更适合存储媒体流这类不需要触发UI更新的对象。

第一步：定义持久化存储的引用 #

const videoRef = useRef(null);
// 持久存储屏幕共享流，仅在用户主动停止共享时才销毁
const screenStreamRef = useRef(null);
// 存储摄像头流，关闭摄像头时即时销毁
const cameraStreamRef = useRef(null);

第二步：修正摄像头切换逻辑 #

切换摄像头时，仅处理摄像头流的生命周期，完全不要操作屏幕流的轨道：

const toggleCamera = async (cameraIsOn) => {
  // 先清理已存在的摄像头流，避免摄像头后台占用
  if (cameraStreamRef.current) {
    cameraStreamRef.current.getTracks().forEach(track => track.stop());
    cameraStreamRef.current = null;
  }

  if (cameraIsOn) {
    // 开启摄像头：获取新的摄像头流，直接替换video的输入源，不要改动screenStreamRef
    const cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
    cameraStreamRef.current = cameraStream;
    videoRef.current.srcObject = cameraStream;
  } else {
    // 关闭摄像头：如果存在有效屏幕流，直接切回即可，不需要重新请求授权
    if (screenStreamRef.current) {
      videoRef.current.srcObject = screenStreamRef.current;
    } else {
      videoRef.current.srcObject = null;
    }
  }
}

第三步：修正屏幕共享启停逻辑 #

仅在用户主动停止屏幕共享时，才终止屏幕流的轨道：

const toggleScreenShare = async (screenIsOn) => {
  // 用户主动关闭屏幕共享的场景，销毁屏幕流
  if (!screenIsOn) {
    if (screenStreamRef.current) {
      screenStreamRef.current.getTracks().forEach(track => track.stop());
      screenStreamRef.current = null;
    }
    // 摄像头也没开的话清空画面
    if (!cameraStreamRef.current) videoRef.current.srcObject = null;
    return;
  }

  // 首次开启屏幕共享，请求流并持久存储
  const screenStream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true,
    audio: true // 需要共享系统音频则保留，不需要可删除
  });
  screenStreamRef.current = screenStream;

  // 监听浏览器自带的「停止共享」按钮事件，同步清理状态
  screenStream.getVideoTracks()[0].addEventListener('ended', () => {
    screenStreamRef.current = null;
    // 此处补充自定义UI状态更新逻辑，比如将屏幕共享开关设为关闭状态
    if (!cameraStreamRef.current) videoRef.current.srcObject = null;
  });

  // 当前没开摄像头的话，直接显示屏幕共享画面
  if (!cameraStreamRef.current) {
    videoRef.current.srcObject = screenStream;
  }
}

• 不要随意调用track.stop()：这个方法会直接终止媒体轨道，只有确定永远不再使用对应流的时候才能调用，临时切换画面不需要停止轨道。
• 必须监听屏幕流的ended事件：用户点击浏览器地址栏/预览栏自带的停止共享按钮时，不会触发自定义的toggle逻辑，需要单独监听同步状态，避免前后端状态不一致。
• 不需要手动做流的轨道增删操作：直接替换srcObject是性能最好、兼容性最高的切换方式，手动增删轨道容易出现轨道状态不同步的问题。

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