Highlighting the Speaker
We can expand our previous step, which was about Video Overlays, to highlight who is currently speaking in the room. Please follow that guide first, since this one builds on top of it.


Frontend
In Video.js we had a line defining the style of the overlay that was showing up on mouse hover. We are going to add an additional overlay to show who is speaking, so we also need an additional dedicated style:
// Style and position of the overlay
let [overlayStyle, setOverlayStyle] = useState({ display: 'none' })
let [speakerOverlayStyle, setSpeakerOverlayStyle] = useState({ display: 'none' }) // add this
Similarly, we are going to add the additional overlay to our template. In the template, add:
<div style={overlayStyle}></div>
<div style={speakerOverlayStyle}></div> {/* add this */}
We want our overlay to show as a yellow rectangle. Let us add a function, updateSpeakerOverlay, right before the layout. This function will take as parameters the id of a member, and whether it must show as currently speaking. It then finds the position of the overlay and updates its style.
function updateSpeakerOverlay(memberId, speaking) {
if (!currLayout.current)
return
const layer = currLayout.current.layers.find(lyr => lyr.member_id === memberId)
if (layer && speaking) {
setSpeakerOverlayStyle({
display: 'block',
position: 'absolute',
overflow: 'hidden',
top: layer.y + '%',
left: layer.x + '%',
width: layer.width + '%',
height: layer.height + '%',
zIndex: 1,
background: 'transparent',
border: '5px solid yellow',
pointerEvents: 'none'
})
} else {
setSpeakerOverlayStyle({display: 'none'})
}
}
Finally, we must call updateSpeakerOverlay whenever a participant starts or stops talking. We can do that by listening to an additional room event, right before room.join
:
room.on('member.talking', (e) => {
// Update the UI: the participant with id `e.member.id` is talking iff e.member.talking == true
updateSpeakerOverlay(e.member.id, e.member.talking)
})
The talking participant will now get highlighted.
Wrap up
We have showed step by step how to use overlays to highlight who is the speaking participant.
You can find the complete application on CodeSandbox, and on GitHub in the branch "extras":
- Backend (CodeSandbox): https://codesandbox.io/s/8gv4h
- Frontend (CodeSandbox): https://codesandbox.io/s/i4h64
- GitHub: https://github.com/signalwire/browser-videoconf-full-react/tree/extras
Updated about 1 month ago