In diesem Blogbeitrag werden wir einen Lautheitsdetektor implementieren, mit dem eine der häufigsten Situationen während der Pandemie vermieden werden kann:

Hey, du bist stumm.

Der Code ist auf GitHub verfügbar.

Concepts

Vonage Video API besteht aus drei Hauptkonzepten: Sitzung, Herausgeber und Abonnent. Sie können sich eine Sitzung als einen virtuellen Raum vorstellen, in dem Menschen miteinander sprechen (Audio und/oder Video veröffentlichen) und einander zuhören (abonnieren) können. Konzentrieren wir uns auf den Herausgeber Konzept. Ein Verleger stellt die Ansicht eines Videos dar, das Sie veröffentlichen:

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

Das publisher Objekt besteht aus einem audioTrack und einem videoTrack. Es ist möglich, den Audiopegel des audioTrack mit Hilfe eines Hörers auf dem publisher Objekt zu überwachen. Das Ereignis wird als audioLevelUpdated. Das Ereignis audioLevelUpdate sendet periodisch den Audiopegel des Herausgebers, wenn das Mikrofon aktiv ist.

Wenn der Publisher sein Mikrofon mit der Funktion publishAudio(false) Funktion stummgeschaltet hat, wird das Ereignis mit audioLevel gleich 0. Da unser Ziel ist, das Ereignis audioLevel wenn das Mikrofon stummgeschaltet ist, müssen wir einen Weg finden, den Audiopegel auch dann zu erhalten, wenn das Mikrofon stummgeschaltet ist.

Die Idee ist, eine AudioContext auf die audioDevice der vom Publisher verwendet wird. Es ist möglich, die deviceId des Publishers mit getAudioSource. Dann müssen wir eine zusätzliche MediaTrack mit getUserMedia:

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

Ein AudioContext ist das erste Element, das wir benötigen, um einen Audioknoten zu verarbeiten. Der nächste Schritt ist die Verbindung des audioStream mit dem AudioContext zu verbinden und einen Analyser zu erstellen mit createAnalyser:

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

source.connect(analyser);

Lautheit erkennen

Anhand des vom Analysator ermittelten Audiopegels können wir erkennen, ob der Benutzer spricht. Ist dies der Fall, sollte die Anwendung eine Meldung auf der Benutzeroberfläche anzeigen, die den Benutzer darauf hinweist, dass er mit stummgeschaltetem Mikrofon spricht.

Der Beispielcode zeigt eine Stummschaltanzeige an, wenn er feststellt, dass der Audiopegel einen bestimmten Schwellenwert überschreitet. Sobald der Schwellenwert erreicht ist, schaltet er die Stummschaltanzeige ein und schaltet den Detektor für eine bestimmte Zeit (z. B. 5 Sekunden) aus. Danach wird die Anzeige durch die Zeitüberschreitung ausgeblendet und der Detektor wird wieder aktiviert:

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

Schlussfolgerung

In diesem Blogbeitrag haben wir erklärt, wie Sie einen Lautheitsdetektor erstellen, der in Ihre Videoplattform integriert werden kann, um das Nutzererlebnis zu verbessern. Es liegt an Ihrer Anwendung zu entscheiden, wie sie auf das Ereignis reagieren soll. Sie kann eine einfache Nachricht auf dem Frontend anzeigen, eine Toast-Nachricht öffnen oder eine Audiowarnung für den stummgeschalteten Benutzer abspielen.

Code-Beispiel