无法访问网络摄像头 (Javascript)？

Question

我正在学习使用 getUserMedia() 访问 javascript 中的网络摄像头。但我收到一个错误 - Not allowed to load local resource: blob:null/3485f5b8-46c1-4a40-946a-8de2588720f0

我在网上搜索过，但他们说我需要一个 https 连接或其他东西，文件 url 是不允许的，但我并不完全明白这是怎么回事。

密码是-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
  
<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
</style>
</head>
  
<body>
<div id="container">
    <video autoplay="true" id="videoElement">
     
    </video>
</div>
<script>
var video = document.querySelector("#videoElement");
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
 
if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}
 
function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}
 
function videoError(e) {
    // do something
 console.log("error");
}
</script>
</body>
</html>

Answer 1

出于隐私和安全原因，Google 决定仅允许 "secure" 来源使用某些功能，即 getUserMedia 仅在使用 HTTPS 的网站上可用。

有关更多推理，您可以阅读 their article on this。

您的代码很好，并且在通过 HTTPS 使用时工作正常，在开发过程中最简单的方法可能是 jsbin。

Answer 2

如果您尝试使用 Chromium，chrome 在 file: 协议，关闭所有 Chromium，chrome 实例，然后重新启动 Chromium，chrome 使用 --allow-file-access-from-files 标志允许浏览器访问本地文件系统中的文件。另见

无法访问网络摄像头 (Javascript)？

Not able to access webcam (Javascript)?

html

javascript

html5-video