title: Error while running poseNet on Webcam video
body: <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;!-- Load TensorFlow.js --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"&gt;&lt;/script&gt;
    &lt;!-- Load Posenet --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"&gt;&lt;/script&gt;
    &lt;title&gt;Yoga Pose Assessment Through Webcam&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;video id="video" width="640" height="640" autoplay playsinline style=" -moz-    transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    ;"&lt;/video&gt;
    &lt;/div&gt;
    &lt;script&gt;
  
      // Load camera
      async function setupCamera() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          throw new Error(
            'Browser API navigator.mediaDevices.getUserMedia not available');
        }
  
        const video = document.getElementById('video');
        const stream = await navigator.mediaDevices.getUserMedia({
          'audio': false,
          'video': true,
        });
        video.srcObject = stream;
  
        return new Promise((resolve) =&gt; {
          video.onloadedmetadata = () =&gt; {
            resolve(video);
          };
        });
      }
  
      async function loadVideo() {
        const video = await setupCamera();
        video.play();
  
        //return video;
      }
  
      async function detect() {
  
        let video;
        video = await loadVideo();
  
        let net;
        // Load posenet
        net = await posenet.load();
  
        flipHorizontal = true;
  
        // Scale the image. The smaller the faster
        const imageScaleFactor = 0.75;
  
        // Stride, the larger, the smaller the output, the faster
        const outputStride = 32;
  
        // Store all the poses
        let poses = [];
        let minPoseConfidence;
        let minPartConfidence;
  
        const pose = await net.estimateSinglePose(video,
          imageScaleFactor,
          flipHorizontal,
          outputStride);
        console.log(pose);
      }
  
      detect();
  
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run the above code in Firefox I get the following error</p>
  
  <pre><code>TypeError: t is undefined   posenet:17:10511
  </code></pre>
  
  <p>When I run the above code in google chrome I get the following error</p>
  
  <pre><code>Uncaught (in promise) TypeError: Cannot read property 'height' of undefined
  at U (posenet:17)
  at t.&lt;anonymous&gt; (posenet:17)
  at posenet:17
  at Object.next (posenet:17)
  at posenet:17
  at new Promise (&lt;anonymous&gt;)
  at u (posenet:17)
  at t.estimateSinglePose (posenet:17)
  at detect (demo.html:106)
  </code></pre>
  
  <p>I am trying to log the pose object. I am using the video taken from the webcam and is passed to poseNet.
  I would also like to know if the approach I am using is good or there are any changes to be made.</p>
  
  <p>While displaying the webcam video to the user I am flipping the video using css and again while passing the video to poseNet I am setting the flipHorizontal to true. Is the approach correct?</p>
  
  <p>Any help would be appreciated. Thanks in advance.</p>