在React/NextJS useRef失败的情况下切换摄像头视频

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

const CameraComponent = () => {
  const [cameraId, setCameraId] = useState(null);
  const videoRef = useRef(null);

  useEffect(() => {
    // 在组件挂载时获取并显示默认摄像头视频流
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        videoRef.current.srcObject = stream;
      })
      .catch((error) => {
        console.error('Error accessing video stream:', error);
      });

    return () => {
      // 在组件卸载时停止视频流
      if (videoRef.current.srcObject) {
        videoRef.current.srcObject.getTracks().forEach((track) => {
          track.stop();
        });
      }
    };
  }, []);

  const switchCamera = () => {
    // 切换摄像头
    if (cameraId === 'front') {
      setCameraId('back');
    } else {
      setCameraId('front');
    }
  };

  useEffect(() => {
    // 在摄像头切换时更新视频流
    if (cameraId) {
      navigator.mediaDevices.getUserMedia({ video: { facingMode: cameraId } })
        .then((stream) => {
          videoRef.current.srcObject = stream;
        })
        .catch((error) => {
          console.error('Error accessing video stream:', error);
        });
    }
  }, [cameraId]);

  return (
    <div>
      <video ref={videoRef} autoPlay></video>
      <button onClick={switchCamera}>切换摄像头</button>
    </div>
  );
};

export default CameraComponent;