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.

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.

• javascript
• jquery
• webrtc

• 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). – apsillers Commented Jun 5, 2013 at 15:08
• 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. – liteshade06 Commented Jun 5, 2013 at 16:41
• 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!) – Sam Dutton Commented Jun 6, 2013 at 13:00
• This project can apparently do it : github.com/HenrikJoreteg/mediastream-gain but I've been unable to get it to work on chrome 30 ... – Boutran Commented Oct 26, 2013 at 22:12

2 Answers 2

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.

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