mediaDevices是Navigator的只读属性不可修改，但是可以返回一个不同类型（相机，麦克风）的MediaDevices对象，它有只读属性和一些子方法，从而实现通过html5调用设备媒体的api功能。是一个很好玩的接口api。下面是七娃我的学习笔记！

getUserMedia方法  —— 调用设备摄像头和录音器流

var promise = navigator.mediaDevices.getUserMedia(constraints);

参数

constraints——请求的媒体类型和相对应的参数
constraints包含了video 和 audio，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定，例如：

{ audio: true, video: true }

指定视频分辨率

{
  audio: true,
  video: { width: 1280, height: 720 }
}

强制视频分辨率
使用关键字min、max 或者 exact（就是 min == max）

{
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 }
  }
}

指定前置摄像头

{ audio: true, video: { facingMode: "user" } }

指定后置摄像头

{ audio: true, video: { facingMode: { exact: "environment" } } }

返回值

返回一个promise，成功后返回一个MediaStream媒体流参数 ；异常也会捕获到一个api异常事件

异常事件

  • AbortError 中止错误
  • InvalidStateError 拒绝错误
  • NotAllowedError 拒绝错误
  • NotFoundError 找不到错误
  • NotReadableError 无法读取错误
  • OverconstrainedError 转换错误
  • TypeError 类型错误

代码实例

在线体验地址：https://course.51qux.com/getusermedi 

let myVideo = document.getElementById("myvideo")
getUserMedia(myVideo)
//拿到 摄像头 媒体流
function getUserMedia(myVideo) {
	const constraints = {
		video: true,
		audio: false
	};
	navigator.mediaDevices.getUserMedia(constraints)
	.then(stream => {
		if(myVideo){
			myVideo.srcObject = stream;
			myVideo.onloadedmetadata = function(e) {
myVideo.play();
			};
		}
	}).catch(error => {
		console.error(error);
	});
}

参考文档

MDN： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

getDisplayMedia方法 —— 共享屏幕流

navigator.mediaDevices.getDisplayMedia(constraints)

HTML5的媒体调用API：Navigator.mediaDevices-QUI-Notes

参数

constraints——请求的媒体类型和相对应的参数，同getUserMedia参数

返回值

返回一个promise，成功后返回一个Stream视频轨道 ；异常也会捕获到一个api异常事件

代码实例

在线体验地址：https://course.51qux.com/getdisplaymedia 

navigator.mediaDevices.getDisplayMedia({ audio: false,   video: true, }).then(handleSuccess).catch(handleError);
function handleSuccess(stream) {
  window.stream = stream;
  myVideo.srcObject = stream;
  myVideo.onloadedmetadata = function(e) {
myVideo.play();
};
}
function handleError(error) {
  console.log('getDisplayMedia error: ', error.message, error.name);
}

参考文档

MDN： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia

getSupportedConstraints方法 —— 获取浏览器约束能力

let supporteds = navigator.mediaDevices.getSupportedConstraints();

返回值

以下均为返回对象：supporteds的属性值，且都为true

  • aspectRatio
  • autoGainControl
  • brightness
  • channelCount
  • colorTemperature
  • contrast
  • deviceId
  • displaySurface
  • echoCancellation
  • exposureCompensation
  • exposureMode
  • exposureTime
  • facingMode
  • focusDistance
  • focusMode
  • frameRate
  • groupId
  • height
  • iso
  • latency
  • noiseSuppression
  • pan
  • pointsOfInterest
  • resizeMode
  • sampleRate
  • sampleSize
  • saturation
  • sharpness
  • suppressLocalAudioPlayback
  • tilt
  • torch
  • whiteBalanceMode
  • width
  • zoom

代码实例

let supporteds = navigator.mediaDevices.getSupportedConstraints();
console.log(supporteds)

参考文档

MDN： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getSupportedConstraints

enumerateDevices 方法 —— 可用的媒体输入输出设备

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

返回值

返回一个可用的媒体输入和输出设备的列表（数组），如：麦克风，摄像机，耳机设备

[
InputDeviceInfo {deviceId: '', kind: 'audioinput', label: '', groupId: ''},
InputDeviceInfo {deviceId: "ac8707bed95f6a5ddf215583421652efd66ca1de09d02126e94e2bcaebcaf18b",groupId:"98f8e7ba57c0085a8c442ae5c4029d167ece61df86b2b3b278c80ff9f7e45653",kind: "videoinput",label:"Integrated Camera (13d3:5415)"},
MediaDeviceInfo {deviceId: '', kind: 'audiooutput', label: '', groupId: ''}
]

 代码实例

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
function gotDevices(deviceInfos) {
console.log(deviceInfos);
}
function handleError(error) {
console.log('getDisplayMedia error: ', error.message, error.name);
}

参考文档

MDN： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices