我正在学习使用 getUserMedia() 在 JavaScript 中访问网络摄像头。但我收到一个错误 -
不允许加载本地资源: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>最佳答案
出于隐私和安全原因，Google 决定仅允许某些功能来“保护”来源，即 getUserMedia 仅在使用 HTTPS 的网站上可用。
有关更多推理，您可以阅读 their article on this .
您的代码很好，通过 HTTPS 使用时工作正常，在开发过程中最简单的方法可能是 jsbin .
关于javascript - 无法访问网络摄像头(Javascript)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39991831/