How can i record Phaser canvas into a video stream

The canvas object in javascript has captureStream() method, i wonder if there’s something that is similar that in the Phaser’s API. I want to display the video stream from an html5 video element or even save it to a file.

Hi there!

1 - We can use canvas.captureStream() to capture the canvas. However, Phaser does not have a built-in method similar to captureStream(). Since Phaser itself doesn’t provide input elements, developers often use separate HTML elements for input. In this case, captureStream() will only capture the canvas, leaving out any external HTML elements. For this reason, I don’t recommend this approach.

2 - A better option is using navigator.mediaDevices.getDisplayMedia(). This method captures the entire page, including HTML elements, making it a more complete solution. However, in both cases, audio is not recorded by default. This means we need to manually handle audio recording, video format conversion, compression, and access rules, as different browsers behave differently, increasing complexity.

3 - In my opinion, using third-party software is the best solution. If you need to record or stream, I recommend OBS Studio, which offers better quality and flexibility.

@OlexandrC thank you for the reply. Your reply has given me a point where to start from with experimenting. I want to automate the process so won’t be using OBS studio.