caution

This page has been deprecated.

We've released a new version of pages with some improvements and smoother experience.

Here is the link of each SDK for this page.

• JS
• React
• React Native
• Android
• iOS
• Flutter

Speaker Indication

Speaker indication feature in VideoSDK let you know, which participant in a meeting is active speaker.

Whenever any participant speaks in meeting, speaker-changed event will trigger.

For example, the meeting is running with Alice and Bob. Whenever any of them speaks, speaker-changed event will trigger and return the speaker participantId.

We can access speaker-changed event through meeting object.

speaker-changed Event

JavaScript

meeting.on("speaker-changed", (activeSpeakerId) => {
  console.log("participantId", activeSpeakerId);
});

React

import { useMeeting } from "@videosdk.live/react-sdk";

/** useMeeting hooks events */
const {
  /** Methods */
} = useMeeting({
  onSpeakerChanged: (activeSpeakerId) => {
    console.log("participantId", activeSpeakerId);
  },
});

ReactNative

import { useMeeting } from "@videosdk.live/react-native-sdk";

/** useMeeting hooks events */
const {
  /** Methods */
} = useMeeting({
  onSpeakerChanged: (activeSpeakerId) => {
    console.log("participantId", activeSpeakerId);
  },
});

Android

COMING SOON!

IOS

/// Called when speaker is changed
/// - Parameter participantId: participant id of the speaker, nil when no one is speaking.
func onSpeakerChanged(participantId: String?) {

    // show indicator for active speaker
    if let participant = participants.first(where: { $0.id == participantId }),

        // show indication for active speaker
        // ex. show border color
        // cell.contentView.layer.borderColor = UIColor.blue.cgColor : UIColor.clear.cgColor
    }

    // hide indicator for others participants
    let otherParticipants = participants.filter { $0.id != participantId }
    for participant in otherParticipants {

        // ex. remove border color
        //cell.contentView.layer.borderColor = UIColor.clear.cgColor
    }
}

Flutter

meeting.on('speaker-changed', (activeSpeakerId) {
  print("participantId => $activeSpeakerId");
});