# Add video from webcam as background to entire scene

**URL:** <https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277>\
**Category:** Questions\
**Tags:** background\
**Created:** [October 16, 2019, 10:31pm UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277 "2019-10-16T22:31:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fselcukcan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fselcukcan/32/7568_2.png) [@fselcukcan](https://discourse.threejs.org/u/fselcukcan)\
**Post date:** [October 16, 2019, 10:31pm UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277/1 "2019-10-16T22:31:32Z")

</div>

How can I add video stream from my camera to the scene as background?

---

<div class="post-metadata">

**Author:** ![LisaWy](https://avatars.discourse-cdn.com/v4/letter/l/eb9ed0/32.png) [@LisaWy](https://discourse.threejs.org/u/LisaWy)\
**Post date:** [October 17, 2019, 10:00am UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277/2 "2019-10-17T10:00:06Z")

</div>

You can make your THREE.JS canvas transparent and put an HTML video behind it.

Here’s an article about how to put a video stream into an HTML video tag.

[https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1](https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1)

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 17, 2019, 12:00pm UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277/3 "2019-10-17T12:00:34Z")

</div>

HTML5 video can also be used as a texture. In three.js, there is a `VideoTexture` class for this purpose. Check out [https://eliashasle.github.io/ghost\_webcam.html](https://eliashasle.github.io/ghost_webcam.html) for an example, which also shades the video. (You should turn the audio volume down before entering the page.) You don’t have to do any custom shading, of course.

Once you have the texture, you can set it as `scene.background`: [https://threejs.org/docs/#api/en/scenes/Scene.background](https://threejs.org/docs/#api/en/scenes/Scene.background)

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fselcukcan/32/7568_2.png) [@fselcukcan](https://discourse.threejs.org/u/fselcukcan)\
**Post date:** [October 17, 2019, 4:17pm UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277/4 "2019-10-17T16:17:03Z")

</div>

Do you mean by passing the `alpha: true` opiton to [`WebGLRenderer`](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) function alongside with the `canvas` option.

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fselcukcan/32/7568_2.png) [@fselcukcan](https://discourse.threejs.org/u/fselcukcan)\
**Post date:** [October 17, 2019, 4:18pm UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277/5 "2019-10-17T16:18:27Z")

</div>

Is there a difference to that than the way @LisaWy has described. Or are they two different implementations? If so is one is preferable to the other for any reason like performance etc.?

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 17, 2019, 7:43pm UTC](https://discourse.threejs.org/t/add-video-from-webcam-as-background-to-entire-scene/10277/6 "2019-10-17T19:43:37Z")

</div>

They are different solutions.

> [@fselcukcan](#):
>
> If so is one is preferable to the other for any reason like performance etc.?

You tell us. 😉