使用设备相机在 reactjs 中捕获图像

Question

我可以访问设备相机并在 ReactJs 中拍照吗？目标是创建一个组件，允许相机通过单击按钮拍照。根据我的研究，我应该使用 mediaDevices，但我正在寻找 ReactJs 中的示例代码。请提供示例代码，或者如果您有实施此经验的经验，请指导我。

Answer 1

我已经准备了一个可以用作组件的示例代码。此代码片段适用于也有两个摄像头的设备。如果您想拍摄视频而不是照片，您还可以在输出中启用音频功能。import React from "react";class App extends React.Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.cameraNumber = 0;&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; imageDataURL: null,&nbsp; &nbsp; };&nbsp; }&nbsp; initializeMedia = async () => {&nbsp; &nbsp; this.setState({ imageDataURL: null });&nbsp; &nbsp; if (!("mediaDevices" in navigator)) {&nbsp; &nbsp; &nbsp; navigator.mediaDevices = {};&nbsp; &nbsp; }&nbsp; &nbsp; if (!("getUserMedia" in navigator.mediaDevices)) {&nbsp; &nbsp; &nbsp; navigator.mediaDevices.getUserMedia = function (constraints) {&nbsp; &nbsp; &nbsp; &nbsp; var getUserMedia =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; navigator.webkitGetUserMedia || navigator.mozGetUserMedia;&nbsp; &nbsp; &nbsp; &nbsp; if (!getUserMedia) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return Promise.reject(new Error("getUserMedia Not Implemented"));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getUserMedia.call(navigator, constraints, resolve, reject);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; //Get the details of video inputs of the device&nbsp; &nbsp; const videoInputs = await this.getListOfVideoInputs();&nbsp; &nbsp; //The device has a camera&nbsp; &nbsp; if (videoInputs.length) {&nbsp; &nbsp; &nbsp; navigator.mediaDevices&nbsp; &nbsp; &nbsp; &nbsp; .getUserMedia({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; video: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deviceId: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exact: videoInputs[this.cameraNumber].deviceId,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then((stream) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.player.srcObject = stream;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch((error) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.error(error);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert("The device does not have a camera");&nbsp; &nbsp; }&nbsp; };&nbsp; capturePicture = () => {&nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; canvas.width = this.player.videoWidth;&nbsp; &nbsp; canvas.height = this.player.videoHeight;&nbsp; &nbsp; var contex = canvas.getContext("2d");&nbsp; &nbsp; contex.drawImage(this.player, 0, 0, canvas.width, canvas.height);&nbsp; &nbsp; this.player.srcObject.getVideoTracks().forEach((track) => {&nbsp; &nbsp; &nbsp; track.stop();&nbsp; &nbsp; });&nbsp; &nbsp; console.log(canvas.toDataURL());&nbsp; &nbsp; this.setState({ imageDataURL: canvas.toDataURL() });&nbsp; };&nbsp; switchCamera = async () => {&nbsp; &nbsp; const listOfVideoInputs = await this.getListOfVideoInputs();&nbsp; &nbsp; // The device has more than one camera&nbsp; &nbsp; if (listOfVideoInputs.length > 1) {&nbsp; &nbsp; &nbsp; if (this.player.srcObject) {&nbsp; &nbsp; &nbsp; &nbsp; this.player.srcObject.getVideoTracks().forEach((track) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; track.stop();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // switch to second camera&nbsp; &nbsp; &nbsp; if (this.cameraNumber === 0) {&nbsp; &nbsp; &nbsp; &nbsp; this.cameraNumber = 1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // switch to first camera&nbsp; &nbsp; &nbsp; else if (this.cameraNumber === 1) {&nbsp; &nbsp; &nbsp; &nbsp; this.cameraNumber = 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Restart based on camera input&nbsp; &nbsp; &nbsp; this.initializeMedia();&nbsp; &nbsp; } else if (listOfVideoInputs.length === 1) {&nbsp; &nbsp; &nbsp; alert("The device has only one camera");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert("The device does not have a camera");&nbsp; &nbsp; }&nbsp; };&nbsp; getListOfVideoInputs = async () => {&nbsp; &nbsp; // Get the details of audio and video output of the device&nbsp; &nbsp; const enumerateDevices = await navigator.mediaDevices.enumerateDevices();&nbsp; &nbsp; //Filter video outputs (for devices with multiple cameras)&nbsp; &nbsp; return enumerateDevices.filter((device) => device.kind === "videoinput");&nbsp; };&nbsp; render() {&nbsp; &nbsp; const playerORImage = Boolean(this.state.imageDataURL) ? (&nbsp; &nbsp; &nbsp; <img src={this.state.imageDataURL} alt="cameraPic" />&nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; <video&nbsp; &nbsp; &nbsp; &nbsp; ref={(refrence) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.player = refrence;&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; autoPlay&nbsp; &nbsp; &nbsp; ></video>&nbsp; &nbsp; );&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; {playerORImage}&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.initializeMedia}>Take Photo</button>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.capturePicture}>Capture</button>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.switchCamera}>Switch</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;