reactjs - 离开 React 组件时网络摄像头不会关闭

Question

我目前正在 React 应用程序中使用我的网络摄像头拍照。然而，当我离开组件时，绿灯继续亮着，我似乎无法关闭我的网络摄像头。这是我用来使用网络摄像头的代码。

  navigator.webkitGetUserMedia({ video: true, audio: false }, function(stream) {
    video.srcObject = stream;
    window.localstream = stream;
    video.play();
  }, function (e) {
    console.log(e);
  })

稍后，在我的 componentWillUnmount 生命周期处理程序中，我运行以下代码:

video.pause();
video.srcObject = null;
window.localstream.getTracks()[0].stop();
var list = document.getElementById("video"); 
list.removeChild(list.childNodes[0])

我的网络摄像头没有关闭，但是当我在 console.log 时，MediaStreamTrack 的 readyState = "ended"和 enabled 等于 false。有什么办法可以强制关闭我的网络摄像头？

Answer 1

React 为您提供了像useEffect 这样惊人的钩子(Hook)。 , useRef和别的。您需要做的就是在离开页面或关闭组件时停止视频轨道。

useEffect(() => {
  /*
   * action on opening page:
   * as example you could get all video devices and
   * to choose which camera exactly you want to use
   */
  getDevices()
  return () => {
    stopVideo();
  };
}, []);

由于我们在 useEffect 钩子(Hook)中有 return 语句，因此每次我们离开页面时都会调用函数 stopVideo()。

现在让我们假设您将状态存储为当前视频轨道

const [videoStream, setVideoStream] = useState<MediaStream>();

停止视频流的函数如下所示:

function stopVideo() {
   if (videoStream) {
     videoStream.getTracks().forEach((track: any) => {
       if (track.readyState === "live") {
         track.stop();
       }
     });
   }
 }

see in codesandbox

简介:要关闭您的相机，您必须停止跟踪，因此如果您将如下所示添加到您的项目 useEffect，它将帮助您实现您的目标。

  useEffect(() => {
    let videoElement: HTMLVideoElement | undefined

    if (videoRef.current) {
      videoElement = videoRef.current
    }

    return () => {
      if (videoElement && videoElement.srcObject) {
        (videoElement.srcObject as MediaStream).getTracks().forEach((track: any) => {
          if (track.readyState == 'live') {
            track.stop()
          }
        })
      }
    }
  }, [videoRef])