js 实现拍照

使用WebRTC API实现拍照功能

通过浏览器的getUserMedia API调用摄像头，结合canvas捕获图像。

关键代码示例：

// 获取视频流并显示在video元素中
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.getElementById('video');
    video.srcObject = stream;
  })
  .catch(err => console.error('摄像头访问失败:', err));

// 拍照并转换为图片
function capturePhoto() {
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  const photoData = canvas.toDataURL('image/png'); // 获取Base64图片数据
}

使用HTML5的capture属性（移动端）

移动设备可通过<input type="file">的capture属性直接调用摄像头。

示例代码：

<input type="file" accept="image/*" capture="camera">

第三方库支持（如React）

使用现成库简化流程，例如react-webcam。

安装与示例：

npm install react-webcam

import Webcam from 'react-webcam';
const videoConstraints = { facingMode: 'user' };

function App() {
  const webcamRef = React.useRef(null);
  const capture = () => {
    const imageSrc = webcamRef.current.getScreenshot();
  };
  return <Webcam ref={webcamRef} videoConstraints={videoConstraints} />;
}

注意事项

• 权限问题：需确保用户授权摄像头访问。
• 兼容性：getUserMedia在HTTPS或localhost下生效，部分旧浏览器需前缀（如webkitGetUserMedia）。
• 移动端适配：不同设备对capture属性的支持可能不一致，需测试验证。