# Streaming live video on texture

**URL:** <https://discourse.threejs.org/t/streaming-live-video-on-texture/25460>\
**Category:** Questions\
**Tags:** video-texture\
**Created:** [April 18, 2021, 6:40am UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460 "2021-04-18T06:40:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sinjin\_Hawke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sinjin_hawke/32/17724_2.png) [@Sinjin\_Hawke](https://discourse.threejs.org/u/Sinjin_Hawke)\
**Post date:** [April 18, 2021, 6:40am UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/1 "2021-04-18T06:40:15Z")

</div>

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](https://github.com/mrdoob/three.js/issues/9754) 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.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [April 18, 2021, 7:20am UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/2 "2021-04-18T07:20:21Z")

</div>

There is the official youtube example. I’ve never tried a live stream but i expect it would work.  
[three.js examples](https://threejs.org/examples/?q=yout#css3d_youtube)

or you can use your attached webcam  
[Webcam - Three.js Tutorials (sbcode.net)](https://sbcode.net/threejs/webcam/)

---

<div class="post-metadata">

**Author:** ![awonnink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/awonnink/32/22486_2.png) [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [April 18, 2021, 8:51am UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/3 "2021-04-18T08:51:40Z")

</div>

> [@Sinjin\_Hawke](#):
>
> 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.

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).

---

<div class="post-metadata">

**Author:** ![Sinjin\_Hawke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sinjin_hawke/32/17724_2.png) [@Sinjin\_Hawke](https://discourse.threejs.org/u/Sinjin_Hawke)\
**Post date:** [April 18, 2021, 2:57pm UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/4 "2021-04-18T14:57:20Z")

</div>

Interesting, ok will give css3d a try!

---

<div class="post-metadata">

**Author:** ![Monax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/monax/32/28168_2.png) [@Monax](https://discourse.threejs.org/u/Monax)\
**Post date:** [April 6, 2023, 4:18pm UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/5 "2023-04-06T16:18:48Z")

</div>

Have you found the solution?

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [April 6, 2023, 4:58pm UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/6 "2023-04-06T16:58:14Z")

</div>

> [@Sinjin\_Hawke](#):
>
> the screen needs to be occluded by other objects.

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

---

<div class="post-metadata">

**Author:** ![Flydexo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/flydexo/32/46995_2.png) [@Flydexo](https://discourse.threejs.org/u/Flydexo)\
**Post date:** [April 20, 2024, 3:39pm UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/7 "2024-04-20T15:39:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [April 25, 2024, 10:17pm UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/8 "2024-04-25T22:17:01Z")

</div>

> [@Flydexo](#):
>
> what you mean with “slide under the canvas” ?

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.

---

<div class="post-metadata">

**Author:** ![Sinjin\_Hawke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sinjin_hawke/32/17724_2.png) [@Sinjin\_Hawke](https://discourse.threejs.org/u/Sinjin_Hawke)\
**Post date:** [April 26, 2024, 1:13am UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460/9 "2024-04-26T01:13:54Z")

</div>

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