39,084
社区成员
发帖
与我相关
我的任务
分享HTML5 在使用非 localhost 地址访问时打开摄像头失败
操作系统 Win10
浏览器 chrome 版本 47.0.2526.106 m
MS Edge
HTTP Server -- nodejs
端口3000
现象：浏览器打开测试网页
在使用非 localhost 地址访问时打开摄像头失败
使用 localhost / 127.0.0.1 打开摄像头OK
补充 错误提示是
object navigatorUserMediaError
浏览器 chrome 版本 47.0.2526.106 m
MS Edge
HTTP Server -- nodejs
端口3000
现象：浏览器打开测试网页
在使用非 localhost 地址访问时打开摄像头失败
使用 localhost / 127.0.0.1 打开摄像头OK
补充 错误提示是
object navigatorUserMediaError
...全文
请发表友善的回复…
发表回复
caion 2017-12-09
- 打赏
- 举报
我也遇见了，是https的原因
(index):81 [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
init @ (index):81
sg0771 2016-02-01
- 打赏
- 举报
问题解决。。。。。
新版本Webrtc
部署到网络需要HTTPS 才能用摄像头
firefox 估计没限制
sg0771 2016-01-29
- 打赏
- 举报
safari 调用 ngrok 映射的地址 的文件 启动摄像头也失败
但是 如果浏览器以 127.0.0.1 这样方式访问本机的HTTP server的时候 调用摄像头功能正常
sg0771 2016-01-22
- 打赏
- 举报
是差了，但是Webrtc 给 HTML5的接口太少了，参数不好配置
业余草 2016-01-22
- 打赏
- 举报
是不是与加载顺序有关
slcboy 2016-01-20
- 打赏
- 举报
有没有感觉你们这样写，拍出来的照片效果很差吗？？
sg0771 2016-01-15
- 打赏
- 举报
你好，我现在的现象是
使用 chrome 通过 http://xxx.ngork.natapp.cn 和 http://10.55.100.1 这样的方式访问 HTML，就会提示获取流失败
通过 http://127.0.0.1 访问是正常的，先弹出是否允许使用摄像头的按钮
而通过 最新版本的firefox
不论用域名、局域网IP，127.0.0.1 访问 HTML 页面，摄像头都可以正常打开
sg0771 2016-01-14
- 打赏
- 举报
FireFox 测试结果
local 和 域名方式，已经局域网IP 访问，摄像头打开正常
sg0771 2016-01-14
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test WebCame</title>
</head>
<body>
<!--
理想情况下我们应该先判断你的设备上是否
有摄像头或相机，但简单起见，我们在这里直接
写出了HTML标记，而不是用JavaScript先判断
然后动态生成这些标记
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
var aVideo=document.getElementById('video');
var aCanvas=document.getElementById('canvas');
var ctx=aCanvas.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象（这里指摄像头）
navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
alert('摄像头成功打开！');
};
}
function noStream(err) {
alert(err);
}
document.getElementById("snap").addEventListener("click", function() {
ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});
</script>
</body>
</html>
业余草 2016-01-14
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test WebCame</title>
</head>
<body>
<!--
理想情况下我们应该先判断你的设备上是否
有摄像头或相机，但简单起见，我们在这里直接
写出了HTML标记，而不是用JavaScript先判断
然后动态生成这些标记
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
var aVideo=document.getElementById('video');
var aCanvas=document.getElementById('canvas');
var ctx=aCanvas.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象（这里指摄像头）
navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
alert('摄像头成功打开！');
};
}
function noStream(err) {
alert(err);
}
document.getElementById("snap").addEventListener("click", function() {
ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});
</script>
</body>
</html>业余草 2016-01-14
- 打赏
- 举报
你点击否认一次然后浏览器保存设置，总是返回错误时，页面中要求的媒体访问。（这似乎不是你的情况你可以从浏览器问题，但是你要去的地址栏，在相机图标点击改变选项再问）。
您的浏览器不具有访问媒体设备和任何计算机没有相机也没有麦克风，即使你按允许，你得到一个错误的事件，它不能给你任何流。请检查浏览器的设置，看看你可以选择所选摄像机。我已经经历了这个列表是空的。为了解决这个我不得不重新启动机器，Chrome开始显示出设备的名单。
