React中摄像头关闭后组件跳转同步问题求助

你当前的问题是调用track.stop()后立即执行跳转，导致硬件层面的摄像头指示灯还未完全关闭就切换了组件。要实现等摄像头彻底关闭后再跳转，可以通过监听媒体轨道的ended事件，确认所有轨道都停止后再执行导航操作。

具体实现方案 #

把关闭摄像头的逻辑包装成Promise，等待所有轨道的ended事件触发后再调用navigate：

const closeCameraAndNavigate = async () => {
  const video = document.getElementById("modelvideo");
  if (!video?.srcObject) {
    // 无活跃流时直接跳转
    navigate('/newcomponent');
    return;
  }

  const stream = video.srcObject;
  const tracks = stream.getTracks();

  // 等待所有轨道完全停止
  await Promise.all(tracks.map(track => {
    return new Promise(resolve => {
      track.addEventListener('ended', resolve, { once: true });
      track.stop();
    });
  }));

  // 清理video对象
  video.srcObject = null;
  // 确认摄像头关闭后再跳转
  navigate('/newcomponent');
};

关键说明 #

• 用Promise.all监听所有媒体轨道的ended事件，确保每个轨道都真正停止后才执行后续操作
• 增加空值判断，避免video元素或srcObject不存在时触发报错
• { once: true }确保事件监听只执行一次，防止内存泄漏

组件卸载时的额外处理 #

如果是组件销毁（比如用户返回、路由自动切换）时需要关闭摄像头，建议在useEffect的清理函数中做相同逻辑，避免跳转前未执行关闭操作：

useEffect(() => {
  return () => {
    const video = document.getElementById("modelvideo");
    if (video?.srcObject) {
      const stream = video.srcObject;
      stream.getTracks().forEach(track => track.stop());
      video.srcObject = null;
    }
  };
}, []);

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