Can I use video inside Babylon GUI system?

Questions
1

I want to display a video with audio inside a Babylon GUI container. Is that possible? Thanks in advance

2

Bumping @Deltakosh

3

Technically it is feasible but we do not have a control for it

1 Like
4

@Deltakosh thank you. Is there a way to somehow pipe the render output of a HTML video element to the GUI image, on a lower level (sorry I lack knowledge to describe it better).

5

You can set the picture of a GUI image with guiimage.domImage = val where val is a HTMLImageElement.

So I guess you can read the texture data from a VideoTexture (or a html video) each frame (in scene.onBeforeRenderObservable) and make a HTMLImageElement from it. I’m not sure of the perf, however…

1 Like
6

We will need to update the texture on a per frame basis

1 Like
7

Thank you @Evgeni_Popov. Yes I also assume performance may be poor. Anyway, having a control for video would make the GUI more complete. Not complaining though, BJS is a great tool, recently discovered and still impressed.

8

You still have the VideoTexture class available: you should be able to emulate what you want to do with it (?)

9

@Evgeni_Popov thanks, yes, it does the job pretty nice.

10

Hey, I’ve been struggling with this!

I’d like to have anchored video in the corner of the screen as 2D GUI.
I’ve set up a playground for myself to try to figure out how to implement what’s been suggested above in the thread by @Evgeni_Popov.
This is my playground: https://playground.babylonjs.com/#XCPP9Y#5391

Currently, the video is playing and is attached to the ground (via material). My goal is to make it come up on the “BABYLON.GUI.Image” element that’s anchored to the top right corner of the screen. This element is currently displaying a grass texture.

I can’t quite figure out how to create a “HTMLImageElement” properly. I guess the reading from VideoTexture part is achieved with “videoTex.getInternalTexture()”, but I still am unable to apply that to the image.domImage.

The alternative of having a 3D object in front of the camera doesn’t work well for my project, so I’d really appreciate if someone with more experience can help with this.

11

The easiest way I can think of would be to have an additional camera that would display a simple plane. The camera would not move and the plane would be visible only by this camera. This plane would show the video, something like:

https://playground.babylonjs.com/#XCPP9Y#5393

You would probably need a bit of calculation to always have the plane at the same location in screen whatever the screen size (using an orthographic camera may ease the calculation), but I think it’s the fastest way of doing it given there’s no video GUI element.

12

Heya,
I realise that the volume of the video is on max. It’s extremely loud. Here is my playground: (earplugs warning)
https://playground.babylonjs.com/#XCPP9Y#5588

is there a way to control the audio?

13

You can do it through the HTMLVideoElement provided by the VideoTexture: videoTex.volume = 0.5 for eg.

14

I had some success with this by copying the ImageGui class and editing to support video

It was hacky and required calling videoGuiInstance._markDirty() on every frame but the code’s here as a starting point

next time I’d personally use plain html video and css

2 Likes