我正在尝试设置视频流网站。我发现,您可以在 getUserMedia 的帮助下从浏览器使用网络摄像头。 这是我编写的 javascript 代码:
function stream() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, load, error);
}
}
function load(source) {
document.getElementById("video").src = window.URL.createObjectURL(source);
alert("Connected");
}
function error(e) {
alert("Error:") + e;
}
这里有我的 HTML 标签:
<video id="video" autoplay></video>
我的问题是,当我打开网站并允许浏览器使用网络摄像头和麦克风时,我可以听到自己的声音,但视频未加载。视频帧大小调整为 2px x 2px 黑色正方形。我哪里做错了?
最佳答案
虽然我无法在 Chrome 或 Firefox 上重现您的问题,但我相信您的问题在于尝试使用自动播放
。显示网络摄像头流的推荐方法是为 loadedmetadata
添加监听器并显式调用 play
。我怀疑您的浏览器在知道宽度和高度之前尝试播放流,从而导致无效状态。
MDN 片段:( https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia )
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occured: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
对您来说关键部分是:
video.onloadedmetadata = function(e) {
video.play();
};
此外,我不相信 msGetUserMedia
或 oGetUserMedia
存在。您应该避免在未验证浏览器前缀是否存在的情况下添加它们(因为它们可能存在于具有不同 API 的某个地方)。
当然,始终值得检查您是否确实拥有网络摄像头并且已连接! (例如,您可以从另一个应用程序使用它吗?从另一个网站如何?)
关于javascript - getUserMedia 在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30006733/