摆脱恼人的IE控件，mediaDevices Api 实现高拍仪抓拍

项目中需要用到高拍仪采集资料照片，公司以前的旧代码是使用IE控件的，项目在IE上运行的效果还是很难让人满意，查了相关的api后，发现chrome实现起来既简单又流畅，自己梳理记录一下

涉及到的 API

1. MediaDevices.enumerateDevices()：用于获取用户设备列表
2. MediaDevices.getUserMedia()：用于请求用户设备

获取用户设备列表的示例代码

// 具体的 e 是什么，可以自己 log 一下，这里就不贴出来了
function gotDevices(devices) {
	let cameras = []
	for (let index = 0; index < devices.length; index++) {
		const e = devices[index]
		if (e.kind === 'videoinput') {
			cameras.push({
				label: `摄像头[${index}]${e.label}`,
				value: e.deviceId,
			})
		}
	}
	this.selCamera(this.cameras[0])
},

navigator.mediaDevices
	.enumerateDevices()
	.then(gotDevices)
	.catch(err => {
		this.$message.error(err.name + ': ' + err.message)
	})

请求用户设备的示例代码

MediaDevices.getSupportedConstraints()：getUserMedia 的参数是一个对象，理解成一个 config,可以使用此 API 获取支持的配置

//
let constraints = {
  audio: true,
  video: {
    deviceId: { exact: e.deviceId },
    width: { ideal: 1280 },
    height: { ideal: 720 },
  },
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise
  .then((MediaStream) => {
    let video = this.$refs.video;
    // 可以用于关闭流
    this.mediaTrack = MediaStream.getTracks();
    video.srcObject = MediaStream;
    video.onloadedmetadata = function (e) {
      video.play();
    };
  })
  .catch((PermissionDeniedError) => {
    if (
      PermissionDeniedError.toString() ===
      "NotFoundError: Requested device not found"
    ) {
      this.$message.error("找不到摄像头");
    } else {
      this.$message.error(PermissionDeniedError.toString());
    }
  });

标签：控件,mediaDevices,index,cameras,拍仪,video,let,message
来源： https://www.cnblogs.com/marvelTitile/p/14719281.html