If we use Canvas to achieve some animation effects, we need to play it back. Many people usually use the screen recording tool to record and play the content on the screen. Few people know that Canvas can directly convert video through the Media Streams API supported by modern browsers.

Canvas objects support the captureStream method, which returns a MediaStream object. We can then create a MediaRecorder from this object to record the screen.

Let’s look at a simple example.

Record video

First we write a very simple Canvas animation effect, the code is as follows:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = canvas;

ctx.fillStyle = 'red';

function draw(rotation = 0) {
  ctx.clearRect(0.0.1000.1000);
  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(rotation);
  ctx.translate(-width / 2, -height / 2);
  ctx.beginPath();
  ctx.rect(200.200.200.200);
  ctx.fill();
  ctx.restore();
}

function update(t) {
  draw(t / 500);
  requestAnimationFrame(update);
}
update(0);
Copy the code

This effect implements a 200-by-200 rectangle rotated in the center of the canvas.

Next, let’s record this effect. Let’s say we record a 6 second video. First we need to get the MediaStream object:

const stream = canvas.captureStream();
Copy the code

Then, we create a MediaRecorder:

const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
Copy the code

We can then register the onDataAvailable event to record the data:

const data = [];
recorder.ondataavailable = function (event) {
  if(event.data && event.data.size) { data.push(event.data); }};Copy the code

In the onStop event, we write data to the video TAB on the page via the Blob object.

recorder.onstop = () = > {
  const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
  document.querySelector("#videoContainer").style.display = "block";
  document.querySelector("video").src = url;
};
Copy the code

If you are not familiar with Blob objects, read this article.

Finally, we started recording the video and set it to stop after 6 seconds:

recorder.start();

setTimeout(() = > {
  recorder.stop();
}, 6000);
Copy the code

In this way, we can achieve the desired screen recording effect.

The full code is here.

Combine with audio

Canvas recorded video, we can also combine it with audio, through the Web side of FFMPEG to synthesize.

Browsers can integrate FFMPEG through WebAssembly, the specific project is here, interested students can research.

The Web API of FFMPEG is still quite complicated to use. Li Chengyin, a student from Qiwu Group, developed a very useful package. The project address is here, and you can see specific examples here.

conclusion

In some scenes requiring dynamic playback, we can use Canvas to create video in real time and then play it back, without using JS to redraw, which is a relatively resource-saving way. In addition, the recording function of Canvas is also very valuable for some online teaching scenes. Screen recording software consumes many resources, but it may be a simpler and more convenient way to directly record Canvas on the Web.