getUserMedia
一、认识
mediaDevices.getUserMedia()
会提示用户给予使用媒体输入的许可,媒体输入会产生一个 MediaStream
,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D
转换器等等),也可能是其他轨道类型。
它返回一个 Promise
对象,成功后会 resolve
回调一个 MediaStream
对象。若用户拒绝了使用权限,或者需要的媒体源不可用,promise
会 reject
回调一个 PermissionDeniedError
或者 NotFoundError
。
二、语法
const promise = navigator.mediaDevices.getUserMedia(constraints);
const promise = navigator.mediaDevices.getUserMedia({
audio: true,
video: true
});
const promise = navigator.mediaDevices.getUserMedia({
audio: {
deviceId: 'xxx'
},
video: {
deviceId: 'xxx'
}
});
-
constraints
:constraints
参数是一个包含了video
和audio
两个成员的MediaStreamConstraints
对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise
对象就会处于rejected
[失败]状态,NotFoundError
作为rejected
[失败]回调的参数。-
audio
: 布尔值或对象,指定是否需要音频输入,以及音频的具体约束-
deviceId
: 指定音频输入设备 -
echoCancellation
: 布尔值,指定是否启用回声消除 -
noiseSuppression
: 布尔值,指定是否启用噪声抑制 -
sampleRate
: 数字,指定音频的采样率 -
channelCount
: 数字,指定音频的通道数
-
-
video
: 布尔值或对象,指定是否需要视频输入,以及视频的具体约束-
width
: 数字, 指定视频宽度。比如:width: 1920
或者width: { ideal: 1280 }
或者width: { min: 1024, ideal: 1280, max: 1920}
-
height
: 数字, 指定视频高度。比如:height: 1080
或者width: { ideal: 1080 }
或者width: { min: 576, ideal: 1080, max: 1280}
-
deviceId
: 指定视频输入设备 -
aspectRatio
: 数字,指定视频宽高比, 比如:aspectRatio: 1.7777
或者aspectRatio: { ideal: 1.7777777778 }
或者aspectRatio: { min: 1, ideal: 1.7777777778, max: 2 }
-
facingMode
: 字符串,指定选择前置还是后置摄像头(user
,environment
,left
,right
) -
frameRate
: 数字,指定视频的帧率 -
resolution
: 对象,指定理想或精确的分辨率,如:{ width: 1280, height: 720 }
-
-
-
promise
: 返回一个Promise
,这个Promise
成功后的回调函数带一个MediaStream
对象作为其参数。
三、错误
3.1 AbortError
AbortError
中止错误 尽管用户和操作系统都授予了访问设备硬件的权利,而且未出现可能抛出 NotReadableError
异常的硬件问题,但仍然有一些问题的出现导致了设备无法被使用。
3.2 NotAllowedError
NotAllowedError
拒绝错误 用户拒绝了当前的浏览器实例的访问请求;或者用户拒绝了当前会话的访问;或者用户在全局范围内拒绝了所有媒体访问请求。