项目中需要用到高拍仪采集资料照片,公司以前的旧代码是使用IE控件的,项目在IE上运行的效果还是很难让人满意,查了相关的api后,发现chrome实现起来既简单又流畅,自己梳理记录一下
涉及到的 API
- MediaDevices.enumerateDevices():用于获取用户设备列表
- 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());
}
});