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