# Get a MediaStream from a Babylon Camera?

**URL:** <https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431>\
**Category:** Questions\
**Created:** [December 25, 2018, 5:23pm UTC](https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431 "2018-12-25T17:23:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![benallfree](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/benallfree/32/238_2.png) [@benallfree](https://forum.babylonjs.com/u/benallfree)\
**Post date:** [December 25, 2018, 5:23pm UTC](https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431/1 "2018-12-25T17:23:52Z")

</div>

I would like to set up a camera in a scene and get an HTML5 `MediaStream` of it so I can stream out using WebRTC.

I know I can probably get the stream from the visible `<canvas>`, but what about an arbitrary Babylon camera? So for example if I wanted to stream from a fixed POV while players ran around?

Edit: I see there is support for multiple via `scene.activeCameras()` and I found [rendering a scene to a video](https://doc.babylonjs.com/how_to/render_scene_on_a_video), am I on the right track?

Edit 2: Ok just looked at the source of `VideoRecorder`, it calls `engine.getRenderingCanvas()` which I assume is the visible canvas. But I see that Camera has `outputRenderTarget`, so maybe there is a way to make a camera render to an off-screen canvas?

---

<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:** [December 26, 2018, 8:35am UTC](https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431/2 "2018-12-26T08:35:45Z")

</div>

Pinging @sebavan

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 26, 2018, 11:16am UTC](https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431/3 "2018-12-26T11:16:52Z")

</div>

Unfortunately I can not find anyway in the spec to stream a webgltexture.

Only canvases might be stream. this would then require 2 different canvases so 2 different engines without the ability to share resources between them breaking a bit everything.

[245894 - WebGL Shared Resources - chromium - Monorail](https://bugs.chromium.org/p/chromium/issues/detail?id=245894) which is closed as won t fix.

---

<div class="post-metadata">

**Author:** ![benallfree](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/benallfree/32/238_2.png) [@benallfree](https://forum.babylonjs.com/u/benallfree)\
**Post date:** [December 26, 2018, 3:33pm UTC](https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431/4 "2018-12-26T15:33:13Z")

</div>

Thanks @sebavan,

`DynamicTexture` keeps its own canvas. So if I set the `outputRenderTarget` on a camera to a `DynamicTexture`, would that cause the camera to render to a separate canvas? Then I could take that canvas and stream it?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 26, 2018, 3:46pm UTC](https://forum.babylonjs.com/t/get-a-mediastream-from-a-babylon-camera/431/5 "2018-12-26T15:46:06Z")

</div>

Nope, you can not render the scene to a separate canvas without dupplicating all the resources (engine, scene…) The canvas used in dynamicTexture is for a 2dContext injecting the info into Babylon (by copy)

The only way to share it would be to dump the content of the render target frame buffer to a separate picture that you would draw to a separate canvas. This is pretty expensive and you would probably not be able to reach real time.

Maybe you could try to draw each frame your shared camera to the canvas, share to webrtc, then draw the second camera on top of it. This way even if 2 renders happen (they would need to anyway), all the resources would be shared.
