My video is so small #65

ruellm · 2021-12-10T15:20:01Z

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?

The text was updated successfully, but these errors were encountered:

ModischFabrications · 2022-05-30T21:25:25Z

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 · 2022-05-30T21:30:45Z

On a related note: Setting style="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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My video is so small #65

My video is so small #65

ruellm commented Dec 10, 2021 •

edited

Loading

ModischFabrications commented May 30, 2022 •

edited

Loading

ModischFabrications commented May 30, 2022

My video is so small #65

My video is so small #65

Comments

ruellm commented Dec 10, 2021 • edited Loading

ModischFabrications commented May 30, 2022 • edited Loading

ModischFabrications commented May 30, 2022

ruellm commented Dec 10, 2021 •

edited

Loading

ModischFabrications commented May 30, 2022 •

edited

Loading