How to record a video frame by frame?

Questions
1

As far as I know this is the only implementation in Babylon JS

I’ve tried to solve this issue with 2 approaches:

  1. with an array of webp images and later combining with Whammy. It doesn’t work, maybe because the resolution and quantity of frames
  2. By using mediaRecorder.ondataavailable and rendering the frames one by one, not in a loop. The method stopped firing the event while testing the code and I’m not sure why.

The final solution is to get the video in the client, I would not like to use a server for this.

By the way, the application I’m working at will capture multiple pictures of a scene in different angles/positions, and I want the video to compress and keep them all in the same file. Later my application will navigate through the frames.

Thanks

2

What is the problem with the implementation in Babylon? It does not work for you?

3

No because as far as I see it’s continuous.

I want to change the camera, take a frame, and move to the next position (arbitrary, not related to the previous or next ones). Basically I need all the frames without duplicates in the correct order.

4

Then I guess you will need to read the canvas after each frame and create the video “by hand”. Maybe there are some javascript open source tools that let you create a video by providing an array of pictures… For eg, in Babylon, we use gif.js to create an animated gif when you use the corresponding feature in the inspector (but obviously it works only for .gif, it does not generate .webm / .mpeg).