
# How to

The `CreateScreenshot` functions can be used to render a screenshot of your scene, allowing you to download it or even use it as a texture in the scene itself. The available methods are the following:

## CreateScreenshot

```javascript
scene.onReadyObservable.add(() => {
  BABYLON.Tools.CreateScreenshot(engine, camera, size, successCallback, mimeType, forceDownload, quality, useFill);
});
```

Observe that the screenshot creation is inside the scene's `onReadyObservable`, so it can wait for the meshes to be drawn. Otherwise, they won't appear in the screenshot.

<Playground id="#750168" title="Simple Screenshot Example" description="A simple example of how to use the CreateScreenshot method" />

The size parameter can be one of the following:

- A `{width: number, height: number}` with the width and height of the canvas and the created screenshot.
- A `{precision: number}` value that is a multiplier of the current resolution of the canvas.
- A single number indicating both width and height.

The optional `useFill` parameter, when set to true, allows the render canvas to fill the screenshot. Otherwise, the render canvas will be "letterboxed" if its aspect ratio does not match the aspect ratio of the screenshot size.

The success callback is a function that contains the screenshot as a string of base64-encoded characters. This string can be assigned to the src attribute of an `<img>` to display it, or it can be used to create a new Texture in the scene.

<Playground id="#750168#1" title="Use screenshot as texture" description="Example of how to use the CreateScreenshot callback to assign the screenshot data as a texture in the scene" />

More information about the other arguments of the function can be found in its [documentation page](/typedoc/classes/BABYLON.Tools#CreateScreenshot).

This function also has a `CreateScreenshotAsync` version that can be awaited using the [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) keyword.

_NOTE: If creating a screenshot with a camera that is NOT the scene's active camera, use `CreateScreenshotUsingRenderTarget` instead._

## CreateScreenshotUsingRenderTarget

As the name suggests, this function renders the scene to a [RenderTargetTexture](/features/featuresDeepDive/postProcesses/renderTargetTextureMultiPass) for the screenshot. It has a few more [configuration options](/typedoc/classes/BABYLON.Tools#CreateScreenshotUsingRenderTarget):

```javascript
BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, size, successCallback, mimeType, samples, antialiasing, fileName, renderSprites, enableStencilBuffer, useLayerMask, quality, customizeTexture);
```

The `customizeTexture` callback can be used to modify the texture before taking the screenshot. This can be used, for example, to modify its `renderList` property, changing which objects will appear in the screenshot. You can also turn post-processes [on or off](/features/featuresDeepDive/postProcesses/usePostProcesses).

<Playground id="#2mvlub#22" title="CreateScreenshotUsingRenderTarget" description="Example of how to modify the renderList and useCameraPostProcesses of a screenshot texture."/>

It also has a `CreateScreenshotUsingRenderTargetAsync` version.



## Record a Scene to a Video

First, you may ask why it is better than an external video capture tool.

As the HTML5 standard continues to evolve, modern browsers can now directly record a stream generated from a canvas. This ensures that no framerate drop occurs during recording, and it all happens automatically 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.

![InspectorTools](/img/how_to/scene/inspectorVideoRecorder.webp)

This records 7 seconds of video by default. You can press the button again at any time during the recording session to stop it earlier.

## How to record by code

### Check support
Because browser support is still limited, recording the canvas should always be preceded by a capability check. You can use this code to ensure that the required APIs are available in your browser:

```javascript
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:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording();
}
```

You can see a <Playground id="#47H64G" title="Simple Video Recording Example" description="Simple example of recording a video of the current scene."/>

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:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording("test.webm");
}
```

You can see a live version here: <Playground id="#47H64G#1" title="Changing The Default Recorded Video Name" description="Simple example showing how to record a video of the current scene and change the default file 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:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording("test.webm", 2);
}
```

You can see a live demo here: <Playground id="#47H64G#2" title="Chaning Default Record Time" description="Simple example showing how to change the default record time of recorded videos."/>

This will by default record 2 seconds of video to a file name "test.webm".

### Stop video before the Record Time
Once a recording is in progress, you can stop it earlier by using the `stopRecording` API:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording();
    setTimeout(() => {
        recorder.stopRecording()
    }, 500);
}
```

You can see a live version here: <Playground id="#47H64G#3" title="Stopping Video Before Record Time" description="Simple example showing how to stop recording before the allotted time has completed."/>

This will record 500 milliseconds of video to a file name "babylonjs.webm".

### When does recording end
To detect the end of the recording (either by reaching the record time or being manually stopped), you can use the promise returned by the `startRecording` API:

```javascript
if (BABYLON.VideoRecorder.IsSupported(engine)) {
    var recorder = new BABYLON.VideoRecorder(engine);
    recorder.startRecording().then(() => {
        alert("done");
    });
}
```

You can see a live version here: <Playground id="#47H64G#4" title="Detect Recording End" description="Simple example showing how to detect when a recording has ended."/>

This will record 7 seconds of video to a file name "babylonjs.webm" and display the "done" message.

### How not to download the file automatically
Passing `null` as the fileName will prevent the download from happening automatically and, as in the previous section, you can rely on the promise returned by `startRecording` to deal with the video data on your own:

```javascript
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: <Playground id="#47H64G#5" title="Not Downloading The Recorded Video" description="Simple example showing how you can stop an automatic download of the recorded video."/>

This will record 1 second of video to a blob.

## Limitations
Video recording is based on both the MediaRecorder and Canvas.captureStream() APIs, which are still not broadly supported. Recording support is therefore limited by the browser's ability to record a canvas.

The second limitation is that the file format you can record to is currently limited to webm. You cannot 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.



An offscreen canvas is a canvas that can be rendered offscreen and on a different thread than the main UI thread.

It could be really interesting to do so if your main thread is already heavily used for other tasks.

You can see a page demonstrating this use case here: https://www.babylonjs.com/Demos/Offscreen/

<Youtube id="zYrZNROQzKQ"/>

# Setting up the engine

Starting with Babylon.js v4.1, you can create an engine inside a worker by initializing it with an offscreen canvas.

First, you need to create an offscreen canvas out of your regular canvas:

```javascript
var canvas = document.getElementById("renderCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var offscreen = canvas.transferControlToOffscreen();
```

Then you need to spin off a new worker and send it the offscreen canvas.

```javascript
var worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
```

The worker code will then listen for your message, get the offscreen canvas, and start Babylon.js as usual:

```javascript
onmessage = function (evt) {
  canvas = evt.data.canvas;
  var engine = new BABYLON.Engine(canvas, true);

  // Your scene setup here
};
```

Then you can use your engine as usual.

# Caveats

The main caveat of using Babylon.js with an offscreen canvas in a worker thread is that you will need to do special work to communicate with the engine from the main thread. You will have to use the same messaging API we used before to communicate between threads.

Furthermore, Babylon.js will not be able to handle inputs for you, so APIs like `camera.attachControls()` will not work and you will have to message inputs to workers.

Here is an example of communication you will have to set up to support canvas resizing.

On main thread:

```javascript
window.addEventListener("resize", () => {
  worker.postMessage({ width: canvas.clientWidth, height: canvas.clientHeight });
});
```

On worker thread:

```javascript
var engine;
onmessage = function (evt) {
  if (evt.data.width) {
    canvas.width = evt.data.width;
    canvas.height = evt.data.height;
  }
};
```

# Compatibility

Note that this feature is new and not yet compatible with every device or browser.
You can check current support of offscreen canvas here: https://caniuse.com/#feat=offscreencanvas

If you want to test the compatibility, you can add this condition before using offscreen canvas:

```javascript
if ("OffscreenCanvas" in window && "transferControlToOffscreen" in canvas) {
  // Ok to use offscreen canvas
}
```

# Resources

- https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
- https://developers.google.com/web/updates/2018/08/offscreen-canvas


Render Scenes To .png Files

CreateScreenshot

CreateScreenshotUsingRenderTarget