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.

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.

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