# Creating video using Render target

**URL:** <https://forum.babylonjs.com/t/creating-video-using-render-target/27948>\
**Category:** Questions\
**Created:** [February 25, 2022, 3:36am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948 "2022-02-25T03:36:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 25, 2022, 3:36am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/1 "2022-02-25T03:36:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 25, 2022, 3:49am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/2 "2022-02-25T03:49:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 25, 2022, 4:39am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/3 "2022-02-25T04:39:44Z")

</div>

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’.

```auto
$("#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);
                    }}
                    });

```

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 25, 2022, 5:20am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/4 "2022-02-25T05:20:23Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 25, 2022, 5:45am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/5 "2022-02-25T05:45:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [February 25, 2022, 1:23pm UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/6 "2022-02-25T13:23:45Z")

</div>

stop will automatically start a download for you

---

<div class="post-metadata">

**Author:** ![mathus1](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mathus1/32/8535_2.png) [@mathus1](https://forum.babylonjs.com/u/mathus1)\
**Post date:** [February 26, 2022, 3:15am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/7 "2022-02-26T03:15:34Z")

</div>

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

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

                        });
                      });

```

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 26, 2022, 5:39am UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/8 "2022-02-26T05:39:24Z")

</div>

Here is the doc link how to do it - [Render Scenes To Video. | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/scene/renderToVideo#stop-video-before-the-record-time)

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

```

Example - [https://playground.babylonjs.com/#47H64G#3](https://playground.babylonjs.com/#47H64G#3)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [February 27, 2022, 2:31pm UTC](https://forum.babylonjs.com/t/creating-video-using-render-target/27948/9 "2022-02-27T14:31:16Z")

</div>

You rock @labris