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>




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


 id="canvasElement_id" width="100" height="100">



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);
}







    Enter fullscreen mode
    


    Exit fullscreen mode
    




Good Luck and Happy Practicing! 👋💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium
  
  
  References

MDN requestVideoFrameCallback: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback

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