Render Three.JS in <video> element

Hello everyone. I want to be able to render the Three.JS scene inside a <video> HTML element.

Why I want to do this?

I want to try to enable Picture-in-Picture for my 3D scene. I’ve seen this is only posible with a <video> tag, so I wonder if there’s a way to render the scene in it.

Final goal is to achieve Picture-in-Picture for my 3D scene.

This PR was never merged but demonstrated how to record a three.js canvas and play it back in a video tag. I believe there’s a way to stream it, as well, but I’m unfamiliar with the APIs. It likely wouldn’t be interactive, though:

1 Like

Dope, I don’t know how easy will be to make it streamable, but will check it out. Interaction is not needed, so it’s all good with that constraint.

Also found this: https://webrtc.github.io/samples/src/content/capture/canvas-record/

But won’t work on Safari.