WebRTC - 如何调整视频流的麦克风音量？

Question

我想在使用2个视频流的WebRTC聊天程序中调整麦克风的音量。是否可以修改麦克风的增益？如果可以，我如何对我使用的以下视频流进行调整？

/*********************** video call ***************************/
var localStream;

var localVideo = document.getElementById("localVideo");
var remoteVideo = document.getElementById("remoteVideo");
var callButton = document.getElementById("callButton");

var inputLevelSelector = document.getElementById('mic-volume');
var outputLevelSelector = document.getElementById('speaker-volume');
inputLevelSelector.addEventListener('change', changeMicrophoneLevel);
outputLevelSelector.addEventListener('change', changeSpeakerLevel);

callButton.disabled = true;
callButton.onclick = call;

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({
        audio: true,
        video: true
    }, gotStream, //note that we are adding both audio and video
    function (error) {
        console.log(error);
    });

var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var SessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
var pc = new RTCPeerConnection({
    "iceServers": []
});

function gotStream(stream) {
    // localVideo.src = window.URL.createObjectURL(stream); // DEPRECATED
    localVideo.srcObject = stream; // UPDATED
    localStream = stream;
    callButton.disabled = false;
    pc.addStream(stream);
}

pc.onicecandidate = function (event) {
    console.log(event);
    if (!event || !event.candidate) {
        return;
    } else {
        socket.emit("video call", {
            type: "iceCandidate",
            "candidate": event.candidate
        });
    }
};

var remoteStream;
pc.onaddstream = function (event) {
    remoteStream = event.stream;
    var remoteVideo = document.getElementById("remoteVideo");
    // remoteVideo.src = window.URL.createObjectURL(event.stream); // DEPRECATED
    remoteVideo.srcObject = event.stream; // UPDATED
    remoteVideo.play();
};

请注意，我是新手，所以不要紧张! :)

Answer 1

下面我已经做了一个实施的帖子，我已经在评论中分享。这是同样的设置，但包括你的代码。

你首先从Web Audio API中创建你的节点。因为你想操纵流的音量，你需要一个...。MediaStreamAudioSourceNode, a MediaStreamAudioDestinationNode 和a GainNode. 该 MediaStreamAudioSourceNode 是流的入口点。在这里注入，我们就可以通过增益来连接它。流将通过 GainNode 其中音量将被控制，然后传递给 MediaStreamAudioDestinationNode 你可以在你的RTC客户端中再次使用该流。

从那里使用从你从 MediaStreamAudioDestinationNode.stream 财产。

编辑。

原来是... MediaStreamAudioDestinationNode.stream 是一个 MediaStream 对象，只有一个音频轨道。所以视频已经从流中移除，必须重新加入。

因此，当你能够访问流时，从流中获取视频轨道并将其存储在一个变量中。然后在通过Web Audio API将流传过来后，将视频轨道与经过Web Audio API的音频轨道连接起来。GainNode.

var inputLevelSelector = document.getElementById('mic-volume');

// Renamed the variable after your comment.
var peerConnection = new RTCPeerConnection({
    "iceServers": []
});

function gotStream(stream) {

  // Get the videoTracks from the stream.
  const videoTracks = stream.getVideoTracks();

  /**
   * Create a new audio context and build a stream source,
   * stream destination and a gain node. Pass the stream into 
   * the mediaStreamSource so we can use it in the Web Audio API.
   */
  const context = new AudioContext();
  const mediaStreamSource = context.createMediaStreamSource(stream);
  const mediaStreamDestination = context.createMediaStreamDestination();
  const gainNode = context.createGain();

  /**
   * Connect the stream to the gainNode so that all audio
   * passes through the gain and can be controlled by it.
   * Then pass the stream from the gain to the mediaStreamDestination
   * which can pass it back to the RTC client.
   */
  mediaStreamSource.connect(gainNode);
  gainNode.connect(mediaStreamDestination);

  /**
   * Change the gain levels on the input selector.
   */
  inputLevelSelector.addEventListener('input', event => {
    gainNode.gain.value = event.target.value;
  });

  /**
   * The mediaStreamDestination.stream outputs a MediaStream object
   * containing a single AudioMediaStreamTrack. Add the video track
   * to the new stream to rejoin the video with the controlled audio.
   */
  const controlledStream = mediaStreamDestination.stream;
  for (const videoTrack of videoTracks) {
    controlledStream.addTrack(videoTrack);
  }

  /**
   * Use the stream that went through the gainNode. This
   * is the same stream but with altered input volume levels.
   */
  localVideo.srcObject = controlledStream;
  localStream = controlledStream;
  peerConnection.addStream(controlledStream);
  callButton.disabled = false;

}