使用 navigator.mediaDevices.getUserMedia 录制浏览器音频

Question

我正在录制来自麦克风的浏览器音频输入，并通过 websocket 将其发送到将流写入 .wav 文件的 nodeJs 服务。

我的问题是第一个录音很好，但任何后续录音听起来都很慢，速度大约是一半，因此无法使用。

如果我刷新浏览器，第一个记录再次工作，随后的记录速度变慢，这就是为什么我确定问题不在 nodeJs 服务中。

我的项目是一个 Angular 5 项目。

我已经在下面粘贴了我正在尝试的代码。

我正在使用 binary.js -> https://cdn.jsdelivr.net/binaryjs/0.2.1/binary.min.js

this.client = BinaryClient(`ws://localhost:9001`)

createStream() {
    window.Stream = this.client.createStream();

    window.navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      this.success(stream);
    })
}

stopRecording() {
    this.recording = false;
    this.win.Stream.end();
}



success(e) {
    var audioContext = window.AudioContext || window.webkitAudioContext;
    var context = new audioContext();

    // the sample rate is in context.sampleRate
    var audioInput = context.createMediaStreamSource(e);

    var bufferSize = 2048;
    var recorder = context.createScriptProcessor(bufferSize, 1, 1);
}

recorder.onaudioprocess = (e) => {
  if (!this.recording) return;
  console.log('recording');
  var left = e.inputBuffer.getChannelData(0);
  this.win.Stream.write(this.convertoFloat32ToInt16(left));
}

audioInput.connect(recorder)
    recorder.connect(context.destination);
}

convertoFloat32ToInt16(buffer) {
    var l = buffer.length;
    var buf = new Int16Array(l)

    while (l--) {
      buf[l] = buffer[l] * 0xFFFF;    //convert to 16 bit
    }
    return buf.buffer
}

我对可能出现的问题感到困惑，所以如果有人有使用此浏览器技术的经验，我将不胜感激。

谢谢。

Answer 1

我确实遇到了这个问题 - 你的问题是你用来编写 WAV 文件的采样率不正确。

您需要将浏览器和麦克风使用的采样率传递给写入二进制 WAV 文件的 node.js。

客户端：

在成功 navigator.mediaDevices.getUserMedia 之后（在您的例子中，success 函数），从 AudioContext 元素获取 sampleRate 变量：

var _smapleRate = context.sampleRate;

然后作为参数传递给node.js监听器。就我而言，我使用了：

binaryClient.createStream({ SampleRate: _smapleRate });

服务器（Node.js）端：

使用传递的 SampleRate 设置 WAV 文件的采样率。在我的例子中，这是代码：

fileWriter = new wav.FileWriter(wavPath, {
                channels: 1,
                sampleRate: meta.SampleRate,
                bitDepth: 16
             });

这将防止破碎的声音、低音调的声音、低速或快速的 WAV 文件。

希望对您有所帮助。

使用 navigator.mediaDevices.getUserMedia 录制浏览器音频

Recording browser audio using navigator.mediaDevices.getUserMedia

html

javascript

getusermedia

angular