CODEWITHSUNDEEP
javascripthtml5-videohtml5-canvas
Jeremy Banks
Jeremy Banks

Reputation: 129746

Displaying a <video> in a <canvas> in another window - how do I achieve the full frame rate?

I have a video playing in a video element in my main window. I would like to display the video in a cavas in a window I open() with JavaScript. (The original video element will be hidden, but it will still be responsble for playing the sound.)

I'm doing it like this.

<video id='video' style='display: none;' autoplay>
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
  <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
  <source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>

I open a new window and create a canvas element. Then I add a callback for each timeupdate event of the video in the main window. When this runs I copy the current frame of video to the canvas.

video.addEventListener("play", function() {
  var child = open("/echo/html/", "width=" + video.videoWidth + ",height=" + video.videoHeight);

  child.addEventListener("load", function() {
    var canvas = child.document.createElement("canvas"),
        g2d = canvas.getContext("2d");

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    child.document.body.appendChild(canvas);

    video.addEventListener("timeupdate", function() {
      g2d.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    });
  });
});

You can see this working here on jsfiddle but it doesn't run smoothly. It seems like the function for timeupdate will not be called every time the frame changes. It is called less often.

How can I display the video in the external window at its full quality?

Upvotes: 1

Views: 842

Answers (1)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83706

timeupdate() is designed for displaying video run-time and indeed may not run for every frame.

To have smooth animation loop, animate it using requestAnimationFrame() loop on the consumer side

For each requestAnimationFrame call pull over the new video frame.

Upvotes: 2

Related Questions