取消初始化通过 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 functiono，它将从前一个流和新流中获取所有样本.

我的问题是：

我如何stop/start录制没有这样的问题？

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

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

Answer 1

recorder.disconnect() 应该有帮助。

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

取消初始化通过 getUserMedia 启动的录音

deinitialize audio recording started via getUserMedia

javascript

webrtc

audio-streaming