在使用 webrtc 进行流式传输之前放大 MediaStreamTrack（音频）

Question

我使用getAudioTracks() 从视频元素中获取音频。然后我需要先放大（增加音量）这个 audioTrack，然后再使用 addTrack() 将其添加到画布并使用 webrtc 流式传输。

有没有办法在客户端使用 javascript 做到这一点？

Answer 1

我想出了一个解决方案。对于任何需要同样东西的人：

            // 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/