# Video Dome with WebRTC Streaming Video

**URL:** <https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560>\
**Category:** Questions\
**Created:** [September 30, 2020, 8:57pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560 "2020-09-30T20:57:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [September 30, 2020, 8:57pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/1 "2020-09-30T20:57:45Z")

</div>

I’m trying to see how I can change this video to a video that is streamed through my WebRTC. Is this possible???

// In Babylon

var videoDome = new BABYLON.VideoDome(  
“skybox”,  
[“[https://yoda.blob.core.windows.net/videos/uptale360.mp4](https://yoda.blob.core.windows.net/videos/uptale360.mp4)”],  
{  
resolution: 32,  
clickToPlay: true  
},  
scene  
);

// In PeerJS a wrapper of WebRTC

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;  
if (getUserMedia) {  
getUserMedia({  
video: true,  
audio: true  
}, function(stream) {  
var call = peer.call(‘theid’, stream);  
call.on(‘stream’, function(stream) {  
var video = document.querySelector(‘video’);  
video.srcObject = stream;  
video.onloadedmetadata = function(e) {  
video.play();  
};  
});  
}, function(err) {  
});  
}

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 30, 2020, 9:27pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/2 "2020-09-30T21:27:43Z")

</div>

The video dome ultimately uses a Video Element so if you can configure it it should work

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [September 30, 2020, 10:28pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/3 "2020-09-30T22:28:57Z")

</div>

Please let me know if you have any tips…sort of stuck between the var video and how I can then assign this video to the BabylonJS one.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 30, 2020, 11:31pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/4 "2020-09-30T23:31:42Z")

</div>

well you can get the video element from the dome and then use it like a regular video element

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [October 1, 2020, 12:55am UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/5 "2020-10-01T00:55:37Z")

</div>

Can this be accomplished with a few equal signs or there is a particular way to connect that? Btw, I’m using PeerJS for the wrapper for WebRTC.

Meanwhile, on a side note: why is my webcam not showing? [Babylon.js Playground](https://www.babylonjs-playground.com/#X6PMK8)

It was working earlier but then after a few times, the webcam stops to convey on the screen. I’m using a desktop (and I have tried multiple browsers)

Thanks!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 1, 2020, 4:14pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/6 "2020-10-01T16:14:20Z")

</div>

> [@FBa](#):
>
> Btw, I’m using PeerJS for the wrapper for WebRTC

Well this is more a question for them 🙂 we can provide the video element and then there should be some doc on their side to connect to it

for your webcam not showing this is because the plane was wrong:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#X6PMK8%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [October 1, 2020, 4:40pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/7 "2020-10-01T16:40:20Z")

</div>

On desktop the webcam on the plane looks skinnier, and on the mobile it looks fatter when in portrait mode…is there a way to adjust the aspect ratio?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 1, 2020, 4:54pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/8 "2020-10-01T16:54:11Z")

</div>

you want it to be fullscreen?

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [October 1, 2020, 5:43pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/9 "2020-10-01T17:43:38Z")

</div>

no I don’t.

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [October 1, 2020, 5:43pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/10 "2020-10-01T17:43:55Z")

</div>

is fullscreen a viable option then?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 1, 2020, 5:46pm UTC](https://forum.babylonjs.com/t/video-dome-with-webrtc-streaming-video/14560/11 "2020-10-01T17:46:46Z")

</div>

well tell me what you want then?