如何在 WebRTC 中设置音量？

Question

我想知道如何在 WebRTC 中设置音量。

我正在绘制这样的音频：

audio = document.createElement('audio');
audio.controls = true;
audio.autoplay = true;
audio.src = window.URL.createObjectURL(stream);
div.appendChild(audio);

我想制作我的自定义音频 UI。所以，我将使用 HTML 的滑动条。

<input type="range">

但是，我不知道 WebRTC 流中的设置卷。我该如何设置？

Answer 1

对于输出（扬声器）音频音量，您可以使用音频/视频元素的音量属性进行管理。

var audio = document.getElementById('audioId');
audio.volume = 0.9; // 0.0(Silent) -> 1 (Loudest)

您可以根据滑杆位置更改 audio.volume

要更改输入（麦克风）音量，WebRTC AudioTrack/MediaStream 中没有可用的直接方法。

我们可以使用WebAudio Api在 Stream/Track 级别处理音量，您可以将 WebAudio 输出连接到 PeerConnection，如下所示

var audioContext = new AudioContext()
var gainNode = audioContext.createGain(); 
navigator.mediaDevices.getUserMedia({audio:true})
.then((stream) => {
    console.log('got stream', stream);
    window.orginalStream = stream;
    return stream;
})
.then((stream) => {
    audioSource = audioContext.createMediaStreamSource(stream),
    audioDestination = audioContext.createMediaStreamDestination();
    audioSource.connect(gainNode);
    gainNode.connect(audioDestination);
    gainNode.gain.value = 1;
    window.localStream = audioDestination.stream;
    //audioElement.srcObject = window.localStream; //for playback
    //you can add this stream to pc object
    // pc.addStream(window.localStream);
})
.catch((err) => {
    console.error('Something wrong in capture stream', err);
})

现在我们可以使用以下功能轻松控制麦克风音量

function changeMicrophoneLevel(value) {
    if(value && value >= 0 && value <= 2) {
        gainNode.gain.value = value;
    }
}

有关更多信息，请查看我的演示