当前位置：首页 > React

react实现拍照功能

2026-01-27 01:37:27React

使用react-webcam实现拍照功能

安装react-webcam库

npm install react-webcam

引入并使用Webcam组件

import React, { useRef, useState } from 'react';
import Webcam from 'react-webcam';

const CameraComponent = () => {
  const webcamRef = useRef(null);
  const [imageSrc, setImageSrc] = useState(null);

  const capture = () => {
    const imageSrc = webcamRef.current.getScreenshot();
    setImageSrc(imageSrc);
  };

  return (
    <div>
      {!imageSrc ? (
        <>
          <Webcam
            audio={false}
            ref={webcamRef}
            screenshotFormat="image/jpeg"
          />
          <button onClick={capture}>拍照</button>
        </>
      ) : (
        <>
          <img src={imageSrc} alt="拍摄的照片" />
          <button onClick={() => setImageSrc(null)}>重新拍摄</button>
        </>
      )}
    </div>
  );
};

export default CameraComponent;

自定义视频约束

可以调整摄像头分辨率和纵横比

react实现拍照功能

const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user" // 或 "environment" 使用后置摄像头
};

<Webcam
  videoConstraints={videoConstraints}
  // 其他属性...
/>

保存拍摄的照片

添加保存到本地的功能

const downloadImage = () => {
  const link = document.createElement('a');
  link.href = imageSrc;
  link.download = 'photo.jpg';
  link.click();
};

// 在显示照片的部分添加
<button onClick={downloadImage}>保存照片</button>

处理移动端兼容性

移动设备需要用户授权摄像头权限

react实现拍照功能

const [hasPermission, setHasPermission] = useState(false);

const requestCameraPermission = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    setHasPermission(true);
    stream.getTracks().forEach(track => track.stop());
  } catch (err) {
    console.error('摄像头权限被拒绝:', err);
  }
};

// 在组件渲染时检查权限
useEffect(() => {
  requestCameraPermission();
}, []);

错误处理

添加摄像头无法访问时的错误处理

<Webcam
  onUserMediaError={(err) => {
    console.error('摄像头错误:', err);
    alert('无法访问摄像头');
  }}
/>

样式优化

添加基本样式改善用户体验

.webcam-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.webcam {
  margin-bottom: 10px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #0056b3;
}