在新版本的Webkit内核浏览器中，由于安全隐私考虑，使用getUserMedia调用摄像头必须在HTTPS环境下。文章介绍了遇到的NotSupportedError错误，并提供了调用摄像头的兼容代码，以及错误回调中可能出现的异常类型。
通过浏览器调用摄像头失败：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。
扫一扫
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
