当前位置：首页 > React

react怎样实现拍照

2026-01-27 07:47:19React

使用React实现拍照功能

在React中实现拍照功能通常需要结合浏览器的MediaDevices API和<video>、<canvas>元素。以下是实现步骤：

获取摄像头权限并显示视频流

在组件中创建一个useEffect钩子来请求摄像头权限并显示实时视频流：

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

const CameraComponent = () => {
  const videoRef = useRef(null);
  const [hasPermission, setHasPermission] = useState(false);

  useEffect(() => {
    const enableStream = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
          setHasPermission(true);
        }
      } catch (err) {
        console.error("Error accessing camera:", err);
      }
    };

    enableStream();

    return () => {
      if (videoRef.current && videoRef.current.srcObject) {
        videoRef.current.srcObject.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

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

捕获照片并转换为图像

添加拍照功能，将视频帧绘制到canvas上并转换为图像数据：

const capturePhoto = () => {
  const video = videoRef.current;
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 转换为DataURL
  const imageDataUrl = canvas.toDataURL('image/png');
  return imageDataUrl;
};

// 在组件中添加拍照按钮
<button onClick={() => {
  const photo = capturePhoto();
  console.log(photo); // 这里可以处理照片数据
}}>
  拍照
</button>

处理照片数据

可以将照片数据保存到state中或上传到服务器：

const [photos, setPhotos] = useState([]);

const handleCapture = () => {
  const newPhoto = capturePhoto();
  setPhotos([...photos, newPhoto]);
};

响应式布局和样式优化

确保视频元素适应不同屏幕尺寸：

video {
  width: 100%;
  max-width: 640px;
  height: auto;
  background: #000;
}

错误处理和权限管理

添加更完善的错误处理：

react怎样实现拍照

try {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280, height: 720 }
  });
  // ...其他代码
} catch (err) {
  if (err.name === 'NotAllowedError') {
    alert('请允许摄像头访问权限');
  } else if (err.name === 'NotFoundError') {
    alert('未找到摄像头设备');
  } else {
    alert(`摄像头错误: ${err.message}`);
  }
}

完整组件示例

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

const CameraApp = () => {
  const videoRef = useRef(null);
  const [photos, setPhotos] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const enableStream = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoRef.current.srcObject = stream;
      } catch (err) {
        setError(err.message);
      }
    };

    enableStream();

    return () => {
      if (videoRef.current?.srcObject) {
        videoRef.current.srcObject.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  const capturePhoto = () => {
    const video = videoRef.current;
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL('image/jpeg', 0.8);
  };

  return (
    <div>
      {error && <div className="error">{error}</div>}
      <video ref={videoRef} autoPlay playsInline />
      <button onClick={() => setPhotos([...photos, capturePhoto()])}>
        拍照
      </button>
      <div className="gallery">
        {photos.map((photo, index) => (
          <img key={index} src={photo} alt={`照片 ${index}`} />
        ))}
      </div>
    </div>
  );
};