MediaDevices.getUserMedia()
MediaDevices.getUserMedia()
会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D转换器等等),也可能是其它轨道类型。
返回一个 Promise 对象,成功后会resolve
回调一个 MediaStream
对象。
若用户拒绝了使用权限,或者需要的媒体源不可用,promise
会reject
回调一个个 PermissionDeniedError
或者 NotFoundError
。
通常你可以使用 navigator.mediaDevices
来获取 MediaDevices
,例如:
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
/* 使用这个MediaStream
对象 */
})
.catch(function(err) {
/* 处理error */
});
语法
var promise = navigator.mediaDevices.getUserMedia(constraints);
参数
constraints
作为一个MediaStreamConstraints
对象,指定了请求的媒体类型和相对应的参数。- constraints 参数是一个包含了
video
和audio
两个成员的MediaStreamConstraints
对象,用于说明请求的媒体类型。 - 注意:必须至少一个类型或者两个同时可以被指定。
- 如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise对象就会处于rejected[失败]状态,
NotFoundError
作为rejected[失败]回调的参数。 - 例如:同时请求不带任何参数的音频和视频:
const constraints = { audio: false, video: true };
如果为某种媒体类型设置了 true
,得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得,getUserMedia()
将会产生一个错误。
当由于隐私保护的原因,无法访问用户的摄像头和麦克风信息时,应用可以使用额外的constraints参数请求它所需要或者想要的摄像头和麦克风能力。下面演示了应用想要使用1280x720的摄像头分辨率:
const constraints = { audio: false, video: { width: 1280, height: 720 }};
浏览器会试着满足这个请求参数,但是如果无法准确满足此请求中参数要求或者用户选择覆盖了请求中的参数时,有可能返回其它的分辨率。
强制要求获取特定的尺寸时,可以使用关键字min
, max
, 或者 exact
(就是 min == max). 以下参数表示要求获取最低为1280x720的分辨率。
const constraints = { audio: false, video: { width: { min: 1280 }, height: { min: 720 }};
如果摄像头不支持请求的或者更高的分辨率,返回的Promise会处于rejected状态,NotFoundError作为
rejected回调的参数,而且用户将不会得到要求授权的提示。
当请求包含一个ideal(应用最理想的)值时,这个值有着更高的权重,意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头(如果设备拥有不止一个摄像头)。
const constraints = { audio: false,
video: { width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 }
};
简单的请求值也可以理解为是应用理想的值,因此我们的第一个指定分辨率的请求也可以写成如下:
const constraints = { audio: true, video: { width: { ideal: 1280 }, height: { ideal: 720 } } }
注意:不是所有的constraints 都是数字。
例如, 在移动设备上面,如下的例子表示优先使用前置摄像头(如果有的话):
const constraints = { audio: true, video: { facingMode: "user" } }
强制使用后置摄像头:
const constraints = { audio: true, video: { facingMode: { exact: "environment" } } };
返回值
返回一个 Promise
, 这个Promise成功后的回调函数带一个 MediaStream
对象作为其参数。
示例
宽度和高度
这个例子设置了摄像头分辨率,并把结果的 MediaStream
分配给了一个video元素。
var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误
补充:onloadedmetadata 事件
onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。
视频/音频(audio/video)的元数据包含: 时长,尺寸大小(视频),文本轨道。
视频/音频(audio/video)在加载过程中,事件触发的顺序如下:
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
MediaDevices.getUserMedia()的更多相关文章
- 录制用户的音频,视屏 navigator.mediaDevices.getUserMedia
google 文档 HACKS 文档 相关代码 获取本地的音频 <input type="file" accept="audio/*" capture=& ...
- navigator.mediaDevices.getUserMedia
navigator.mediaDevices.getUserMedia: 作用:为用户提供直接连接摄像头.麦克风的硬件设备的接口 语法: navigator.mediaDevices.getUserM ...
- `MediaDevices.getUserMedia` `undefined` 的问题
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境: localhost 域 开启了 HTTPS 的域 使用 file:/// 协议打开 ...
- javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia,做扫描二维码,并识别内容
本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...
- 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE
<template> <div> <!--canvas截取流--> <canvas ref="canvas" ...
- JavaScripts调用摄像头【MediaDevices.getUserMedia()】
h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...
- getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- JavaScript 使用 mediaDevices API 选择摄像头
大多数智能手机都有前置和后置摄像头,当你在创建视频应用时你可能想要选择或者切换前置.后置摄像头. 如果你开发的是一款聊天应用,你很可能会想调用前置摄像头,但如果你开发的是一款拍照软件,那么你会更倾向于 ...
- 手机调取摄像头问题(getUserMedia)
先说坏消息,苹果机没法玩这个!!! 而且,必须拥有 https 的安全协议!!! 而安卓机想完成这个功能倒是很 easy 的,看一眼代码 主要传入三个参数,配置对象,成功,失败 var mediaOp ...
随机推荐
- Python 之父说 Python 历史
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:鸿影洲冷 这篇文章主要内容来源于 Python 编程语言的最初设计者 ...
- HttpContext, HttpContextBase, HttpContextWrapper之间关系
HttpContext是最原始的ASP.NET Context. MVC的目的之一是能够单元测试. HttpContextBase, 是用来在MVC中替代HttpContext.但是这是一个abstr ...
- day46 作业
# 班级表 create table class( cid int primary key auto_increment, caption char(16) ); # 学生表 create table ...
- [系列] Go - json.Unmarshal 遇到的小坑
1.问题现象描述 使用 json.Unmarshal(),反序列化时,出现了科学计数法,参考代码如下: jsonStr := `{"number":1234567}` result ...
- 安装python包管理工具pip
安装步骤(必须已经安装过python) 1>curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py 2>python get-pip ...
- CRM【第三篇】: crm业务
1. 项目背景 crm系统是某某教育公司正在使用的项目,系统主要为 销售部.运营部.教质部门提供管理平台,随着公司规模的扩展,对公司员工的业务信息量化以及信息化建设越来越重要. crm系统为不同角色的 ...
- How to change the text color in the terminal
You can open the file ~/.bashrc and then choose the force_color_prompt=yes otherwise, you can change ...
- java实现判断时间是否为合法时间
最近遇到一个需求,输入字符串,判断为日期的话再进行后面的比较大小之类的操作,但是合法日期的格式也是比较多的,利用正则表达式又太长了.所以后面利用的方法就是,先把输入的字符串转成一种固定的时间格式,然后 ...
- T3 成绩单 题解
这个题本来不归我讲,但我A完之后觉得太坑了,还是讲一下吧. 首先这个题有个重要的地方:(字典顺序,学号全为小写字母,从小到大排列) 字典序和字典顺序是不一样的!!! 我以为是字典序……,wa了,字典顺 ...
- JAVA集合三:几种Set框架
参考链接: HOW2J.CN HashSet简单讲解 HashSet HashSet与C++STL中Set基本类似,具有的特点便是: 集合中元素不可重复 集合中元素顺序 ≠ 插入顺序 常用方法 功能 ...