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失败或以某种方式成为bl ocked？

更新

之前发布，我决定做个门施，并尝试第一调试。我发现的是某种听众（我并不是我所希望的JavaScript忍者，所以其中一些更高级的概念对我来说并不完全清楚 - 我的母语是Java）在recorder.js脚本中导致代码以无限循环在这条线（第一个），一旦相机开启：

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; 

然后快照，删除所有的冗余，其修改为：

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); 
}