控制 Firefox 中视频/音频流的音量增益答案

【问题标题】：Control volume gain for Video/Audio stream in Firefox控制 Firefox 中视频/音频流的音量增益
【发布时间】：2016-05-01 15:33:55
【问题描述】：

我正在尝试使用适用于 Firefox 的 MediaRecorder API 录制视频/音频文件。

当我使用网络音频 API 创建节点时（源 -> 增益 -> 目标）

录制文件的输出仅为音频，因为来自目标节点的返回流仅为音频流，请参阅本文档 https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioDestinationNode

关于在目标输出中获取音频/视频流以录制音频/视频而不仅仅是音频的任何建议。

    var mediastream;

    var ctx = new AudioContext();

    var mediaStreamSource = ctx.createMediaStreamSource(mediaStream); 

    var destination = ctx.createMediaStreamDestination();

    ObjectStore.VolumeGainNode = ctx.createGain();
    ObjectStore.VolumeGainNode.gain.value = 0.5;

    mediaStreamSource.connect(ObjectStore.VolumeGainNode);

    ObjectStore.VolumeGainNode.connect(destination);

    mediaStream = destination.stream;

【问题讨论】：

标签： firefox audio video-streaming web-mediarecorder

【解决方案1】：

您需要一个由 gUM 视频轨道和增益修改的音频轨道组成的流。

按照标准，Firefox 允许您使用 stream.addTrack 和 stream.removeTrack 修改流中的轨道，以及使用 new MediaStream([tracks]) 组合轨道外的新流。

这让您可以通过将 gUM 音轨替换为您的增益控制音轨来解决您的问题：

var constraints = { video: true, audio: true };

var start = () => navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => modifyGain(video.srcObject = stream, 0.5))
  .catch(e => console.error(e));

var modifyGain = (stream, gainValue) => {
    var audioTrack = stream.getAudioTracks()[0];
    var ctx = new AudioContext();
    var src = ctx.createMediaStreamSource(new MediaStream([audioTrack]));
    var dst = ctx.createMediaStreamDestination();
    var gainNode = ctx.createGain();
    gainNode.gain.value = gainValue;
    [src, gainNode, dst].reduce((a, b) => a && a.connect(b));
    stream.removeTrack(audioTrack);
    stream.addTrack(dst.stream.getAudioTracks()[0]);
};

这是小提琴（Firefox 44 或更高版本）：https://jsfiddle.net/7wd2z8rz/

再次使用 MediaRecorder：https://jsfiddle.net/j33xmkcq/

【讨论】：