If we implement some animation effect on Canvas and need to play it back, many people usually use the screen recording tool to record the content of the screen and play it back. Few people know that Canvas can be directly converted to 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 let’s write a very simple Canvas animation 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 creates a 200 width and height rectangle rotated around 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 use Blob objects to write data to the video tag on the page.

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, check out this article.

Finally, we start 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 effect.

The complete code is here.

Combine with audio

Canvas recorded video can also be combined with audio by using ffMPEG’s Web side.

Browsers can integrate ffMPEG through WebAssembly, specific projects here, interested students can study below.

Ffmpeg Web API is also more complex to use, the students of the dance group developed a very easy to use the package, the project address here, you can see a specific example here.

conclusion

In some scenarios that need dynamic playback requirements, we can use Canvas to create the video in real time and then playback, so as not to use JS to redraw, which is a more resource-saving way. In addition, the recording function of Canvas is also of great value for some online teaching scenes. Screen recording software consumes a lot of resources, while directly recording Canvas on the Web may be a simpler and more convenient way.

Welcome to “ByteFE”

Resume delivery email: [email protected]