Record certain part of the scene in babylon using babylon recorder

Questions
1

Hi,
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??.

2

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);
    requestAnimationFrame(updateCrop);
}
updateCrop();

Here is a Playground

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

2 Likes
3

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

4

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)

3 Likes
5

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

6

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
7

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

8

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

1 Like
9

i kept 2500000 as in the documentation

10

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

11

Options:

Example:

    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
12

thanks

1 Like