Webcam video texture

Hi so I’m wondering how can I go with making a live stream video recorded from the webcam into a video texture so that I can apply on objects? I am new to playcanvas and looking for tutorials or examples that I can follow to achieve this with the playcanvas engine.

Thanks!

Hi @z0mb00m and welcome,

You can use the following tutorial as base. There are plenty of tutorials online on how to start a webcam video feed using Javascript.

From the moment you acquire a handle on the video stream, after the camera starts recording, you can use the tutorial code to convert it to a texture.

https://developer.playcanvas.com/en/tutorials/video-textures/

Thanks for the reply!
I have the stream video using naviagotor.mediaDevices.getUserMedia and I tried setting the srcObj of the “video” in the tutorial code to this. However, I am unsure how I can put this texture on a plane or whether I failed to set set the texture.

Here is the above tutorial updated to work with a webcam:

https://playcanvas.com/project/698371/overview/webcam-video-texture

2 Likes