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.

Columbary

If the audio_remote element is an <audio> element, that should work. A few platforms (like iOS) explicitly disallow setting volume, however. As for setting mic loudness, I don't think that can be easily done -- perhaps you could use the new Web Audio API (in Chrome, soon FF). – Thalamus

You're right. I did some more testing, and the jQuery code I posted is now working for the volume. Not sure why it didn't work earlier. I'll take a look at the Web Audio API. Thanks. – Columbary

Volume has been proposed as a constraint: dev.w3.org/2011/webrtc/editor/…, state proposal here: dev.w3.org/2011/webrtc/editor/…. (I know this doesn't solve your problem or answer your question though!) – Reedbuck

This project can apparently do it : github.com/HenrikJoreteg/mediastream-gain but I've been unable to get it to work on chrome 30 ... – Monodrama

Answer 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.

Campanula

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

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; } – Algarroba

@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. – Campanula

Answer 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

Harmonium

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. – Harmonium

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

@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 – Harmonium

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

@SagarPilkhwal, you can read more here – Harmonium