Hello everyone,
My project has a feature that allows the user to record the current gameplay, but for now, I can only record the canvas element.
I’m looking for a way of recording a fixed area of the dom, the reason for this requirement is due to the fact that my game has the major part of its hud made in HTML elements.
Thanks for your time folks.
-Escobar
I’m not sure this can be easily done. There is html2canvas which can be used to obtain screenshots based on the DOM. But a) it can’t be used to record a video and b) I don’t now how reliable it works.
This task might be easier if you implement your UI based on scree-space sprites.
I was also looking for a solution, eventually gave up as recording my canvas caused a significant framerate drop (ccapture). Now I’m building a chrome extension to do tab recording which captures everything in the tab smoothly. It does constrain users to chrome…
Well, I did not manage to find a way, that’s pretty sad, I’m challenging my self in my first Threejs project since I lost my job due to the corona effect in the market I had plenty of time to study.
The canvas recording is working well, but it gets dull without the hud =(, take a look.
As you can see in the image, I get the user name from the Instagram API and I write it into an HTML element since the record doesn’t get HTML elements, it does not appear in the video =(
As @Mugen87 pointed out, your best bet may be to build your user interface in the canvas (ie: in the scene).
You have the option to use a webGL engine specialised in 2D rendering and render a UI scene in a separate canvas on top of your three.js scene.
You can also stick with three.js and render a scene in screen space with OrthographicCamera on top of your game scene, and put Shapes and text in it to build your user interface with meshes. You can record mouse hover and clicks with Raycaster. three-mesh-ui can help, it’s an add-on for building mesh-based user interface with three.js
The MediaRecorder API can record the screen, afaik you can provide some options to specify a window should be selected by the user, but i don’t think you can explicitly say you want your tab to be captured.
Note: Constraints never cause changes to the list of sources available for capture by the Screen Sharing API. This ensures that web applications can’t force the user to share specific content by restricting the source list until only one item is left
So this is an option if you just give users the option to record it for local saving, not if the recording will be uploaded/shared as anything could be recorded.
