DEV Community

Practicing Datscy
Practicing Datscy

Posted on

Image capture from a video

#javascript #practicingdatscy #frontend #datascience

In this post, method/s to obtain image samples from a video are demonstrated. Often times for AI model fine-tuning, like fine-tuning with mobilenet, it is important to obtain images from a video.

Method 0

This method allows one to play or pause a video. When the video is paused, the video frame is printed as an image on the canvasElement.

<!DOCTYPE>
<html>
<head></head>
<body>

<video controls width="100" height="100" id="videoElement_id">
     <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" id="sourceElement_id">
</video>

<canvas id="canvasElement_id" width="100" height="100"></canvas>

<script>

document.getElementById("videoElement_id").addEventListener("pause", processEvent_pause_click, false);
function processEvent_pause_click(event) {
  document.getElementById("sourceElement_id").play = false;
  print_a_frame();
}

var videoElement = document.getElementById("videoElement_id");

const ctx = document.getElementById("canvasElement_id").getContext("2d");

var width = document.getElementById("canvasElement_id").width;
var height = document.getElementById("canvasElement_id").height;

function print_a_frame() {
  function printFrame() { ctx.drawImage(videoElement, 0, 0, width, height); }
  function callBack(functionName) { printFrame(); }
  videoElement.requestVideoFrameCallback(callBack);
}

</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Good Luck and Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

  1. MDN requestVideoFrameCallback: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback
  2. MDN pause video: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event

Top comments (0)