Skip to main content

Video Overlays

  • Updated

---title: Video Overlaysslug: /guides/video-overlayssidebar_position: 2x-custom: ported_from_readme: true---SignalWire renders the video of your room in the cloud. This means that everyone sees the same content, and you could have a virtually unlimited number of connected users: the network link between your computer and SignalWires server will only need to carry a single video stream, no matter what.To give your clients metadata about the position of the different video members within the cloud-rendered video stream, SignalWire APIs support the concept of _layers_. In a few words layers indicate, at any instant of time, the semantic content of each portion of the video stream.We can use this information for example to show the name of a member whenever the user hovers its mouse over it, and much more. In this demo app, we will just show how to display a selection indicator as follows:selection## FrontendWe will make all our changes to the

Make sure to set position: relative to the parent style: we will need it later when we will define the content of overlayStyle, because we want to position the overlay by using absolute coordinates which have to be relative to the parent stream element.Before that, we need to actually keep track of the layout object. Whenever the APIs send us one in a layout.changed event, we store the layout object with setCurrLayout:typescriptroom.on(layout.changed, async (e) => { currLayout.current = e.layout; // add this line onRoomUpdate({ layout: e.layout.name });});Next, we need to define a function that will take the current position of the mouse pointer and will update the coordinates and style of our overlay. We call it updateOverlay:typescriptfunction updateOverlay(e) { if (!currLayout) return; // Mouse coordinates relative to the video element, in percentage (0 to 100) const rect = document.getElementById(stream).getBoundingClientRect(); const x = (100 * (e.clientX - rect.left)) / rect.width; const y = (100 * (e.clientY - rect.top)) / rect.height; const layer = currLayout.current.layers.find( (lyr) => lyr.x < x && x < lyr.x + lyr.width && lyr.y < y && y < lyr.y + lyr.height ); if (layer && layer.reservation !== fullscreen) { setOverlayStyle({ display: block, position: absolute, overflow: hidden, top: layer.y + %, left: layer.x + %, width: layer.width + %, height: layer.height + %, zIndex: 1, background: #0d6efd38, backdropFilter: blur(10px), pointerEvents: none, }); } else { setOverlayStyle({ display: none }); }}The function includes some basic logic to check which of the layers is the one under the cursor, then applies its coordinates to the overlay. The parameter e is the parameter of a mouse event, which contains the coordinates of the pointer. If there are no layers under the cursor, we hide the overlay.Finally, we need to trigger updateOverlay. We do that during mouse events on the stream div, which should be updated like this:typescript
You can obtain more information about what is currently displayed within a given layer (for example, the memberId) by exploring the fields of the objects in the currLayout.layers array.You can find the complete application on CodeSandbox, and on GitHub in the branch extras:- Backend (CodeSandbox): - Frontend (CodeSandbox): - GitHub: