Question

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

我在网上搜索但他们说我需要一个https连接或其他东西，不允许使用文件网址，但我并不完全了解发生了什么。

代码是 -

<!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决定仅允许某些功能来保护＆＃34;安全＆＃34;来源，即getUserMedia仅适用于使用HTTPS的网站。

有关更多推理，请阅读their article on this。

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

Answer 2

如果您尝试使用file:协议的铬，铬，关闭所有铬，铬实例，然后使用--allow-file-access-from-files标志重新启动铬，铬，以允许浏览器访问本地文件系统中的文件。另请参阅Jquery load() only working in firefox?

无法访问网络摄像头（Javascript）？

2 个答案: