2014-09-02 104 views
2

我在我的網站上玩耍着javascript,並且有一個涉及網絡攝像頭的想法。我的首要任務是簡單地從用戶的網絡攝像頭獲取數據並在網站上顯示。Chrome瀏覽器 - 允許訪問攝像頭

我的網站是hheim.com。 這裏的所有代碼:

的index.html

<html> 
<head> 
<title>Selfie</title> 
</head> 
<body> 
<video></video> 
<script src="video.js"></script> 
</body> 
</html> 

的Video.js

(function() { 
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia ||    navigator.mozGetUserMedia); 
navigator.getMedia(
{video:true, audio:false}, 
function (mediaStream) { 
var video = document.getElemtsByTagName('video')[0]; 
video.src = window.URL.createObjectURL(mediaStream); 
video.play(); 
}, 
function (error) { 
console.log(error); 
}) 
})(); 

當我加載頁面,Chrome的說,它的阻止網絡攝像頭。好的,我預料到了。按預期工作。但是,當我點擊相機圖標來解鎖我的網站時,只有兩個選項是「詢問」和「繼續阻止」。它默認爲「繼續阻止」。

當我更改爲「詢問」時,工具欄下拉提示我重新加載頁面。當我重新加載頁面時,我沒有被問到,仍然被阻止,並且它仍然默認爲「繼續阻止」。

我已經做了一些谷歌搜索,似乎無法找到解決方案。是否有更多的代碼需要包含?我是一個有問題的人(餅乾等)?或者這是Chrome的實際問題?

+0

'document.getElemtsByTagName('video')[0];'?,修改該語法。 – gab06 2014-09-02 23:54:33

+0

我想你正在HTTP上運行你的頁面,對吧?當您使用HTTPS時,瀏覽器更加寬容。 Chrome甚至記得答案,然後不再問第二次... – 2014-09-04 08:04:22

回答

1

首先,您必須檢查用戶媒體是否可用並準備好被授予。要記住的eval是邪惡的:)

navigator.getUserMedia = (navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia || 
         navigator.msGetUserMedia); 

if (navigator.getUserMedia) { 
    navigator.getUserMedia (

     // constraints 
     { 
     video: true, 
     audio: true 
     }, 

     // successCallback 
     function(localMediaStream) { 
     var video = document.getElementById('stream'); 
     video.src = window.URL.createObjectURL(localMediaStream); 
     // Do something with the video here, e.g. video.play() 
     }, 

     // errorCallback 
     function(err) { 
     console.log("The following error occured: " + err); 
     } 
    ); 
} else { 
    console.log("getUserMedia not supported"); 
} 

https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia

集ID爲視頻和自動播放屬性;

<video id="stream" autoplay></video> 
0

最後,我不得不進入我的Chrome設置並將默認攝像頭設置從「拒絕」更改爲「問」。

有人會認爲Chrome可以記住我的網頁決定,當它要求我重新加載它,但我猜不是。

感謝您的回覆!