Rate this page:

How to Visualize Microphone Activity

If you are embedding VoIP functionality into your web application then it's a good idea to show end user some feedback from the system about his audio settings, especially related to his microphone / audio recording device. Combining the power of WebRTC , HTML5 and Web we can visualize audio stream coming from microphone after user allowed access to the device. Since version 3.6.294 of the Web SDK, developers can access to MediaStream object - it's available as stream property of MicAccessResult event.

In our example we will use Canvas to render microphone activity bar:

<canvas id="mic_activity" style="border: solid 1px #ccc;" width="30" height="150"></canvas>

and the following JavaScript code:

Usage sample

Usage sample

That's it! After user allows access to his microphone MediaStream will be passed to createMicActivityIndicator function that uses WebAudio and Canvas for visualization. You can grab full code example at Gist.