Question

我在我的网站上玩javascript并且有一个涉及网络摄像头的想法。我的第一个业务是简单地从用户那里获取数据。网络摄像头并在网站上显示。

我的网站是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会说它阻止了网络摄像头。好的，我预料到了。按预期工作。但是，当我单击相机图标以取消阻止我的网站时，只有两个选项是＆＃34; Ask＆＃34;和＆＃34;继续阻止。＆＃34;它默认为＆＃34;继续阻止＆＃34;。

当我改为＆＃34;问＆＃34;工具栏下拉，提示我重新加载页面。当我重新加载页面时，我没有被问到，它仍然被阻止，它仍然默认为＆＃34;继续阻止。＆＃34;

我做了一些谷歌搜索，似乎无法找到解决方案。我需要包含更多代码吗？我是一个有问题的人（饼干等）吗？或者这是Chrome的实际问题吗？

Answer 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>

Answer 2

最后，我必须进入我的Chrome设置并更改＆＃34; Deny＆＃34;的默认网络摄像头设置。问＆＃34;问＆＃34;。

有人会认为Chrome会在我要求重新加载页面时记住我对该页面的决定，但我猜不是。

感谢您的回复！

Chrome - 允许访问网络摄像头

2 个答案: