getUserMedia.js

const getUserMedia = async () => {
  const model = await tfTask.ObjectDetection.CocoSsd.TFJS.load();
  const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
  const mediaRecorder = new MediaRecorder(mediaStream);
  mediaRecorder.ondataavailable = async (e) => {
    const videoTracks = mediaStream.getVideoTracks();
    const videoTrack = videoTracks[videoTracks.length - 1];
    const imageCapture = new ImageCapture(videoTrack);
    const frame =
      await imageCapture.grabFrame();
    const result = await model.predict(frame, { numMaxBoxes: 5 });
    const canvas = document.getElementById('canvas');
    const canvasContext = canvas.getContext('2d');
    canvasContext.drawImage(frame, 0, 0, frame.width, frame.height);
    result.objects.forEach(object => {
      canvasContext.beginPath();
      canvasContext.rect(object.boundingBox.originX, object.boundingBox.originY, object.boundingBox.width, object.boundingBox.height);
      canvasContext.strokeStyle = 'lightgreen';

      canvasContext.stroke();
      canvasContext.font = '28px serif';
      canvasContext.fillStyle = 'lightgreen';
      canvasContext.fillText(object.className, object.boundingBox.originX, object.boundingBox.originY);
    });
  };
  mediaRecorder.start(5);
};
getUserMedia();