javascript - 取消初始化通过 getUserMedia 启动的音频录制

Question

我正在尝试从浏览器创建音频流并将其发送到服务器。

这是代码:

let recording = false;
let localStream = null;
const session = {
  audio: true,
  video: false
};

function  start () {
    recording = true;
    navigator.webkitGetUserMedia(session, initializeRecorder, onError);
  }

function stop () {
    recording = false;
    localStream.getAudioTracks()[0].stop();
}

function initializeRecorder (stream) {
  localStream = stream;
  const audioContext = window.AudioContext;
  const context = new audioContext();
  const audioInput = context.createMediaStreamSource(localStream);
  const bufferSize = 2048;
  // create a javascript node
  const recorder = context.createScriptProcessor(bufferSize, 1, 1);
  // specify the processing function
  recorder.onaudioprocess = recorderProcess;
  // connect stream to our recorder
  audioInput.connect(recorder);
  // connect our recorder to the previous destination
  recorder.connect(context.destination);
}

function onError (e) {
  console.log('error:', e);
}
function recorderProcess (e) {
  if (!recording) return;
  const left = e.inputBuffer.getChannelData(0);
  // send left to server here (socket.io can do the job). We dont need stereo.
}

当函数start被触发时，可以在recorderProcess中捕获样本
当函数 stop 被触发时，浏览器中的麦克风图标消失，但是...

除非我将 if (!recording) return 放在 recorderProcess 的开头，它仍然会处理样本。

不幸的是，这根本不是一个解决方案 - recordingProcess 仍在接收样本，如果我再次触发 start 函数，它将获取先前流中的所有样本以及来自新的。

我的问题是:

如何停止/开始录制而不出现此类问题？

或者如果这不是最佳解决方案

如何在 stop 函数中完全删除流，以便随时安全地再次初始化它？

Answer 1

recorder.disconnect() 应该有帮助。

您可能需要考虑 Chrome Canary 中的新 MediaRecorder 功能，如 https://webrtc.github.io/samples/src/content/getusermedia/record/ 所示。 (我认为目前仅限视频)而不是 WebAudio API。