En esta entrada de blog, vamos a implementar un detector de sonoridad que podría utilizarse para evitar una de las situaciones más comunes que se produjeron durante la pandemia:

Oye, estás mudo.

El código está disponible en GitHub.

Concepts

La Video API de Vonage tiene tres conceptos principales: sesión, editor y suscriptor. Puedes pensar en una sesión como una sala virtual en la que las personas pueden hablar (publicar audio y/o video) y escucharse (suscribirse) unas a otras. Centrémonos en el editor concepto. Un editor representa la vista de un Video que usted publica:

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

El objeto publisher se compone de un audioTrack y un videoTrack. Es posible monitorizar el nivel de audio del objeto audioTrack mediante una escucha en el objeto publisher objeto. El evento se llama audioLevelUpdated. El evento audioLevelUpdate envía periódicamente el nivel de audio del editor si el micrófono está activo.

Si el Editor ha silenciado su micrófono mediante la función publishAudio(false) el evento se disparará con audioLevel igual a 0. Dado que nuestro objetivo es capturar el evento audioLevel cuando el micrófono está silenciado, tenemos que encontrar una manera de obtener el nivel de audio, incluso cuando el micrófono está silenciado.

La idea es crear un AudioContext en el audioDevice utilizado por el Editor. Es posible obtener el deviceId del Publisher utilizando getAudioSource. Entonces, necesitamos obtener un MediaTrack utilizando getUserMedia:

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

Un AudioContext es el primer elemento que necesitamos para procesar un Nodo de Audio. El siguiente paso es conectar el audioStream al AudioContext y crear un Analizador usando createAnalyser:

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

source.connect(analyser);

Detectar sonoridad

Utilizando el nivel de audio proporcionado por el analizador, podemos detectar si el usuario está hablando. Si es así, la aplicación debería mostrar un mensaje en la interfaz de usuario alertando al usuario de que está hablando con el micrófono silenciado.

El código de ejemplo muestra un indicador de silencio cuando detecta que el nivel de audio supera un umbral específico. Una vez alcanzado el umbral, enciende el indicador de silencio y apaga el detector durante un tiempo determinado (por ejemplo, 5 segundos). Después, el tiempo de espera oculta el indicador y vuelve a activar el detector:

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

Conclusión

En esta entrada del blog explicamos cómo crear un detector de sonoridad que puede integrarse en tu plataforma de Video para mejorar la experiencia del usuario. Depende de tu aplicación decidir cómo reaccionar ante el evento. Puede mostrar un simple mensaje en el frontend, abrir un mensaje de brindis o reproducir una alerta de audio para el usuario silenciado.

Ejemplo de código