unable to load webcam/video in html

Question

I am using a basic html/javascript script where I load a webcam component.

<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    <!-- Add an image that we will use to test -->
    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
    <!-- Load index.js after the content of the page -->
    <script src="index.js"></script>
  </body>
</html>

const webcamElement = document.getElementById('webcam');

async function app() {
    console.log('Loading mobilenet..');
  
    // Load the model.
    net = await mobilenet.load();
    console.log('Successfully loaded model');
    const webcam = await tf.data.webcam(webcamElement);
    while (true) {
      const img = await webcam.capture();
      const result = await net.classify(img);
  
      document.getElementById('console').innerText = `
        prediction: ${result[0].className}\n
        probability: ${result[0].probability}
      `;
      img.dispose();
      await tf.nextFrame();
    }
  }

This seems to be the correct way to load a webcam as per other answers. However, nothing opens for me. No console logs as well. I am trying this on Firefox.

Answer 1

First of all, simply include the script webcam-easy.min.js in the section of the html file.

and try instead of that js, you will get the web cam output

unable to load webcam/video in html

Question

1 answers

solution1
-1 2020-10-31 16:02:41

unable to load webcam/video in html

Question

1 answers

solution1 -1 2020-10-31 16:02:41

solution1
-1 2020-10-31 16:02:41