我有一个简单的反应应用程序，它有三个按钮，一个用于启动相机输入，一个用于捕获图像并显示它，一个用于检测该图像中的面部并在面部周围添加一个带有尺寸的框。 '
import {useEffect} from "react";
const App = () => {
const videoStyle = {
'border': '1px solid black',
'width': '650px',
'height': '440px',
'margin-right': '600px',
}
const buttonStyle = {
'border': '1px solid black',
'width': '400px',
'height': '40px',
'margin-right': '600px',
}
const imageStyle = {
'border': '1px solid black',
'width': '650px',
'height': '440px',
'margin-right': '600px',
}
useEffect(() => {
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video: any= null;
var canvas: any= null;
var photo: any= null;
var startbutton = null;
var detect = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('hidden');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
detect = document.getElementById("detect")
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
alert("An error occurred: " + err);
});
video.addEventListener('canplay', function() {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
if (startbutton){
startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false)};
clearphoto();
if (detect){
detect.addEventListener('click', function(ev) {
d()
ev.preventDefault();
}, false)};
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
}, [])
return (
<html>
<body>
<div className="contentarea">
<button style={buttonStyle}>start </button>
<div className="camera" draggable>
<video id="video" style={videoStyle} ></video>
</div>
<div><button id="startbutton" style={buttonStyle}>Take photo</button></div>
<canvas id="canvas" hidden></canvas>
<div className="output">
<img id="photo" style={imageStyle} alt="The screen capture will appear in this box."/>
<button id="detect" >Detect</button>
</div>
</div></body>
</html>
)
;
}
export default App;
我尝试过 opencv.js 但我不知道如何导入它，我只能找到一个链接 “https://docs.opencv.org/3.4.0/opencv.js”但它仍然无法在反应应用程序中工作。使用tensflow，每当我卸载/安装任何模块（例如“tensflow-models/face-landmarks-detection”或类似的东西）时，我都会收到错误。问题是我只能使用前端，所以我很迷失。
上面的代码不是很“React-y”，也不是很“现代 JS”：
letconstvar.getElementById().addEventListener()在 NPMJS 上进行 搜索“opencv React” 我看到了一些可能值得查看的搜索结果，它们可以让您比尝试将 OpenCV 网站上的 HTML 指令手动合并到 React 应用程序中更快地启动和运行。