Demystifying the MediaRecorder API: Capturing JS Animations with Ease

Capturing the Animation with MediaRecorder

Now that your animation is ready, let’s create a MediaRecorder instance and start capturing:

// Get the animation container element
const animationContainer = document.getElementById('animation-container');

// Create a MediaStream and get the video stream
const stream = animationContainer.captureStream();
const videoStream = stream.getVideoTracks()[0];

// Create a MediaRecorder instance
const mediaRecorder = new MediaRecorder(videoStream, {
  mimeType: 'video/webm; codecs=vp9'
});

// Create a blob array to store the recorded data
const recordedBlobs = [];

// Start the recording
mediaRecorder.start();

// Handle the recorded data
mediaRecorder.ondataavailable = event => {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
};

// Stop the recording
mediaRecorder.stop();

Uh-oh! My blob value is still null!

Don’t panic! There are a few common reasons why your blob value might be null:

• animationContainer.captureStream() returns null**: Double-check that your animation container element is correctly identified and that the animation is playing within it.
• videoStream is null or undefined**: Verify that the `getVideoTracks()` method returns a valid video track. You can use the `console.log()` function to inspect the `videoStream` variable.
• recordedBlobs array is empty**: Ensure that the `ondataavailable` event is firing correctly and that the `event.data` property contains valid data. You can use the `console.log()` function to inspect the `event.data` property.

// Create a blob from the recordeddata
const blob = new Blob(recordedBlobs, { type: 'video/webm' });

// Create a URL for the blob
const url = URL.createObjectURL(blob);

// Create an anchor element to download the file
const a = document.createElement('a');
a.href = url;
a.download = 'animation.webm';
a.click();

// Release the blob URL
URL.revokeObjectURL(url);