getUserMedia() 音频块摄像头
getUserMedia() audio blocks camera
我有一个论坛 post 表单,允许 post 用户附加录音 and/or 网络摄像头快照。这两个都是使用 navigator.getUserMedia()
API 实现的。对于音频,我建立了 variant of Matt Diamond's well-known recorder.js library, and for the camera capture I adapted some script offered up by David Walsh, available here.
每个功能单独运行时都非常出色。问题是当 poster 尝试录音然后拍照时,<video>
元素不会加载相机流。浏览器请求许可,网络摄像头灯甚至亮起,但屏幕上没有任何显示。如果我 'restart' 视频流(使用 'take another picture' 按钮重新启动所有相关元素),它再次工作,即使它使用与首先启动相机的按钮完全相同的代码.
顺序相反,先是摄像头,再是麦克风,一切正常。
为清楚起见,添加一些代码:
在录音脚本中得到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
失败或以某种方式被阻止?
更新
在 posting 之前,我决定做一个 mensch,先尝试调试。我发现的是某种倾听者(我不是我希望的 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
});
};
抱歉冗长 post。关于在 recorder.js 文件中修改什么以避免出现此问题有什么想法吗?
this.node.onaudioprocess
不是你的问题。我猜下面的部分是:
录音机有这行:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
快照有这个:
if (navigator.getUserMedia) {
...
因此,如果您在录制音频后尝试拍摄快照,它必然会进入错误的 if/else
块。我的解决方案是
在一个共同的全球space:
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);
}
我有一个论坛 post 表单,允许 post 用户附加录音 and/or 网络摄像头快照。这两个都是使用 navigator.getUserMedia()
API 实现的。对于音频,我建立了 variant of Matt Diamond's well-known recorder.js library, and for the camera capture I adapted some script offered up by David Walsh, available here.
每个功能单独运行时都非常出色。问题是当 poster 尝试录音然后拍照时,<video>
元素不会加载相机流。浏览器请求许可,网络摄像头灯甚至亮起,但屏幕上没有任何显示。如果我 'restart' 视频流(使用 'take another picture' 按钮重新启动所有相关元素),它再次工作,即使它使用与首先启动相机的按钮完全相同的代码.
顺序相反,先是摄像头,再是麦克风,一切正常。
为清楚起见,添加一些代码:
在录音脚本中得到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
失败或以某种方式被阻止?
更新
在 posting 之前,我决定做一个 mensch,先尝试调试。我发现的是某种倾听者(我不是我希望的 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
});
};
抱歉冗长 post。关于在 recorder.js 文件中修改什么以避免出现此问题有什么想法吗?
this.node.onaudioprocess
不是你的问题。我猜下面的部分是:
录音机有这行:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
快照有这个:
if (navigator.getUserMedia) {
...
因此,如果您在录制音频后尝试拍摄快照,它必然会进入错误的 if/else
块。我的解决方案是
在一个共同的全球space:
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);
}