無法訪問攝像頭（Javascript）？

我正在學習使用getUserMedia（）訪問javascript中的攝像頭。但我得到一個錯誤 - Not allowed to load local resource: blob:null/3485f5b8-46c1-4a40-946a-8de2588720f0無法訪問攝像頭（Javascript）？

我在網上搜索，但他們說，我需要一個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 
 
\t console.log("error"); 
 
} 
 
</script> 
 
</body> 
 
</html>

來源

2016-10-12 Dhruv Chadha

提示允許網絡攝像頭在'file：'協議和firefox的stacksnippets – guest271314

出於隱私和安全方面的原因，谷歌決定讓某些功能只爲「安全」的起源，即getUserMedia僅在使用HTTPS網站上提供。

有關更多推理，您可以閱讀their article on this。

您的代碼很好，在通過HTTPS使用時工作良好，在開發過程中最簡單的方法可能是jsbin。

來源

2016-10-12 06:36:01 geekonaut

但不是包含在安全起源列表中的文件方案？ –

是的，實際上它可以從本地文件系統以及http：// localhost中爲我工作 - 但這可能取決於您的操作系統以及哪些不是，所以安全的選擇是HTTPS。 – geekonaut

如何在android chrome瀏覽器中正常工作？我測試了jsbin鏈接。它在控制檯中顯示「錯誤」。 – user906919

如果您嘗試在鉻，鉻在file:協議，關閉所有鉻，鉻實例，然後重新啓動鉻，鉻--allow-file-access-from-files標誌以允許瀏覽器訪問本地文件系統的文件。另請參閱Jquery load() only working in firefox?

來源

2016-10-12 06:44:47 guest271314

爲什麼這些不建議更改？ –

@DruveChadha出於安全原因。該標誌不必永久設置。你可以創建不同的發射器來使用不同的標誌並且不設置任何標誌。您還可以從'terminal'' google-chrome --allow-file-access-from-files'或'$ chromium-browser --allow-file-access-from-files'啓動chrome或chromium，其中當實例在'終端'或瀏覽器處關閉時，標誌將不會永久設置在桌面或其他啓動器上 – guest271314

無法訪問攝像頭（Javascript）？

回答

相關問題