使用 React/NextJS useRef 失败切换网络摄像头视频

如何解决使用 React/NextJS useRef 失败切换网络摄像头视频

我已经定义了一个网络摄像头组件，用于我的代码库中的几个地方，但它只在加载时呈现。我正在尝试添加一个开关来打开和关闭它，但我正在努力让它工作。

这是我在 Next.js 中使用的组件的 TypeScript 实现。

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

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

  useEffect(() => {
    setupWebcamVideo()
  },[mediaStream])

  async function setupWebcamVideo() {
    if (!mediaStream) {
      await setupMediaStream()
    } else {
      const videoCurr = videoRef.current
      if (!videoCurr) return
      const video = videoCurr! as HTMLVideoElement
      if (!video.srcObject) {
        video.srcObject = mediaStream
      }
    }
  }

  async function setupMediaStream() {
    try {
      const ms = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' },audio: true })
      setMediaStream(ms)
    } catch (e) {
      alert('Camera is disabled')
      throw e
    }
  }
...
  return (
    <div className="w-full h-full relative z-0">
      <video className="h-full w-full mx-auto" ref={videoRef} autoPlay muted />
    </div>
  )
}

我在这个场景中使用组件：

export default function SomePage() {
  const [toggleTab,setToggleTab] = useState(true)

  return (
    <div className="w-5/6 mx-auto">
      {toggleTab ? (
        <div className="h-44 w-full">
          <WebcamVideo />
        </d
      ) : (
        <div>
          <div className="font-bold mb-10 text-lg">Not webcam</div>
          <div className="h-96">
            <NonWebcam />
          </div>
        </div>
      )}
      <div onClick={() => setToggleTab(!toggleTab)}>Toggle webcam</div> 
    </div>
  )
}

切换两次后，我看不到网络摄像头视频，但如果我重新加载页面，它就会出现。

解决方法

我已经按照上面的评论创建了 CSB，并且在切换按钮两次后会出现视频。

https://codesandbox.io/s/distracted-dew-9ge80?file=/src/App.js

import { useRef,useState,useEffect } from "react";

export default function WebcamVideo() {
  const [mediaStream,setMediaStream] = useState();
  const videoRef = useRef(null);

  useEffect(() => {
    // Moved to inside of useEffect because this function is depended on `mediaStream`
    async function setupWebcamVideo() {
      if (!mediaStream) {
        await setupMediaStream();
      } else {
        const videoCurr = videoRef.current;
        if (!videoCurr) return;
        const video = videoCurr;
        if (!video.srcObject) {
          video.srcObject = mediaStream;
        }
      }
    }
    setupWebcamVideo();
  },[mediaStream]);

  async function setupMediaStream() {
    try {
      const ms = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: "user" },audio: true
      });
      setMediaStream(ms);
    } catch (e) {
      alert("Camera is disabled");
      throw e;
    }
  }
  return (
    <div className="w-full h-full relative z-0">
      <video className="h-full w-full mx-auto" ref={videoRef} autoPlay muted />
    </div>
  );
}