服务器项目前端调用摄像头失败,浏览器调用摄像头失败:NotSupportedError Only secure origins are allowed...
通过浏览器调用摄像头失败:NotSupportedError Only secure origins are allowed
错误报告
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
[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.
错误原因
新发布的Webkit内核的浏览器(chrome谷歌浏览器、QQ浏览器)控制台会有这个提示,基于安全隐私问题,现在Webkit内核的浏览器共享视频、语音、经纬度坐标等必须通过https形式访问!也就是说须将http访问形式改造成https,如果项目/产品是基于通过Webkit内核的浏览器访问,可以参考 久久经验网 此前发布的经验分享:
经测试,IE浏览器、Firefox火狐浏览器均能正常调用。下面分享调用摄像头的程序测试代码(参考自segmentfault,作者wangsidney)。
程序代码
HTML代码
当前浏览器不支持video
拍照
Javascript代码
//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox浏览器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//成功的回调函数
function success(stream){
//兼容webkit内核浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
video.src = CompatibleURL.createObjectURL(stream);
//播放视频
video.play();
}
//异常的回调函数
function error(error){
console.log("访问用户媒体设备失败:",error.name,error.message);//访问用户媒体设备失败: NotFoundError The object can not be found here.
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//调用用户媒体设备,访问摄像头
getUserMedia(
{
video:{width:480,height:320}
},
success,
error
);
} else {
alert("你的浏览器不支持访问用户媒体设备");
}
//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
//绘制画面
context.drawImage(video,0,0,480,320);
});
失败回调函数errorCallback的参数error,可能的异常有:
AbortError:硬件问题
NotAllowedError:用户拒绝了当前的浏览器实例的访问请求;或者用户拒绝了当前会话的访问;或者用户在全局范围内拒绝了所有媒体访问请求。
NotFoundError:找不到满足请求参数的媒体类型。
NotReadableError:操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
OverConstrainedError:指定的要求无法被设备满足。
SecurityError:安全错误,在getUserMedia() 被调用的 Document上面,使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
TypeError:类型错误,constraints对象未设置[空],或者都被设置为false。
服务器项目前端调用摄像头失败,浏览器调用摄像头失败:NotSupportedError Only secure origins are allowed...相关推荐
- php安卓浏览器调用相机拍照,浏览器调用相机进行拍照
需求 浏览器调用相机进行拍照 代码 mediaDevices.getUserMedia() 目前,浏览器已经提供了一种API能够直接访问用户的媒体设备(摄像头.麦克风),这就使得浏览器能够直接捕获到来 ...
- 服务器项目前端调用摄像头失败,浏览器里摄像头开启失败:failed to allocate videosource...
通过程序在Web浏览器里调用摄像头,报错"NotReadableError: Failed to allocate videosource"的原因及解决办法.文末附Web调用摄像头 ...
- H5摄像头(新版浏览器https)(兼容老版浏览器) html5调用摄像头
H5摄像头(新版浏览器https)(兼容老版浏览器) html5CameraTestSrcNew.html 老版浏览器:sogou_explorer_6.2.5.21519.exe 新版浏览器:sog ...
- 解决PC浏览器调用摄像头失败(本地可以,线上失败)
解决PC浏览器调用摄像头失败(本地可以,线上失败) 原因:浏览器为了安全http协议获取不到摄像头权限 解决方案 1.切换https 如果域名可以使用https,切换为https即可 2.修改浏览器设 ...
- chrome浏览器调用摄像头
chrome浏览器调用摄像头 //var 是定义变量var canvans = document.getElementById("canvas");var video = docu ...
- 关于采用浏览器调用手机摄像头问题
之前一直做后台开发,最近项目客户想要采用android平板扫描物品条码,所以开始在网上看了众多关于采用浏览器调用摄像头的问题,让我十分疑惑的是,为什么很多解决案例并没有讲到移动端浏览器的支持问题,以致 ...
- 【javascript】浏览器调用摄像头扫二维码踩坑记录
前言 最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录 我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
- VUE用浏览器调用USB摄像头
公司需求: 在线上浏览器调用摄像头拍照上传 本人实现 调用摄像头拍照以下代码 经测试 (Google Chrome 88.0.4324.182) 版本可用 各位可以试一试其他浏览器 参考 ...
- JS通过浏览器调用摄像头,基于windows操作系统。
方法一: <!doctype html> <html lang="en"> <head><title>GET VIDEO</t ...
最新文章
- 【数据结构】堆,大根堆,小根堆,优先队列 详解
- 感恩节里我成了一个不解风情的爸爸
- ASP.NET 中HttpRuntime.Cache缓存数据
- 【CodeForces - 214B】Hometask (模拟,有坑)
- C语言工厂方法模式,工厂函数模式 (C语言实现)
- 有什么是你追了很多女生都失败后才知道的?
- ajax html页面传值乱码,jQuery Ajax传值到Servlet出现乱码问题的解决方法
- DbEntry on Mono 测试
- 【解决】U盘装系统(Win7/Win8) 装双系统
- 小米8 青春版root时无法检测到手机
- 游戏能给QQ一个未来吗?
- mysql nfs存储_NFS存储服务及部署
- 数据控制—完整性约束
- Redis之持久化实操(Linux版)
- 用python画简单雪花剪纸步骤图解_Python+Selenium+Beautiful Soap抓取贝贝拼团爆款
- uni-app验证码输入框
- QT5显示视频或者图片缩小后以滚动条方式显示
- python快速入门精讲_Python快速入门精讲
- JVM-浅堆和深堆的区别?
- top 1000 site page rank