网络摄像头上传到我的网站时不起作用，但在本地主机上工作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="video-container">
<video id="camera-stream" width="500" autoplay>
</video>
</div>
<script src="script.js"></script>
</body>
</html>

script.js

window.onload = function() {

//归一化的各种供应商的前缀版本的getusermedia。

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

//检查浏览器是否支持getusermedia。

//如果没有显示警报，则继续。

if (navigator.getUserMedia) {

//请求相机。

navigator.getUserMedia(

//约束

{
  video: true
},

//成功回调

function(localMediaStream) {

//获取页面上的视频元素的引用。

var vid = document.getElementById('camera-stream');

//为视频流创建对象URL并使用此功能//设置视频源。

vid.src = window.URL.createObjectURL(localMediaStream);
},

//错误回调

function(err) {

//将错误记录到控制台。

  console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
 );
} else {
alert('Sorry, your browser does not support getUserMedia');
}
}

当我在本地运行此代码时，它确实有效。但是，当我将其上传到我的网站时。为什么？

打开浏览器的控制台，看看您是否有这样的警告：

[弃用] getusermedia((不再针对不安全的起源。到使用此功能，您应该考虑将应用程序切换到安全起源，例如https。

在Local主机上可能还可以，但是在HTTP上不允许使用相机访问所需的getUserMedia(至少在Chrome 47以来，在Chrome中(，因此请尝试通过 https p>尝试从此处获得您网站的有效SSL证书：https://letsencrypt.org/

或在您的情况下，如果您正在使用主机，请参阅他们的文档以获取SSL：http://support.hostgator.com/articles/ssl-certificates/acquire-ssl/how-do-i-i-purchase-an-ssl-an an-ssl-and-what-what-ty-type-is-is-is-it

相关内容

最新更新

热门标签：