How to Create a Loudness Detector Using Vonage Video API

In this blog post, we are going to implement a loudness detector that could be used to avoid one of the most common situations that happened during the pandemic:

“Hey, You Are Muted.”

The code is available on GitHub.

Concepts

The publisher object is composed of an audioTrack and a videoTrack. It's possible to monitor the audio level of the audioTrack using a listener on the publisher object. The event is called audioLevelUpdated. The audioLevelUpdate event periodically dispatches the audio level of the publisher if the microphone is active.

If the Publisher has muted their microphone using the publishAudio(false) function, the event will fire with audioLevel equal to 0. Since our goal is to catch the audioLevel when the microphone is muted, we need to find a way to get the audio level even when the microphone is muted.

The idea is to create an AudioContext on the audioDevice used by the Publisher. It's possible to get the deviceId of the Publisher using getAudioSource. Then, we need to get an additional MediaTrack using getUserMedia:

An AudioContext is the first element that we need to process an Audio Node. The next step is to connect the audioStream to the AudioContext and create an Analyser using createAnalyser:

Detect Loudness

The sample code is displaying a mute indicator when it detects that the audio level is beyond a specific threshold. Once the threshold is reached, it turns on the mute indicator and turns off the detector for a certain amount of time (for example 5 seconds). After that, the timeout hides the indicator and activates the detector again:

Conclusion

Code sample

Developer content from the team at Vonage, including posts on our Java, Node.js, Python, DotNet, Ruby and Go SDKs