Render Scenes To Video.

Record a Scene to a Video

First, you may ask why is it better than an external video capture tool?

Thanks to the Html5 standard being always in motion, we can now, in modern browsers, directly record a stream generated from a canvas. This ensures that no framerate drop will occur during the recording and it is all happening auto-magically in the browser.

How to record with the inspector

A new action has been added to the Tools tab of the inspector. You can find a Start Recording Video button in compatible browsers.

This will by default records 7 seconds of video. You can press the button again anytime during the recording session to stop it earlier.

How to record by code

Check support

As the browser support is still not wide enough, recording the canvas should always be preceeded by a capability check. You can simply use this code to ensure the correct availability of the required APIs in your browser:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
}

Simple Record

In order to record your currently displayed scene, you can simply use this code:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording();
}

You can see a Simple Video Recording Example

This will by default record 7 seconds of video to a file name "babylonjs.webm".

Changing default File Name

You can pass the file name to the startRecording API:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording("test.webm");
}

You can see a live version here: Changing The Default Recorded Video Name

This will by default record 7 seconds of video to a file name "test.webm".

Changing default Record Time

You can pass the default time in seconds to the startRecording API:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording("test.webm", 2);
}

You can see a live demo here: Chaning Default Record Time

This will by default record 2 seconds of video to a file name "test.webm".

Stop video before the Record Time

Once a record is in progress, you can stop it earlier by using the stopRecording Api:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording();
    setTimeout(() => {
        recorder.stopRecording()
    }, 500);
}

You can see a live version here: Stopping Video Before Record Time

This will record 500 milliseconds of video to a file name "babylonjs.webm".

When does the record end

To detect the end of the recording (either reaching the record time or manually stopped), you can use the promise return by the startRecording API:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording().then(() => {
        alert("done");
    });
}

You can see a live version here: Detect Recording End

This will record 7 seconds of video to a file name "babylonjs.webm" and display the "done" message.

How to not download automatically the file

Passing the fileName to null will prevent the download to happen automatically and as in the previous topic, you can rely on the startRecording return promise to deal with the video data on your own:

if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording(null, 1).then((videoBlob) => {
        // Do Something with the videoBlob.
    });
}

You can see a live version here: Not Downloading The Recorded Video

This will record 1 second of video to a blob.

Limitations

Video Recording is based on both MediaRecorder and Canvas.captureStream() APIs which are still not broadly supported. The recording support is then limited by the browser capability to record a canvas.

The second limitations is the file format you can record to seems to be curently limited to webm. You can not directly record to .mp4 or .mov with this method so far.

Let's hope that wider browser and file format support will be added soon.