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>
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
Top comments (0)