如何在React web应用程序(非本机)中拍照

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

const CameraComponent = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);

  useEffect(() => {
    const enableCamera = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoRef.current.srcObject = stream;
        videoRef.current.play();
      } catch (error) {
        console.error('Error accessing camera:', error);
      }
    };

    enableCamera();
  }, []);

  const capturePhoto = () => {
    const video = videoRef.current;
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    // 绘制当前视频帧到画布上
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 将画布内容转换为Base64编码的图像数据
    const photoData = canvas.toDataURL('image/png');

    // 在控制台打印图像数据
    console.log(photoData);

    // 可以将photoData赋值给<img>元素的src属性，以显示拍摄的照片
  };

  return (
    <div>
      <video ref={videoRef} width="640" height="480" />
      <button onClick={capturePhoto}>拍照</button>
      <canvas ref={canvasRef} style={{ display: 'none' }} />
    </div>
  );
};

export default CameraComponent;