Detect Participants Who Are Speaking

JavaScript web application demonstrating how-to use isSpeaking method to display active participants in a video conference.

Detecting and highlighting active talkerDetecting and highlighting active talker

Detecting and highlighting active talker

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
  • Voice and video conferencing
  • Tracking active speaker
  • JavaScript

Getting Started

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);
  };

Demo


Did this page help you?