Rate this page:

How to visualize microphone activity

If you are embedding VoIP functionality into your web application, it's a good idea to show the 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 the user allowed access to the device. Since version 3.6.294 of the Web SDK, developers can access to the MediaStream object – it's available as the stream property of the MicAccessResult event.

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

HTML

HTML

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.