このブログ記事では、パンデミック中に最もよく起こった状況のひとつを回避するために使用できるラウドネス検出器を実装します：

ねえ、あなたはミュートされている.

コードはGitHubにあります。.

Concepts

Vonage Video APIには、セッション、パブリッシャー、サブスクライバーという3つのコンセプトがあります。セッションは、人々がお互いに話したり（音声やビデオを公開したり）、聞いたり（購読したり）できる仮想的な部屋と考えることができます。ここでは パブリッシャー概念に注目しましょう。パブリッシャーは、あなたが公開するビデオのビューを表します：

const publisher = OT.initPublisher("publisherContainer", 
{ publishAudio: true, publishVideo: true }, function(error) {
  if (error) {
    // The client cannot publish.
  } else {
    console.log('Publisher initialized.');
  }
});

オブジェクトは publisherオブジェクトは audioTrackと videoTrack.のオーディオ・レベルをモニターすることができる。 audioTrackオブジェクトのリスナーを使って publisherオブジェクトのこのイベントは audioLevelUpdated.この audioLevelUpdateイベントは定期的にパブリッシャーのオーディオレベルをディスパッチします。

パブリッシャーが publishAudio(false)関数を使用してマイクをミュートしている場合、イベントは audioLevelをキャッチすることが目的なので、マイクがミュートされていてもオーディオレベルを取得する方法を見つける必要があります。 audioLevelをキャッチすることなので、マイクがミュートされている場合でもオーディオレベルを取得する方法を見つける必要があります。

このアイデアは AudioContextを作成することです。 audioDeviceパブリッシャーによって使用されるパブリッシャーの deviceIdを使用してパブリッシャーの getAudioSource.次に、追加の MediaTrackを使用して getUserMedia:

const audioContext = new AudioContext();
const stream = await navigator.mediaDevices.getUserMedia({
     audio: {
       deviceId: selectedMicrophoneId,
  },
});

An AudioContextはオーディオ・ノードを処理するために必要な最初の要素です。次のステップは audioStreamを AudioContextに接続し createAnalyser:

const source = loudnessDetector.audioContext.createMediaStreamSource(
  loudnessDetector.stream
);
const analyser = loudnessDetector.audioContext.createAnalyser();

source.connect(analyser);

ラウドネスの検出

アナライザーで得られたオーディオレベルを使えば、ユーザーが話しているかどうかを検出できます。もしそうであれば、アプリケーションはUI上に、ユーザーがマイクをミュートして話していることを警告するメッセージを表示します。

サンプルコードは、音声レベルが特定の閾値を超えたことを検出すると、ミュートインジケータを表示します。閾値に達すると、消音インジケータが点灯し、一定時間（例えば5秒間）検 出器をオフにします。その後、タイムアウトによりインジケータが非表示になり、検出器が再び作動します：

if (!muteIndication && turnMuteIndicationOffTimer === -1) {
  this.turnLoudnessDetectorOff();
  turnMuteIndicationOffTimer = setTimeout(() => {
    // turn off the mute indicator and toggle the loudnessDetector
    this.turnMuteIndicationOff();
    this.turnLoudnessDetectorOn({
      selectedMicrophoneId,
      isAudioEnabled,
    });
  }, 5000);

  // turn loudness indicator ON
  muteIndication = true;
  this.toggleLoudnessDetector();
}

結論

このブログ記事では、ユーザー体験を向上させるためにVideoプラットフォームに統合できるラウドネス検出器を作成する方法を説明しました。イベントにどのように反応するかは、アプリケーション次第です。フロントエンドにシンプルなメッセージを表示したり、トーストメッセージを開いたり、ミュートされたユーザーに音声アラートを再生したりできます。

コードサンプル