获取摄像头和麦克风权限_getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介
HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
getUserMedia API最初是navigator.getUserMedia,目前已被最新Web标准废除,变更为navigator.mediaDevices.getUserMedia(),但浏览器支持情况不如旧版API普及。
MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备,例如相机或屏幕共享和/或麦克风。如果用户给予许可,就返回一个Promise对象,MediaStream对象作为此Promise对象的Resolved[成功]状态的回调函数参数,相应的,如果用户拒绝了许可,或者没有媒体可用的情况下PermissionDeniedError或者NotFoundError作为此Promise的Rejected[失败]状态的回调函数参数。注意,由于用户不会被要求必须作出允许或者拒绝的选择,所以返回的Promise对象可能既不会触发resolve也不会触发 reject。
浏览器兼容性
语法
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... })
参数
containers:指定请求的媒体类型,主要包含video和audio,必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise对象就会处于rejected[失败]状态,NotFoundError作为rejected[失败]回调的参数。
【例】同时请求不带任何参数的音频和视频:
{ audio: true, video: true }
【例】使用1280x720的摄像头分辨率:
{
audio: true,
video: { width: 1280, height: 720 }
}
【例】要求获取最低为1280x720的分辨率:
{
audio: true,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 }
}
}
当请求包含一个ideal(应用最理想的)值时,这个值有着更高的权重,意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头(如果设备拥有不止一个摄像头)。
【例】优先使用前置摄像头(如果有的话):
{ audio: true, video: { facingMode: "user" } }
【例】强制使用后置摄像头:
{ audio: true, video: { facingMode: { exact: "environment" } } }
成功回调函数seccessCallback的参数stream:stream是MediaStream的对象,表示媒体内容的数据流,可以通过URL.createObjectURL转换后设置为Video或Audio元素的src属性来使用,部分较新的浏览器也可以直接设置为srcObject属性来使用。
注意:新版的谷歌浏览器不能直接将MediaStream对象直接作为URL.createObjectURL的参数使用,会报TypeError Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided的错误,具体用法在后面说明。
失败回调函数errorCallback的参数error,可能的异常有:
AbortError:硬件问题
NotAllowedError:用户拒绝了当前的浏览器实例的访问请求;或者用户拒绝了当前会话的访问;或者用户在全局范围内拒绝了所有媒体访问请求。
NotFoundError:找不到满足请求参数的媒体类型。
NotReadableError:操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
OverConstrainedError:指定的要求无法被设备满足。
SecurityError:安全错误,在getUserMedia() 被调用的 Document
上面,使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
TypeError:类型错误,constraints对象未设置[空],或者都被设置为false。
示例:HTML 5调用媒体设备摄像头
这个例子中,请求访问用户硬件设备的摄像头,并把视频流通过Video元素显示出来。网页中提供一个"拍照"的按钮,通过Canvas将Video的画面截取并绘制,核心代码如下:
HTML
拍照
JavaScript
//访问用户媒体设备的兼容方法
functiongetUserMedia(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");//成功的回调函数
functionsuccess(stream){//兼容webkit内核浏览器
var CompatibleURL = window.URL ||window.webkitURL;//将视频流设置为video元素的源
video.src =CompatibleURL.createObjectURL(stream); // 此处的代码将会报错 解决的办法是将video的srcObject属性指向stream即可//播放视频
video.play();
}//异常的回调函数
functionerror(error){
console.log("访问用户媒体设备失败:",error.name,error.message);
}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);
});
关闭摄像头或者麦克风:需要注意的是,MediaStream.getTracks() 返回的Tracks数组是按第一个参数倒序排列的
比如现在定义了
{
video: true,
audio: true
}
想关闭摄像头,就需要调用MediaStream.getTracks()[1].stop();
同理,0对应于audio的track
进阶
对本示例进行功能加强,比如使用CSS 3 的滤镜实现模糊、黑白等效果。
麦克风
因为纯粹用一个audio标签来播放麦克风拾取到的声音显得太没特色了,于是我用到了以前写的一个音频可视化库Vudio.js,代码如下:
创建一个canvas来显示音频波形图
通过Vudio.js和getUserMedia来显示麦克风拾取到的音频的波形
var canvas = document.querySelector('#canvas')
navigator.mediaDevices.getUserMedia({
audio:true}).then((stream)=>{//调用Vudio
var vudio = newVudio(stream, canvas, {
accuracy:256,
width:1024,
height:200,
waveform: {
fadeSide:false,
maxHeight:200,
verticalAlign:'middle',
horizontalAlign:'center',
color:'#2980b9'}
})
vudio.dance()
}).catch((error) =>{
console.error(error.name||error)
})
效果如下图所示:
获取摄像头和麦克风权限_getUserMedia API及HTML5 调用摄像头和麦克风相关推荐
- HTML5调用摄像头录制视频
HTML5调用摄像头录制视频 不支持ie,ie下不支持webrtc,无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> ...
- Html5调用摄像头拍照
Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...
- web/html5调用摄像头实现二维码扫描效果(代码实例)
本文给大家介绍如何用web/html5调用摄像头实现二维码扫描的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 利用html5(navigator.getUserMedia)调 ...
- html5调用摄像头实例
最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵.于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码. HTML代码部分: <!--video用于 ...
- 摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照 拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
- html 摄像头代码,web HTML5 调用摄像头的代码
html5调用摄像头拍照 #camera{width:640px;height:525px;position:fixed;border:1px solid #f0f0f0;-moz-border-ra ...
- 手机麦克风权限在哪里开启_全民K歌麦克风设置在哪 开启麦克风权限步骤
全民K歌作为目前比较受欢迎的K歌应用,不少小伙伴都喜欢在上面发布自己的作品,如何让自己的演唱效果更为好听?除了添加视频元素.基础调音外,我们还可以在硬件上下功夫,例如麦克风就是不错的选择,下面就跟小编 ...
- HTML5调用摄像头+视频特效+录制视频+录音+截图+变声+滤波+音频可视化
1.写在前面 根据最近的学习,写了一个demo, 可以通过navigator.mediaDevices.getUserMedia()方法调用电脑摄像头,并实现了录制音频,录制视频,对摄像头的内容进行截 ...
- html5调用摄像头功能
前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多.今天闲来无事,看了下自己的 todo,发现有这个调用摄像头的todo,才想到.网上查 ...
最新文章
- 杰奇数据库mysql_杰奇模板出现Unable to save result set in…可尝试修复数据库
- 用 easy-json-schema 代替 json-schema 吧
- ubuntu18.04 安装qt5.12.8及环境配置的详细教程
- linux在所有文件中查找某一个字符
- 50多种在Photoshop中删除图像背景的工具和技术,第3页
- 一、mongodb数据库系列——介绍和安装 简单使用 增删改查
- 中国大学MOOC-数据结构基础习题集、06-3、公路村村通
- CSS对字体单位的总结
- WordPress中自带的处理AJAX请求的HOOK
- 硬盘ext2/3文件系统superblock损坏修复试验
- 【校招VIP】产品行测之逻辑计算题
- RabbitMQ之延迟队列
- [Unity][2D]Sprite精灵多个多边形切割
- 黄柳青:中国软件的致命缺陷是什么!
- 海康内置4G卡的摄像头设备无法注册EasyCVR平台是什么原因?
- 大学计算机社团学什么好,大学一般有哪些社团 最值得报名的社团有哪些
- C/C++ opencv 计算 LBP特征 包括旋转不变 uniform 圆形邻域
- 使用Matlab实现:Jacobi、Gauss-Seidel迭代
- k8s集群部署中etcd启动报错request sent was ignored (cluster ID mismatch: peer[c39bdec535db1fd5]=cdf818194e3a8c
- usb网卡在linux上能直接用吗,关于usb网卡如何在红旗linux6.0上使用的问题
热门文章
- Shell 脚本基础学习
- 中国科学院分子影像重点实验室田捷研究员团队自主研发的三维医学图像处理及分析平台3DMed更新到第五版
- (1)前言——(15)勘误表(Errata)
- python运算符中用来计算集合并集的是_python考试复习题库
- 靶机=肉鸡?细思极恐
- 疑点重重,细思极恐!基因编辑婴儿背后牵扯诸多谜团
- 数据库学习笔记第三弹——MySQL常用的图形化管理辅助工具及相关问题(图文详解2022))
- PHP云转码安装教程
- 服务器ldf文件,数据库清除日志文件(LDF文件过大)
- IE浏览器中文参数导致400 Bad Request问题研究(转)