Streaming live video on texture

Questions
1

I want to map a live video stream onto a plane in three.js. Is there a simple way to do this?

So far I’ve only seen HLS-based approaches, which require serving video from your own VPS server.
HLS isn’t optimal because it seems to break on every iOS update, so was wondering if there’s another method I’m missing?

Mapping a Twitch or Youtube stream would be great, they have robust servers and setting up your own comes with a lot of complications.

I don’t think I can do the CSS3 texture approach because the app I’m building is open world, so the screen needs to be occluded by other objects.

2

There is the official youtube example. I’ve never tried a live stream but i expect it would work.
three.js examples

or you can use your attached webcam
Webcam - Three.js Tutorials (sbcode.net)

1 Like
3

The CSS3DObject can be used in an open world scenario, no problem with occlusion with other objects (the only issue being camera-facing .CSS3DObjects covering other camera-facing CSS3DObjects: then you have to correct using the z-index).

4

Interesting, ok will give css3d a try!

5

Have you found the solution?

6

that is perfectly doable, just slide it under the canvas, and use colorWrite: false on the material in canvas so that it would leave a hole