ビデオ通話で話している人（アクティブスピーカー）を検知しよう！

こんにちは、あるいは、こんばんは。
今回はビデオ通話でのアクティブスピーカーの表示についてお話します！

前提

agoraの使用

説明

どのように検知すればいいのか、、
WebSDKの機能「ボリュームインジケータ」を使用します☆彡

こちらを設定することで、
会話中の全てのユーザーの話す音量を2秒ごとに報告してくれます。

音量はの範囲は0～100までの整数で、
公式では60を超えるユーザーが話していると説明されていますが、
使用している感覚としてはもう少し低め（55くらい）でもいいかな。と思います。

それでは設定方法ですが、
まずはボリュームインジケータの有効化を行います！
タイミングとしては、ビデオ通話の設定が一通り完了したあとに以下を実施します。

client.enableAudioVolumeIndicator();

これだけです。

あとは、以下を設定すれば、2秒ごとに音量を取得してくれます。

client.on("volume-indicator", volumes => {
  volumes.forEach((volume, index) => {
    // volume.level：0～100の音量数値
  });
})

例えば、以下のように記載することで音量ごとの処理を表現できます！

client.on("volume-indicator", volumes => {
  volumes.forEach((volume, index) => {
    if (volume.level >= 55) {
    	// 音量55以上の場合の処理を記載
    }
  });
})

これで、アイコンの枠のデザインを変更することや、
手を挙げているマークを表示するなどいろいろできます！

会話中の音量をログに残しておいて誰が一番発言して、誰が一番静かだったかもわかっちゃいますね👀

今回は以上となります。
ありがとうございました！