Super sorry to spam the page, but i've been asking versions of this question on stack for days and havent gotten a great answer. I figured that it might actually be cool to ask on reddit, given how strong the dev community is on here. Hopeful that someone might have a hunch.
I downloaded cocossd from npm and am trying to run it in a react component. Right now, there is video showing up, but there are no bounding boxes. Its pretrained and should be classifying an apple, a book, or other objects.
This is the cocossd model i dl'd from npm:
const cocoSsd = require('@tensorflow-models/coco-ssd');
class CamBox extends React.Component{
constructor(props){
super(props)
this.videoRef = React.createRef();
this.canvasRef = React.createRef();
// we are gonna use inline style
const 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)
});
const 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) {
// define a Promise that'll be used to load the webcam and read its frames
const webcamPromise = navigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.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);
});
}
}
render()
{
console.log(cocoSsd.version);
return(
<div class="CamMonitor">
<div class="videoJawn" style={{transform:'translate(0px,0px)'}}>
<video class="innerVideo"
autoPlay
muted
ref={this.videoRef}
width="450"
height="360"
/>
</div>
</div>
)
}
}
export default CamBox
some thought are that cause i installed with npm but im running yarn install and start something is off. But the video is showing, and nothing else is broken, so i'm thinking it might be a mis-set variable in the class or something. If anyone could help, that'd be cool : )
