[英]Amplify MediaStreamTrack (audio) before stream with webrtc
I use getAudioTracks()
to get the audio from a video element. 我使用
getAudioTracks()
从视频元素获取音频。 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. 然后,我需要先放大(增加音量)此audioTrack,然后再使用
addTrack()
将其添加到画布中,并使用addTrack()
将其流式传输出去。
Is there a way to do this on the client side with javascript? 有没有办法用javascript在客户端执行此操作?
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/ https://jsfiddle.net/Thanos_Sar/Lt00nr8g/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.