Comparing Animation Techniques: window.requestAnimationFrame() vs requestVideoFrameCallback() for Canvas Video Rendering

by softbinator

In this article, we’ll explore two animation techniques for a canvas: one using window.requestAnimationFrame() and the other with <video>.requestVideoFrameCallback(). Let’s dive in!

Animation Technique #1

window.requestAnimationFrame

Using the native requestAnimationFrame method in JavaScript, we can make our browser call and repeat an animation function very quickly forever. It calls itself to paint the next frame.

How to Use requestAnimationFrame

requestAnimationFrame also returns an ID you can use to cancel it.

So in order to render a video in a canvas we can use it like this:

It’s very important to call cancelAnimationFrame otherwise requestAnimationFrame will call itself forever, and this can make your web application run slower, depending on the usage. 

A very important point worth mentioning is the Browser compatibility, so in this case as you see this built in functionality is supported in all major browsers:

Animation technique #2

<video>.requestVideoFrameCallback

The requestVideoFrameCallback() method allows web developers to register a callback, which runs in the rendering steps when a new video frame is sent to the compositor. This is intended to allow developers to perform efficient per-video-frame operations on video, such as video processing and painting to a canvas.

Quick facts:

  1. requestVideoFrameCallback() is a method that can be called from the HTMLMediaElement itself. 
  2. The callback function is called every time a new frame (from the video element) is presented. Compared to requestAnimationFrame(), which can be called in an infinite loop, if you are using this method you will see a huge improvement, because the callback is called only when the video is playing/seeking.
  3. How many times the callback is called depends on the video fps. Another huge improvement because now the rendered video has no missing frames, no matter how many fps the video has. And you can also process each frame before drawing it into the canvas. 
  4. If necessary you can stop the callback loop using <video>.cancelVideoFrameCallback().

How to use <video>.requestVideoFrameCallback():

Bad news and conclusion:  

requestVideoFrameCallback is still a proposal by the W3C community and for now it’s not implemented in all browsers. However you can use it in all chrome based browsers (we have  a lot of them these days) and safari. As for the firefox browser, we are stuck with the requestAnimationFrame() for now and hope for a better future. 

by softbinator

Related Posts