in video-object-detection/main.js [109:140]
function updateCanvas() {
const { width, height } = canvas;
context.drawImage(video, 0, 0, width, height);
if (!isProcessing) {
isProcessing = true;
(async function () {
// Read the current frame from the video
const pixelData = context.getImageData(0, 0, width, height).data;
const image = new RawImage(pixelData, width, height, 4);
// Process the image and run the model
const inputs = await processor(image);
const { outputs } = await model(inputs);
// Update UI
overlay.innerHTML = "";
const sizes = inputs.reshaped_input_sizes[0].reverse();
outputs.tolist().forEach((x) => renderBox(x, sizes));
if (previousTime !== undefined) {
const fps = 1000 / (performance.now() - previousTime);
status.textContent = `FPS: ${fps.toFixed(2)}`;
}
previousTime = performance.now();
isProcessing = false;
})();
}
window.requestAnimationFrame(updateCanvas);
}