Dans cet article de blog, nous allons mettre en œuvre un détecteur d'intensité sonore qui pourrait être utilisé pour éviter l'une des situations les plus courantes qui se sont produites pendant la pandémie :

Hé, vous êtes en sourdine.

Le code est disponible sur GitHub.

Concepts

L'API Video de Vonage comporte trois concepts principaux : session, éditeur et abonné. Vous pouvez considérer une session comme une salle virtuelle dans laquelle les gens peuvent parler (publier de l'audio et/ou de la vidéo) et s'écouter (s'abonner) les uns les autres. Concentrons-nous sur le concept d éditeur concept. Un éditeur représente la vue d'une vidéo que vous publiez :

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

L'objet publisher est composé d'un audioTrack et d'un videoTrack. Il est possible de contrôler le niveau audio de l'objet audioTrack en utilisant un écouteur sur l'objet publisher sur l'objet . L'événement est appelé audioLevelUpdated. L'événement audioLevelUpdate envoie périodiquement le niveau audio de l'éditeur si le microphone est actif.

Si l'éditeur a coupé son microphone à l'aide de la fonction publishAudio(false) l'événement se déclenchera avec audioLevel égal à 0. Puisque notre but est de capturer l'événement audioLevel lorsque le microphone est coupé, nous devons trouver un moyen d'obtenir le niveau audio même lorsque le microphone est coupé.

L'idée est de créer un AudioContext sur le audioDevice utilisé par l'éditeur. Il est possible d'obtenir le deviceId de l'éditeur en utilisant getAudioSource. Ensuite, nous devons obtenir un MediaTrack en utilisant getUserMedia:

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

Un AudioContext est le premier élément dont nous avons besoin pour traiter un nœud audio. L'étape suivante consiste à connecter l'élément audioStream à l'élément AudioContext et de créer un analyseur en utilisant createAnalyser:

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

source.connect(analyser);

Détecter l'intensité sonore

En utilisant le niveau audio donné par l'analyseur, nous pouvons détecter si l'utilisateur parle. Si c'est le cas, l'application doit afficher un message sur l'interface utilisateur pour avertir l'utilisateur qu'il est en train de parler alors que son microphone est coupé.

L'exemple de code affiche un indicateur de sourdine lorsqu'il détecte que le niveau audio est supérieur à un seuil spécifique. Une fois le seuil atteint, il active l'indicateur de sourdine et désactive le détecteur pendant un certain temps (par exemple 5 secondes). Ensuite, le délai masque l'indicateur et réactive le détecteur :

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

Conclusion

Dans cet article de blog, nous avons expliqué comment créer un détecteur de loudness qui peut être intégré à votre plateforme vidéo pour améliorer l'expérience utilisateur. C'est à votre application de décider comment réagir à l'événement. Elle peut afficher un simple message sur le frontend, ouvrir un message de toast ou jouer une alerte audio pour l'utilisateur en sourdine.

Exemple de code