Attempting to build a web app that uses tensorflow.js (coco-ssd) for real-time object detection but when I load the web page up there is no camera or anything going on, but I can't understand why.
Any ideas? the code should just load up a simple box that uses the device camera as the media stream within javascript but nothing happens. its all linked correctly
<--HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lets Scan</title>
<!-- Load TensorFlow.js-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<!-- Load the coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<!-- Load React. -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<link rel="stylesheet" href="CSS/LetsScan.css">
</head>
<body>
<!-- Navigation Bar Code-->
<nav class="navbar">
<a href="Home.html"> Home</a>
<a href="LetsScan.html">Lets Scan</a>
<a href="AboutUs.html">About Us</a>
<a href="ContactUs.html">Contact Us</a>
</nav>
<!--
<div class="contentarea">
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<div><button id="startbutton">Take photo</button></div>
<!-- Camera Output --
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
</div>
<script src="js/letsscan.js"></script>
-->
<!-- Load our React component. -->
<script src="letsscan.js" type="text/babel"></script>
<!-- We will put our React component inside this div. -->
<div id="root"></div>
</body>
</html>
<--JS-->
class App extends React.Component {
// reference to both the video and canvas
videoRef = React.createRef();
canvasRef = React.createRef();
// we are gonna use inline style
styles = {
position: 'fixed',
top: 150,
left: 150,
};
detectFromVideoFrame = (model, video) => {
model.detect(video).then(predictions => {
this.showDetections(predictions);
requestAnimationFrame(() => {
this.detectFromVideoFrame(model, video);
});
}, (error) => {
console.log("Couldn't start the webcam")
console.error(error)
});
};
showDetections = predictions => {
const ctx = this.canvasRef.current.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const font = "24px helvetica";
ctx.font = font;
ctx.textBaseline = "top";
predictions.forEach(prediction => {
const x = prediction.bbox[0];
const y = prediction.bbox[1];
const width = prediction.bbox[2];
const height = prediction.bbox[3];
// Draw the bounding box.
ctx.strokeStyle = "#2fff00";
ctx.lineWidth = 1;
ctx.strokeRect(x, y, width, height);
// Draw the label background.
ctx.fillStyle = "#2fff00";
const textWidth = ctx.measureText(prediction.class).width;
const textHeight = parseInt(font, 10);
// draw top left rectangle
ctx.fillRect(x, y, textWidth + 10, textHeight + 10);
// draw bottom left rectangle
ctx.fillRect(x, y + height - textHeight, textWidth + 15, textHeight + 10);
// Draw the text last to ensure it's on top.
ctx.fillStyle = "#000000";
ctx.fillText(prediction.class, x, y);
ctx.fillText(prediction.score.toFixed(2), x, y + height - textHeight);
});
};
componentDidMount() {
if (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia) {
// define a Promise that'll be used to load the webcam and read its frames
const webcamPromise = navigator.mediaDevices
.getUserMedia({
video: true,
audio: false,
})
.then(stream => {
// pass the current frame to the window.stream
window.stream = stream;
// pass the stream to the videoRef
this.videoRef.current.srcObject = stream;
return new Promise(resolve => {
this.videoRef.current.onloadedmetadata = () => {
resolve();
};
});
}, (error) => {
console.log("Couldn't start the webcam")
console.error(error)
});
// define a Promise that'll be used to load the model
const loadlModelPromise = cocoSsd.load();
// resolve all the Promises
Promise.all([loadlModelPromise, webcamPromise])
.then(values => {
this.detectFromVideoFrame(values[0], this.videoRef.current);
})
.catch(error => {
console.error(error);
});
}
}
// here we are returning the video frame and canvas to draw,
// so we are in someway drawing our video "on the go"
render() {
return (
<div>
<video
style={this.styles}
autoPlay
muted
playsInline
ref={this.videoRef}
width="720"
height="600"
/>
<canvas style={this.styles} ref={this.canvasRef} width="720" height="650" />
</div>
);
}
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(App), domContainer);
question from:
https://stackoverflow.com/questions/65892491/tensorflow-js-real-time-object-detection 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
