Amplify MediaStreamTrack (audio) before stream with webrtc

Question

I use getAudioTracks() to get the audio from a video element. Then I need to amplify (increase volume) of this audioTrack before I add it to a canvas with addTrack() and stream both away with webrtc.

Is there a way to do this on the client side with javascript?

Answer 1

I made up a solution. For anyone that needs the same thing :

            // supposing we have the getUserMedia stream and a canvas
            // we want to stream the canvas content and the
            // amplified audio from user's microphone

            var s = canvas.captureStream();

            var context = new AudioContext(); 

            var gainNode = context.createGain();
            gainNode.gain.value = 1;

            // compress to avoid clipping
            var compressor = context.createDynamicsCompressor();
            compressor.threshold.value = -30;
            compressor.knee.value = 40;
            compressor.ratio.value = 4;
            compressor.reduction.value = -10;
            compressor.attack.value = 0;
            compressor.release.value = 0.25;

            var destination = context.createMediaStreamDestination();

            var input = context.createMediaStreamSource(stream); 

            input.connect(compressor); 
            compressor.connect(gainNode); 
            gainNode.connect( destination); 

            var audioTracks = destination.stream.getAudioTracks();

            // use a slider to alter the value of amplification dynamically
            var rangeElement = document.getElementById("amplifierSlider"); 
            rangeElement .addEventListener("input", function() {
                gainNode.gain.value = parseFloat(rangeElement .value); 
            }, false); 

            for (var i=0; i < audioTracks.length; i++) {  
                s.addTrack(audioTracks[i]);   
            } 

            // stream the canvas with the added audio tracks

https://jsfiddle.net/Thanos_Sar/Lt00nr8g/