Record certain part of the scene in babylon using babylon recorder

I want to record a certain portion of the babylon scene, but i’m struggling to achieve thie. I used babylon video recorder and it is recording the full canvas. is there any way to record certain area of the canvas or the mesh bounding area??.

Hello :slight_smile:

As far as I know it’s not possible by default to define a crop with the recorder. That said, the BABYLON.VideoRecorder constructor can take a canvas param as input. So you can trick the stuff like so :

  • Create another canvas to be the crop portion
  • Update the canvas content with the crop of the main canvas
function updateCrop() {
    cropContext.clearRect(0, 0, cropWidth, cropHeight);
    cropContext.drawImage(canvas, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);

Here is a Playground

Maybe there is a simpler way, I let official devs comment :stuck_out_tongue:


I’m using babylon v4.4 and there is no canvas option in VideoRecorderOptions

Why ? :scream:

Too bad, I had just coded the golden solution for you :grin: : Playground
This Playground handles a record focused on a mesh, by adapting the canvas crop draw call

Full canvas record :
Screencast from 10-07-2024 19:55:26

Crop record :
babylonjs (19)


but still i cant give canvas as a target for the recorder. is there any alternative way. I’m restricted to v4.4

Maybe you can use the same trick (crop canvas like I did) but instead of using the BABYLON recorder to record the cropped canvas, you would use a pure HTML/JS recorder :

const fps = 30;
const stream = cropCanvas.captureStream(fps);
mediaRecorder = new MediaRecorder(stream);
// etc...
1 Like

yeah, i did tried that as well, but the quality seems to be relatively low

What bitrate did you choose ? The final quality will highly depend on it.
(See MediaRecorder APIvideoBitsPerSecond )

1 Like

i kept 2500000 as in the documentation

can you help me to give high quality configuration, im new to this video stuff for meidaRecorder



    const stream = canvas.captureStream(60); // 60 FPS
    const options = {
        mimeType: 'video/webm;codecs=vp9',
        videoBitsPerSecond: 10000000 // 10 Mbps
    const mediaRecorder = new MediaRecorder(stream, options);

FullHD/60 FPS

1 Like


1 Like