Render VideoPlayer inside UI component

Get Help
3

First, note you have a canvas tag, which is everything Lightning is doing, and a video tag for video playback. These both exist in the HTML document. You need to move the video tag around on the screen. Make sure it is position: absolute and then you can change the x, y position to match the Lightning component which is focused (and the width + height if needed).

this._videoElement = document.getElementById('videoTag');
// Set these to match the x, y, w, h of the Lightning component
this._videoElement.style.top = '0px';
this._videoElement.style.left = '0px';
this._videoElement.style.width = '0px';
this._videoElement.style.height = '0px';

If the video tag is behind the canvas (you can hear it playing but can’t see it) - you need to cut a hole in the canvas tag using the HoleShader (src/renderer/webgl/shaders/HoleShader.mjs).

On the App component:

shader: { type: HoleShader, x: 0, y: 0, w: 0, h: 0 }

Then you can change this.shader x,y,w,h values to match the Lightning component as well. You also need to turn on this.rtt = true when HoleShader is on.

LMK if you need any more info.

1 Like