javascript - 在使用 webrtc 流式传输之前放大 MediaStreamTrack(音频)

Question

我使用 getAudioTracks() 从视频元素中获取音频。然后我需要放大(增加音量)这个 audioTrack，然后用 addTrack() 将它添加到 Canvas 上，并用 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/