WebRTC: Is it possible to control the microphone and volume levels

Question

I am working on a demo site which includes a slide-out widget that allows a user to place a call.

I am using the SIPml5 tool along with the webrtc2sip back end for handling the call. That part is all set up and properly working. So now I am looking at seeing if I can control the microphone and volume levels using sliders in the widget. Is this even possible? I look everywhere online and haven't had much luck.

I did find a couple sites that showed me how I can control the volume of the audio tag within the jQuery slider code. So I tried setting it up like the code below:

$(function() {
        $( "#slider-spkr" ).slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 100,
          value: 60,
          slide: function( event, ui ) {
            var value = $("#slider-spkr").slider("value");
            document.getElementById("audio_remote").volume = (value / 100);
          },
          change: function() {
            var value = $("#slider-spkr").slider("value");
            document.getElementById("audio_remote").volume = (value / 100);
          }
        });
    });

Unfortunately, this isn't working either. So I'm not sure if I am allowed to do this when using SIPml5, or if my jQuery code needs adjusted.

Has anyone else had any luck with adding microphone/volume controls? Thanks for your help.

Solution 1

Afaik it's impossible to adjust microphone volume. But you can switch it on/off by using stream api:

function toggleMic(stream) { // stream is your local WebRTC stream
  var audioTracks = stream.getAudioTracks();
  for (var i = 0, l = audioTracks.length; i < l; i++) {
    audioTracks[i].enabled = !audioTracks[i].enabled;
  }
}

This code is for native webrtc api, not sipML5. It seems they haven't implemented it yet. Here is not so clear receipt for it.

Solution 2

Well it is possible, but currently only in Chrome and with some assumptions. I am not the auther, you can find inspiration for this code in this open-source library (SimpleWebRtc).

navigator.webkitGetUserMedia(constraints, 
    function(webRTCStream){
        var context = new window.AudioContext();
        var microphone = context.createMediaStreamSource(webRTCStream);
        var gainFilter = context.createGain();
        var destination = context.createMediaStreamDestination();
        var outputStream = destination.stream;
        microphone.connect(gainFilter);
        gainFilter.connect(destination);
        var filteredTrack = outputStream.getAudioTracks()[0];
        webRTCStream.addTrack(filteredTrack);
        var originalTrack = webRTCStream.getAudioTracks()[0];
        webRTCStream.removeTrack(originalTrack);
    },
    function(err) {
        console.log("The following error occured: " + err);
      }
 );

The trick is to modify the stream and then replace the audio track of current stream with audio track of modified stream (taken from MediaStreamDestination stream).

DISCLAIMER:

This doesn't work in FireFox as of version 35, since they merely didn't implement MediaStream.addTrack/removeTrack. I use this check currently

  this.micVolumeIsSupported = function() {
    var MediaStream = window.webkitMediaStream || window.MediaStream;
    return !!MediaStream.prototype.addTrack && !!MediaStream.prototype.removeTrack;
  };
_gainSupported = this.micVolumeIsSupported();

This has a limitation in Chrome due to a bug with stopping stream with mixed up tracks. You might wish to restore these tracks before closing connection or on connection interruption;

this.restoreTracks = function(){
  if(_gainSupported && _tracksSubstituted){
    webRTCStream.addTrack(originalTrack);
    webRTCStream.removeTrack(filteredTrack);
    _tracksSubstituted = false;
  }
};

This works for me

Comments

[liteshade06]

Thanks again for the help. Luckily they were happy with just the ability of muting and un-muting the microphone.

[Kirill Slatin]

You might wish to track the FireFox issue on BugZilla. Feel free to vote for the feature implementation :) they don't seem to move fast with this essentials of webRtc.

[jesal]

It seems like this will disable the audioTrack if it's already enabled. This might be a better approach: if (!audioTracks[i].enabled) { audioTracks[i].enabled = true; }

[icanhazbroccoli]

@jesal: well, you're right — in terms of the consistency this approach sucks. I'd rather define a bool variable and toggle it's value, then assign all the audiotracks enabled attribute to this variable.

[Sagar Pilkhwal]

hi, any progress on this bug... is it possible as of today to get information about users system volume, increase decrease system volume ?

[Kirill Slatin]

@SagarPilkhwal, i don't believe system volume will ever be possible to be adjusted from browser. That's a security breach. However about audio level of the page which is discussed here, as far as I know Mozilla has advanced much lately in audio API and add/remove tracks are implemented

[Sagar Pilkhwal]

thanks, Also there is no way by which we can get system volume information by using javascript? Is that correct ?

[Kirill Slatin]

@SagarPilkhwal, you can read more here