My video is so small - Githubissues

ruellm commented 2 years ago

I have a video and a canvas, my video is sized to 640x480, without starting video and prediction the video is displayed properly with its size, but when i call handtrack.startVideo passing the video component, the video becomes small (and a hieght of 20px is inserted).

why is this? here is my code

``

<html>
<head>
    <title>Templated client</title>
</head>
<body>
  <video autoplay="autoplay" id="myvideo"></video>
  <canvas id="canvas"></canvas>

  <script src="lib/handtrack.min.js"> </script>
  <script>
    const video = document.getElementById("myvideo");
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");
    let isVideo = false;

     video.width = 640;
   video.height = 480;

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log(err0r);
    });
} 

    const modelParams = {
    flipHorizontal: true, // flip e.g for video
    maxNumBoxes: 20, // maximum number of boxes to detect
    iouThreshold: 0.5, // ioU threshold for non-max suppression
    scoreThreshold: 0.6, // confidence threshold for predictions.
  };

  function startVideo() {
    handTrack.startVideo(video).then(function (status) {
      console.log("video started", status);
      if (status) {
        console.log("Video started. Now tracking");
        isVideo = true;
        runDetection();
      } else {
         console.log("Please enable video");
      }
    });
  }

  function runDetection() {
  model.detect(video).then((predictions) => {
    console.log("Predictions: ", predictions);
    //model.renderPredictions(predictions, canvas, context, video);
    if (isVideo) {
      requestAnimationFrame(runDetection);
    }
  });
}

// Load the model.
handTrack.load(modelParams).then((lmodel) => {
  // detect objects in the image.
  model = lmodel;
  console.log(model);
});

startVideo();

  </script>
</body>
</html>

im trying to experiment that only the video is displayed and in exchange I will render something like a circle at the hand's position, but it seems like the video size is greatly coupled with the handtrack object that I cant do it.

whats is wrong?

ModischFabrications commented 2 years ago

I had the same problem, specifically 20px seems like a hardcoded placeholder: https://github.com/victordibia/handtrack.js/blob/master/src/index.js#L84

It took me a while to figure this out but it seems like runDetection() of the example is never called, which in turn never resizes the canvas. What solved it for me was fixing the parameter of handTrack.startVideo(video) and resetting the style manually, probably an outdated example.

        handTrack.startVideo(video).then(function (**res**) {
            console.log("video started", **res**);
            if (**res.status**) {
                console.log("Video started. Now tracking");
                isVideo = true;
                runDetection();
            } else {
                console.error("Please enable video");
            }
            video.style.height = "";
        });

ModischFabrications commented 2 years ago

On a related note: Settingstyle="display: none;" on the video keeps the video running for analysis but hides it from the view. The (rendered) canvas contains both the overlay and the original video stream.

victordibia / handtrack.js

My video is so small #65