getUserMedia() 音频块摄像头

Question

我有一个论坛发帖表单，允许发帖人附上录音和/或网络摄像头快照。这两个都是使用navigator.getUserMedia() API 实现的。对于音频，我从 Matt Diamond 著名的 recorder.js 库中构建了 variant，而对于相机捕捉，我改编了 David Walsh 提供的一些脚本，可在 here 获取。

每个功能都可以完美运行。问题是当海报尝试进行录音然后拍照时，<video> 元素不会加载相机流。浏览器请求许可，网络摄像头灯甚至亮起，但屏幕上没有显示任何内容。如果我“重新启动”视频流（使用“拍摄另一张照片”按钮重新启动所有相关元素），它会再次工作，即使它使用与首先启动相机的按钮完全相同的代码。

按照相反的顺序，先是摄像头，然后是麦克风，一切正常。

为了清楚起见，写了一些代码：

在录音脚本中获得getUserMedia和AudioContext对象，因此：

try {
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  window.URL = window.URL || window.webkitURL;
  if (navigator.getUserMedia === !1) {
    alert('Your browser doesn\'t support audio recording');
  }
function record (o, i) {
    if (e.voice.initCalled === !1) {
        this.init();
        e.voice.initCalled = !0;
    }
    ;
    navigator.getUserMedia({audio: true}, function (t) {
        var r = e.voice.context.createMediaStreamSource(t);
        if (o === !0) {
            r.connect(e.voice.context.destination);
        }
        ;
        e.voice.recorder = new Recorder(r, {workerPath: e.voice.workerPath});
        e.voice.stream = t;
        e.voice.recorder.record();
        i(t);
    }, function () {
        alert('No live audio input');
    });
}

在照片捕捉脚本中，像这样：

function startMediaStream() {
    // Put video listeners into place
    if (navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function (stream) {
            mediaStream = stream;
            video.src = stream;
            video.play();
        }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function (stream) {
            mediaStream = stream;
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if (navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function (stream) {
            mediaStream = stream;
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
}

问题是，脚本中的什么会导致第二个脚本中的stream 失败或以某种方式被阻止？

更新

在发帖之前，我决定先做个男人，然后尝试调试。我发现在 recorder.js 脚本中是某种监听器（我不是我希望的 JavaScript 忍者，所以其中一些更高级的概念对我来说并不完全清楚——我的母语是 Java）一旦相机打开，代码就会在这一行（第一行）无限循环：

this.node.onaudioprocess = function(e){
  if (!recording) return;
  var buffer = [];
  for (var channel = 0; channel < numChannels; channel++){
      buffer.push(e.inputBuffer.getChannelData(channel));
  }
  worker.postMessage({
    command: 'record',
    buffer: buffer
  });
};

很抱歉这篇冗长的帖子。关于在 recorder.js 文件中修改什么以避免出现此问题的任何想法？

Answer 1

this.node.onaudioprocess 不是你的问题。我猜下面的部分是：

录音机有这行：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

快照有这个：

if (navigator.getUserMedia) {
...

因此，如果您在录制音频后尝试拍摄快照，则必然会进入错误的 if/else 块。我的解决方案是，

在一个共同的全局空间中：

window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;

那么对于snapshot，去掉所有冗余，修改为：

function startMediaStream() {
    if (navigator.getUserMedia === !1) {
      alert('Your browser doesn\'t support audio recording');
      return;
    }

    navigator.getUserMedia({video: true}, function (stream) {
        mediaStream = stream;
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}