Video overlays

You can add an overlay or filter to the meeting videos. You can add them to the individual participant videos or to the entire meeting grid at once. You would generally need to listen to the meeting events, such as roomMessage, to determine when to show an overlay, or you could build your own custom logic around this.

🚧

Disables context menu

Adding any overlay disables the context menu (right click) on the video stream(s).

Meeting grid overlay

You can add overlay to the entire meeting grid, which is the area including all the participant videos. Generally it will be all the area between the header and the control bar.

Use meeting.grid.setOverlay(ReactNode) to set overlay on top of the entire video grid. This can be useful for use cases like enabling reactions etc. Simply pass either a React component or a HTML string to the function. Remember to set the width and height to 100% to occupy the full size of the grid.

meeting.grid.setOverlay('<canvas id="gratification" style={{width:"100%",height:"100%"}} />');

To remove, you can simply set the overlay to null.

meeting.grid.setOverlay(null);

Participant video overlay

You can also add overlays to individual participants. For this, you need to find the participant using their id or something similar, and then you can do participant.setOverlay(ReactNode) where you pass either a React Component or HTML string to the function.

const targetPeer = meeting.participants.find((p) => p.id === peerId);
// find a peer you want to overlay
if(targetPeer){
       targetPeer.setOverlay('<canvas id="gratification" style={{width:"100%",height:"100%"}} />');
}

To remove, you can simply set the overlay to null.

targetPeer.setOverlay(null);