Skip to main content

Highlighting the Speaker

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 First steps 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 participants in your room, you should listen to the following events to update your own list:

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

Or utilize the memberList.updated method to listen for any member changes.

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 that is integrated with the video. For integrating your custom graphics with the video, you need overlays; read more at the following pages from our Zoom Clone series:

Wrap up​

We have shown 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: