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

7

Hey, I’m also trying to hide the screen with other objects. I’m new to threejs so I don’t know what you mean with “slide under the canvas” ? And how z-index will impact the screen ? I don’t want the whole screen to be hidden, only the part hidden by objects

8

quite literally this. make a containter with position: relative, and put the video 1st and the canvas 2nd, so that the canvas is on top. then by using colorWrite: false on the plane material you can create a hole in that canvas to see a video.

9

hey guys css3d worked, im using both twitch and youtube now, just copy this example >>>
https://threejs.org/examples/css3d_youtube.html