Nesta postagem do blog, vamos implementar um detector de volume que poderia ser usado para evitar uma das situações mais comuns que ocorreram durante a pandemia:

Ei, você está com o microfone desligado.

O código está disponível no GitHub.

Concepts

A Video API da Vonage tem três conceitos principais: sessão, emissor e assinante. Você pode pensar em uma sessão como uma sala virtual na qual as pessoas podem falar (transmitir áudio e/ou vídeo) e ouvir (assinar) umas às outras. Vamos nos concentrar no conceito de . Um emissor representa a exibição de um Video que você publica:

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

O publisher objeto é composto por um audioTrack e um videoTrack. É possível monitorar o nível de áudio do audioTrack usando um ouvinte no publisher objeto. O evento é chamado audioLevelUpdated. O audioLevelUpdate evento dispacha periodicamente o nível de áudio do publisher, caso o microfone esteja ativo.

Se o Editor tiver silenciado seu microfone usando a publishAudio(false) função, o evento será disparado com audioLevel valor igual a 0. Como nosso objetivo é detectar audioLevel quando o microfone estiver silenciado, precisamos encontrar uma maneira de obter o nível de áudio mesmo quando o microfone estiver silenciado.

A ideia é criar um AudioContext no audioDevice usado pelo Publisher. É possível obter o deviceId do Publisher usando getAudioSource. Em seguida, precisamos obter um MediaTrack usando getUserMedia:

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

Um AudioContext é o primeiro elemento de que precisamos para processar um nó de áudio. O próximo passo é conectar o audioStream ao AudioContext e criar um Analizador usando createAnalyser:

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

source.connect(analyser);

Detectar intensidade sonora

Usando o nível de áudio fornecido pelo analisador, podemos detectar se o usuário está falando. Se for o caso, o aplicativo deve exibir uma mensagem na interface do usuário alertando o usuário de que ele está falando com o microfone silenciado.

O código de exemplo exibe um indicador de mudo quando detecta que o nível de áudio ultrapassa um limite específico. Assim que o limite é atingido, ele aciona o indicador de mudo e desativa o detector por um determinado período (por exemplo, 5 segundos). Depois disso, o tempo limite oculta o indicador e reativa o 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();
}

Conclusão

Nesta postagem do blog, explicamos como criar um detector de volume que pode ser integrado à sua plataforma de Video para melhorar a experiência do usuário. Cabe ao seu aplicativo decidir como reagir ao evento. Ele pode exibir uma mensagem simples no front-end, abrir uma notificação pop-up ou reproduzir um alerta sonoro para o usuário cujo áudio esteja silenciado.

Exemplo de código