0

Goal: I want to get ALL of the selected video frames and save them to a folder in the project, as well as, name them simultaneously.

At the moment, It only saves a frame when I press the play/pause button with each press replacing the previous displayed frame.

References

Index.html


<html>
 <head>
<title>JS and HTML5 Rule</title>
</head>
<body>
    The Video
    <br />
    <video id="my_video" controls>
        <source src="./assets/vine.mp4" type="video/mp4" />
    </video>
    <br />
    The Canvas
    <br />
    <canvas id="thecanvas">
    </canvas>
    <br />
    The Image
    <br />
    <img id="thumbnail_img" alt="Right click to save" />
    <br />
    <script type='text/javascript' src="./js/content.js"></script>
</body>
</html>

main.js

window.onload = function () {
  var video = document.getElementById("my_video");
  var thecanvas = document.getElementById("thecanvas");
  var img = document.getElementById("thumbnail_img");

  video.addEventListener(
    "pause",
    function () {
      draw(video, thecanvas, img);
    },
    false
  );
};

function draw(video, thecanvas, img) {
  // get the canvas context for drawing
  var context = thecanvas.getContext("2d");

  // draw the video contents into the canvas x, y, width, height
  context.drawImage(video, 0, 0, thecanvas.width, thecanvas.height);
  // get the image data from the canvas object
  var dataURL = thecanvas.toDataURL();
  // set the source of the img tag
  img.setAttribute("src", dataURL);
}
Dev Topia
  • 23
  • 4
  • I can't find any code that performs the saving. Did you include everything you wrote so far here? – applesoup Oct 25 '22 at 23:08
  • @applesoup Yes, everything's included, however, I think some of the JS code was when pasting here so I just updated the post. Also, there's no save function at the moment. I'm more concerned about getting all the frames at the moment. – Dev Topia Oct 25 '22 at 23:14
  • I'm not familiar with this topic, but it seems the `eventListener` is triggered when the video is `"pause"`d. – applesoup Oct 25 '22 at 23:17
  • And I'm sceptic it's possible to add a similar `eventListener` that is triggered on every frame. I assume you need to find an entirely different way. But as said, not sure about this... – applesoup Oct 25 '22 at 23:19
  • @applesoup My brain is fried apparently. It being an eventlistener makes sense. Thanks for your help! – Dev Topia Oct 25 '22 at 23:20

0 Answers0