标签：控件 mediaDevices index cameras 拍仪 video let message

项目中需要用到高拍仪采集资料照片，公司以前的旧代码是使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。