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

Question

I've defined a Webcam component to use in a couple places in my codebase but it only renders on load. I'm trying to add a toggle to turn it on and off but am struggling to get it work.

Here's the TypeScript implementation of the component that I'm using in Next.js.

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>
  )
}

I'm using the component in this scenario:

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>
  )
}

After toggling twice, I don't see the Webcam video, but if I reload the page, it appears.

Answer 1

I've created CSB as commented above and video appears after toggling button twice.

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>
  );
}