paulwongx/index.html

## 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>

## 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);
  });
// });
	<!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>
	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);
	});
	// });