CODEWITHSUNDEEP
javascriptaudiowebrtcmicrophonegetusermedia
Aaker
Aaker

Reputation: 39

Proper way to get the remote audio levels of a media stream in order to display audio levels visually?

Looking to do something very similar to the post below, but in the reverse direction, displaying the voice activity level of the inbound media stream from my remote party using webrtc. I was thinking it would be easy by just modifying code to flip it around or run it on the other media stream, but i have had no luck. Anyone doing this now or have any ideas?

Microphone activity level of WebRTC MediaStream

Upvotes: 2

Views: 4764

Answers (2)

xdumaine
xdumaine

Reputation: 10329

Currently, the best method to do this in a cross browser (Chrome, Firefox, Opera) way, is to get the audio levels of the stream locally and transmit them to the peer parallel to the stream, over an RTCDataChannel. This is the method used by SimpleWebRTC and at least a couple other apps.

SimpleWebRTC uses a helper library called hark that you can use standalone, to have volume events emitted for the stream. Then, you just have to send them over the data channel to the other peer, and have the peer display the volume according to those events. It's not the ideal solution, but it's a pretty good one.

There's more examples here regarding the use of hark in SimpleWebRTC. Psuedocode, since detailed examples are elsewhere:

  1. Get the stream
  2. Set up an audio monitor on the stream
  3. create a peer connection for the stream (or attach to incoming)
  4. Open a data channel (or get existing) for volume events
  5. on audio monitor volume events, emit the event on the data channel
  6. monitor the data channel for audio events, and use them to show peer volume

So, very pseudo:

getUserMedia(constraints, function (stream) {
   audioMonitor = new Hark(stream);
   connection = new PeerConnection(stream);
   dataChannel = connection.createDataChannel('hark');
   audioMonitor.on('volumeChange', function(volume) {
       dataChannel.send('volume', volume);
   });
   dataChannel.onMessage(function(label, data) {
      if (label == 'volume') {
          //use data to set css, etc to show volume level of peer
      }
   }); 
});

Upvotes: 1

Aaker
Aaker

Reputation: 39

The issue seems to be related to a Chrome Bug. Its documented and acknowledged by the chrome team, but doesn't have a short term fix planed based on the most recent comments.

https://code.google.com/p/chromium/issues/detail?can=2&q=121673&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&id=121673

more info on these related links...

visualize mediastream which is coming from a remote peer connection https://groups.google.com/forum/#!topic/sip_js/QE3EwXRi-5c

Upvotes: 1

Related Questions