react实现拍照功能
使用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;自定义视频约束
可以调整摄像头分辨率和纵横比
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>处理移动端兼容性
移动设备需要用户授权摄像头权限
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;
}
