react实现HTML调摄像头拍照功能

使用HTML5的getUserMedia API来获取摄像头的视频流，并使用canvas元素将视频流转换成图片。以下是一个简单的示例代码：

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

function App() {
const videoRef = useRef(null);
const canvasRef = useRef(null);
const [capturedImages, setCapturedImages] = useState([]);

const startCamera = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoRef.current.srcObject = stream;
};

const stopCamera = () => {
const stream = videoRef.current.srcObject;
const tracks = stream.getTracks();

tracks.forEach(function(track) {
track.stop();
});

videoRef.current.srcObject = null;
};

const capture = () => {
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
const imageSrc = canvas.toDataURL('image/png');
setCapturedImages([...capturedImages, imageSrc]);
};

const deleteImage = (index) => {
const newImages = [...capturedImages];
newImages.splice(index, 1);
setCapturedImages(newImages);
};

const submitImages = () => {
// 将capturedImages提交给后端
};

return (
<div>
<video ref={videoRef} autoPlay />
<canvas ref={canvasRef} style={{ display: 'none' }} />
<button onClick={startCamera}>打开摄像头</button>
<button onClick={stopCamera}>关闭摄像头</button>
<button onClick={capture}>拍照</button>

{capturedImages.map((image, index) => (
<div key={index}>
<img src={image} alt={`captured image ${index}`} />
<button onClick={() => deleteImage(index)}>删除</button>
</div>
))}

<button onClick={submitImages}>提交</button>
</div>
);
}

export default App;

在这个示例中，getUserMedia API用于获取摄像头的视频流，startCamera函数用于打开摄像头，stopCamera函数用于关闭摄像头。capture函数用于将视频流转换成图片并保存到capturedImages数组中。deleteImage函数用于删除已经拍摄的图片。submitImages函数用于将所有拍摄的图片提交给后端 。