react本机摄像机返回缩略图

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

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

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        videoRef.current.srcObject = stream;
      })
      .catch((error) => {
        console.error('Error accessing camera:', error);
      });
  }, []);

  return (
    <div>
      <video ref={videoRef} autoPlay></video>
    </div>
  );
};

export default CameraComponent;

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

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

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        videoRef.current.srcObject = stream;
      })
      .catch((error) => {
        console.error('Error accessing camera:', error);
      });
  }, []);

  const captureThumbnail = () => {
    const canvas = canvasRef.current;
    const video = videoRef.current;

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    const thumbnail = canvas.toDataURL('image/jpeg');

    console.log('Thumbnail:', thumbnail);
  };

  return (
    <div>
      <video ref={videoRef} autoPlay></video>
      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
      <button onClick={captureThumbnail}>Capture Thumbnail</button>
    </div>
  );
};

export default CameraComponent;