Video streaming to texture?

Does anyone know how to live stream video+audio to a texture? How can we set up some kind of videocasting, like hosting a live video interview, on to a texture?

You have the VideoTexture for that:
https://doc.babylonjs.com/how_to/video_texture

(check the CreateFromWebCam API: https://www.babylonjs-playground.com/#1R77YT#32)

yes I’ve seen those pages.

What I’m trying to achieve is someone make a live video somehow (via their web cam or video player) and streaming that across the internet into a video texture on another server. So with this I can have 20 people all watching some person being interviewed live at the same time, but on a video texture of a 3D TV screen.

The webcam trick that I can see here only works to the local computer, or is there a way to convert that into data that can be streamed to many computers?

Yes but this is the same. The videoTexture can point either to the local web cam or to a server stream url

ok, I think I can figure it out if I combine videoTexture with the information here How video streaming works on the web: An introduction

Because its live streaming I can’t use just one URL. I have to continuously get a new buffer. All good! Video texture does what it should do. The rest is outside of Babylon.js, just standard Javascript coding I think.

I got it working!

This is streaming from a live DASH server to video texture:
https://www.babylonjs-playground.com/#9FSDC7#13

2 Likes

Hello, your demo is not working. I tried to add different links but couldnt make it work. I need to make screen share on babylon, could you help me?

Do you have a link that you are trying to stream? I’ve realised the streams in the DASH playground demo are down.

I run it by editing some codes on my local test project.

var myVideo = document.createElement(‘video’);
var stream3 = “https://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd”;
myVideo.setAttribute(“src”, stream3);
myVideo.setAttribute(“controls”, “controls”);
myVideo.setAttribute(“autoPlay”, null);
myVideo.setAttribute(“data-dashjs-player”, “”);
myVideo.setAttribute(“hidden”, null);
document.getElementById(“root”).appendChild(myVideo);

. Now we are working on making a video conference and screen sharing app. To do that, we are planning to build a system with socket.io and webrtc. The plan is hosting live videos from a server instead of peer to peer connection which is not suitable for more than 2 users in the room. Do you think it is ok?