NEWDolby Interactivity APIs are now the Dolby.io Communications APIs Learn More >
X

isSpeaking JavaScript Web Example

Sample implementation for JavaScript (Web) isSpeaking method to track which participant is speaking and add an outline to the speaking participant.

Overview

Keeping track of the active speaker and updating the UI accordingly is a common mechanism in conference applications. In this example, users can see who is speaking during a conference within a 3x3 grid. UI is updated using the isSpeaking method within the JavaScript SDK.

Features Tech Stack
  • JavaScript

Key concepts

The isSpeaking method accepts a conference participant and a callback function. The callback accepts a boolean value indicating the participant's current speaking status.

startVideoBtn.onclick = () => {
    // once the video has started, 
    // check if the current session participant is speaking every 5 milliseconds
    setInterval(() => {
      let participants = VoxeetSDK.conference.participants;

      for (let participant of participants) {
        VoxeetSDK.conference.isSpeaking(
          VoxeetSDK.conference.participants.get(participant[0]),
          (isSpeaking) => {
            console.log('The participant', participant[0], 'speaking status:', isSpeaking);
            if (isSpeaking) {
              // participant is speaking, update UI accordingly 
            } else if (!isSpeaking) {
              // participant is not speaking, update UI accordingly 
            }
          }
        );
      }
    }, 500);
  };

Did this page help you?