Skip to content

Instantly share code, notes, and snippets.

@paulwongx

paulwongx/index.html

Created November 30, 2023 16:57
Show Gist options
  • Save paulwongx/9466cbdb39e58536e266738534543ce7 to your computer and use it in GitHub Desktop.
Save paulwongx/9466cbdb39e58536e266738534543ce7 to your computer and use it in GitHub Desktop.
Download ZIP
Object Detection
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Camera</title>
<!-- Load TensorFlow.js. This is required to use coco-ssd model. -->
<script defer src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<!-- Load the coco-ssd model. -->
<script defer src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script>
<script defer src="script.js"></script>
<style>
body {
box-sizing:border-box;
margin: 0;
padding: 0;
}
#video {
z-index: 2;
position: relative;
}
#canvas {
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<!-- <img id='catImage' width='500' src="https://images.unsplash.com/photo-1596854273338-cbf078ec7071?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80" alt="" crossorigin='anonymous'> -->
<video id="video" width="100%" height="100%" autoplay muted></video>
<canvas id='canvas'></canvas>
</body>
</html>
Raw
script.js
const video = document.getElementById("video");
const videoPos = video.getBoundingClientRect();
const startVideo = () => {
navigator.getUserMedia(
{ video: {} },
(stream) => {
video.srcObject = stream;
},
(err) => console.error(err)
);
};
startVideo();
console.log("videoPos.height", videoPos.height);
console.log("videoPos.width", videoPos.width);
console.log("videoPos.top", videoPos.top);
console.log("videoPos.bottom", videoPos.bottom);
console.log("videoPos.left", videoPos.left);
console.log("videoPos.right", videoPos.right);
/** Detect Canvas */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
/** Detect Cat Image */
// const img = document.getElementById("catImage");
const detect = async (net) => {
const obj = await net.detect();
};
const drawRect = async (predictions, ctx, media) => {
predictions.forEach((prediction) => {
const [x, y, width, height] = prediction.bbox;
const name = prediction.class;
const score = prediction.score;
// console.table({ x, y, width, height, name, score });
canvas.width = media.width;
canvas.height = media.height;
// Draw rectanges and text
ctx.beginPath();
ctx.strokeStyle = "lightgreen";
ctx.lineWidth = "6";
// ctx.strokeRect(x, y, width, height);
ctx.strokeRect(0, 0, 100, 100);
ctx.font = "18px Arial";
ctx.fillStyle = "white";
const textY = y + height - 3;
const textX = x + 3;
ctx.fillText(`${name}: ${score}`, textX, textY);
ctx.stroke();
});
};
// Load the model for images
// cocoSsd.load().then((model) => {
// // detect objects in the image.
// console.log("cocoSsd has loaded");
// model.detect(img).then((predictions) => {
// console.log("Predictions: ", predictions);
// drawRect(predictions, ctx);
// });
// });
// Load the model for video
// const runCoco = async () => {
// const net = await cocossd.load();
// console.log('cocoSsd loaded');
// setInterval(()=> {
// detect(net);
// },10);
// }
// video.addEventListener("play", () => {
cocoSsd.load().then((model) => {
// detect objects in the image.
console.log("cocoSsd has loaded");
setInterval(async () => {
model.detect(video).then((predictions) => {
// console.log("Predictions: ", predictions);
drawRect(predictions, ctx, video);
// detect(net);
});
}, 100);
});
// });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment