在使用 webrtc 流式传输之前放大 MediaStreamTrack(音频)
Amplify MediaStreamTrack (audio) before stream with webrtc
我使用 getAudioTracks()
从视频元素中获取音频。然后我需要放大(增加音量)这个 audioTrack,然后再用 addTrack()
将它添加到 canvas 并用 webrtc.
流式传输。
有没有办法在客户端用 javascript 做到这一点?
我制定了一个解决方案。对于任何需要同样东西的人:
// 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
我使用 getAudioTracks()
从视频元素中获取音频。然后我需要放大(增加音量)这个 audioTrack,然后再用 addTrack()
将它添加到 canvas 并用 webrtc.
有没有办法在客户端用 javascript 做到这一点?
我制定了一个解决方案。对于任何需要同样东西的人:
// 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