Question

的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');
}
}

当我在本地运行此代码时，它确实有效。但是当我将它上传到我的网站moneypro.online时，它只显示我的CSS。那是为什么？

Answer 1

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

[Deprecation] getUserMedia（）不再适用于不安全的起源。至使用此功能，您应该考虑将您的应用程序切换为安全的来源，例如HTTPS。

在localhost上可能没问题，但http不允许使用相机访问所需的getUserMedia（至少在第47版以后的Chrome中），所以请尝试通过 https

尝试从此处获取有关您网站的有效SSL证书： https://letsencrypt.org/

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

上传到我的网站但在localhost

1 个答案: