Highlighting who's Speaking

Using the SignalWire Video SDK, you can get information on who of the participants is currently speaking. You can use this information, for example, to highlight the participant in your user interface.

Prerequisites

We will assume that you are familiar with the process of setting up a room session. If not, first read our Getting Started with Video guide. It shows you how to set up a basic videoconference room using the SDK.

Getting Started

The Video SDK communicates information about who is currently speaking via events. The event we're interested in is member.talking. This event is generated whenever a member starts or stops talking, and the associated callbacks receive objects of the following type:

{
  room_session_id: string,
  room_id: string,
  member: {
    id: string,
    room_session_id: string,
    room_id: string,
    talking: boolean
  }
}

Take the following boilerplate for connecting to a room session:

const roomSession = new SignalWire.Video.RoomSession({
  token: '<YourRoomToken>',
  rootElement: document.getElementById('myVideoElement'),
  audio: true,
  video: true,
})

// You connect events here
roomSession.on('member.joined', (e) => {
  console.log(`${e.member.name} joined`)
})

roomSession.join()

We can add an event listener for member.talking as follows:

roomSession.on('member.talking', (e) => {
  console.log('Event: member.talking')
  const isCurrentlyTalking = e.member.talking
  const memberId = e.member.id
  // Update your UI: the participant with id `e.member.id` is talking iff e.member.talking == true
})

Note that to know the current list of participant in your room, you should listen to the following events to update your own list:

  • room.joined
  • member.joined
  • member.updated
  • member.left

Next steps

Now that you have listened to the appropriate events, you can either update your custom UI or indicate who is speaking in a way which is integrated with the video. For integrating your custo graphics with the video, you need overlays; read more at the following pages from our Zoom Clone series:

Wrap up

We have showed how to detect when any of the current members in a room are speaking. The strategy consists in listening to the member.talking event, which can be used to update an internal list of members.

For more resources, refer to:


Did this page help you?