摘要:欲在Web浏览器里打开摄像头,结果无法开启。谷歌浏览器控制台警告:NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).的原因及解决办法

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

网站 HTTP => HTTPS 改造方法图解

自今年7月起,谷歌浏览器将未改造成HTTPS访问形式的网站标识为不安全的访问链接。一时间兴起了一股从HTTP=>H…

浏览器里摄像头开启失败:failed to allocate videosource

在Web浏览器里调用摄像头报错“NotReadableError: Failed to allocate videoso…

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

程序代码

  • HTML代码
<!--video用于显示媒体设备的视频流,自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px;background: #999">当前浏览器不支持video</video>
<!--拍照按钮-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>
  • 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。