服务器项目前端调用摄像头失败,浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed...

最新推荐文章于 2025-04-02 11:46:33 发布

weixin_39634194

最新推荐文章于 2025-04-02 11:46:33 发布

阅读量5.8k

点赞数 1

文章标签：服务器项目前端调用摄像头失败

在新版本的Webkit内核浏览器中，由于安全隐私考虑，使用getUserMedia调用摄像头必须在HTTPS环境下。文章介绍了遇到的NotSupportedError错误，并提供了调用摄像头的兼容代码，以及错误回调中可能出现的异常类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过浏览器调用摄像头失败：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。