React/NextJS使用useRef切换webcam视频失效如何解决？

根因分析 #

• 组件卸载未释放媒体资源：WebcamVideo组件被隐藏时会直接卸载，但之前申请的MediaStream音视频轨道仍处于活跃状态，持续占用摄像头设备，导致二次挂载时媒体流申请/绑定异常
• 流绑定逻辑覆盖不全：现有useEffect仅在mediaStream变化时触发绑定逻辑，组件重新挂载后生成的新video实例，无法自动和已缓存的媒体流完成绑定
• 自动播放兼容缺失：部分浏览器环境下video标签的autoPlay属性无法自动触发播放，需手动调用play方法兜底

修复后的WebcamVideo组件代码 #

import { useRef, useState, useEffect } from 'react'

export default function WebcamVideo() {
  const [mediaStream, setMediaStream] = useState<MediaStream>()
  const videoRef = useRef<HTMLVideoElement>(null)

  // 组件挂载、mediaStream变化时都触发流绑定逻辑
  useEffect(() => {
    setupWebcamVideo()
    
    // 组件卸载时清理资源
    return () => {
      if (mediaStream) {
        // 停止所有音视频轨道，释放摄像头
        mediaStream.getTracks().forEach(track => track.stop())
      }
    }
  }, [mediaStream])

  async function setupWebcamVideo() {
    if (!mediaStream) {
      await setupMediaStream()
      return
    }
    const video = videoRef.current
    if (!video) return
    // 每次都重新绑定流，避免新挂载的video实例无srcObject
    video.srcObject = mediaStream
    try {
      // 手动触发播放，兼容autoPlay不生效的场景
      await video.play()
    } catch (e) {
      console.error('视频播放失败:', e)
    }
  }

  async function setupMediaStream() {
    try {
      const ms = await navigator.mediaDevices.getUserMedia({ 
        video: { facingMode: 'user' }, 
        audio: true 
      })
      setMediaStream(ms)
    } catch (e) {
      alert('摄像头权限未开启或设备不可用')
      throw e
    }
  }

  return (
    <div className="w-full h-full relative z-0">
      <video 
        className="h-full w-full mx-auto" 
        ref={videoRef} 
        autoPlay 
        muted 
        playsInline // 移动端兼容，避免自动全屏
      />
    </div>
  )
}

调用侧代码无需修改，按原有逻辑使用即可。

可选优化建议 #

如果不需要每次切换都完全释放摄像头资源，可以将WebcamVideo组件的销毁逻辑改成隐藏而非卸载，减少重复申请权限/流的开销：

{/* 调用侧修改为通过display控制显隐，不卸载组件 */}
<div className="h-44 w-full" style={{display: toggleTab ? 'block' : 'none'}}>
  <WebcamVideo />
</div>
{toggleTab ? null : (
  <div>
    <div className="font-bold mb-10 text-lg">Not webcam</div>
    <div className="h-96">
      <NonWebcam />
    </div>
  </div>
)}

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