Creating video using Render target

Questions
1

Is there a way to record a video without displaying the Babylon GUI?

For snapshots, I use BABYLON.Tools.CreateScreenshotUsingRenderTarget and It works well

But I haven’t found a similar function for videos

Is there only BABYLON.VideoRecorder function?

BTW, chrome already supports downloads in mp4 file. I have tested it

2

You may just hide GUI when recording video, then show again.

3

Thank you. I will do that

Just one more question. I am trying to implement a start and stop function to record, but I’m able to record only once. The second time showsthe following message

Uncaught DOMException: Failed to execute ‘stop’ on ‘MediaRecorder’: The MediaRecorder’s state is ‘inactive’.

$("#video").click(function(){
                      if (scene.activeCamera == camera) {
                    if (BABYLON.VideoRecorder.IsSupported(engine)) {
                    var recorder = new BABYLON.VideoRecorder(engine,camera,2500);
                    recorder.startRecording("video.mp4", 3600);
                    $("#stop").show();
                    var myTimer= function(){$("#stop").click(function(){recorder.stopRecording(); $("#stop").hide();clearInterval(myVar);})};
                    let myVar = setInterval(myTimer,3600);
                    }}
                    else if(scene.activeCamera == camera2){
                    if (BABYLON.VideoRecorder.IsSupported(engine)) {
                    var recorder = new BABYLON.VideoRecorder(engine,camera2,2500);
                    recorder.startRecording("video.mp4", 3600);
                    $("#stop").show();
                    var myTimer= function(){$("#stop").click(function(){recorder.stopRecording(); $("#stop").hide();clearInterval(myVar);})};
                    let myVar = setInterval(myTimer,3600);
                    }}
                    });
4

You may try to write you data to the blob and then process it as you want.

startRecording(fileName?: Nullable<string>, maxDuration?: number): Promise<Blob>
5

How can I use blob properties to finish the record and download the video file after pressing the stop button?

6

stop will automatically start a download for you

7

I want to stop the video as soon as I press the button, but the action happens only after 3600 seconds has passed. How can I stop the video before 3600 seconds

                      recorder.startRecording("video.mp4", 3600).then((videoBlob) => {
                      $("#stop").show();
                      $("#stop").click(function(){
                        videoBlob.stop(); $("#stop").hide();

                        });
                      });
8

Here is the doc link how to do it - Render Scenes To Video. | Babylon.js Documentation

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

Example - https://playground.babylonjs.com/#47H64G#3

2 Likes
9

You rock @labris

1 Like