浏览器调用摄像头失败：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内核的浏览器访问，可以参考 久久经验网 此前发布的经验分享：

• 浏览器里摄像头开启失败：failed to allocate videosource
• 网站 HTTP => HTTPS 改造方法图解

经测试，IE浏览器、Firefox火狐浏览器均能正常调用。下面分享调用摄像头的程序测试代码（参考自segmentfault，作者wangsidney）。

程序代码

• HTML代码

    拍照

• 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。

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。