最近在做一个用网页端的人体姿态识别的demo,遇到一些坑,记录一下。
首先遇到的问题是用js调用摄像头为底。这里我参考了EASY-AR的demo
分为2个文件 main.js 和 ClassAR.js
main.js:
function firstOpenCamera(){
classAR.listCamera(videoDevice)
.then(msg => {
classAR.openCamera(JSON.parse(videoDevice[0].value))
.then(msg => {
console.info(msg);
}).catch(err => {
console.info(err);
});
})
.catch(err => {
// 没有找到摄像头
console.info(err);
});
}
document.querySelector('#btn_changeCamera').addEventListener('click', function () {
// 打开摄像头
// 打开后置摄像头参数: {audio: false, video: {facingMode: {exact: 'environment'}}}
if(videoDevice.length == 0 || videoDevice.length == 1)
return;
nowVideo = nowVideo == 0? 1 : 0; //切换当前摄像头
classAR.openCamera(JSON.parse(videoDevice[nowVideo].value))
.then(msg => {
console.info(msg);
}).catch(err => {
console.info(err);
});
});
// 开启识别
document.querySelector('#btn_check').addEventListener('click', () => {
classAR.startRecognize(classAR,(msg) => {
console.info(msg);
});
}, false);
classAR:
export default class ClassAR {
constructor(interval,nowBodyModel) {
this.isRecognizing = false;
// 前/后置摄像头
this.cameras = ["user", "environment"];
this.interval = interval;
this.videoOffWidth = 0;
this.videoOffHeight = 0;
}
listCamera(videoDevice) {
return new Promise((resolve, reject) => {
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
let index = 0;
devices.find((device) => {