人脸识别：face-api.js库

TensorFlow.js 是一个用于使用 JavaScript 进行机器学习开发的库
使用 JavaScript 开发机器学习模型，并直接在浏览器或 Node.js 中使用机器学习模型
基于TensorFlow构建的face-api.js库，事实上它可以嵌入在网站上并让网站拥有功能齐全的实时人脸检测能力，而且可与任何网络摄像头或手机摄像头配合使用

tracking.js Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。
还有一个我觉得不错的功能就是，截取摄像头的图像，对于一些网站用这个功能来设置用户头像也是个很炫的功能。

需求：前端获取到摄像头信息，通过模型来进行判断人像是否在镜头中，镜头是否有被遮挡。
实现步骤：
1、通过video标签来展示摄像头中的内容
2、通过canvas来绘制视频中信息进行展示
3、在拍照时候将canvas的当前帧转成图片

<template>

navigator.getUserMedia;

// 有些浏览器不支持，会返回错误信息

// 保持接口一致

if (!getUserMedia) {//不存在则报错

return Promise.reject(

new Error("getUserMedia is not implemented in this browser")

);

}

// 否则，使用Promise将调用包装到旧的navigator.getUserMedia

return new Promise(function(resolve, reject) {

getUserMedia.call(navigator, constraints, resolve, reject);

});

};

}

var constraints = {

audio: false,

video: {

width: this.videoWidth,

height: this.videoHeight,

transform: "scaleX(-1)"

}

};

navigator.mediaDevices

.getUserMedia(constraints)

.then(function(stream) {

// 旧的浏览器可能没有srcObject

if ("srcObject" in _this.thisVideo) {

_this.thisVideo.srcObject = stream;

} else {

// 避免在新的浏览器中使用它，因为它正在被弃用。

_this.thisVideo.src = window.URL.createObjectURL(stream);

}

_this.thisVideo.onloadedmetadata = function(e) {

_this.thisVideo.play();

};

})

.catch(err => {

console.log(err);

});

},

// 绘制图片（拍照功能）

setImage() {

var _this = this;

// canvas画图

var a = document.getElementById("canvasCamera");

var b = a.getContext("2d");

b.drawImage(

_this.thisVideo,

0,

0,

_this.videoWidth,

_this.videoHeight

);

// 获取图片base64链接

var image = a.toDataURL("image/png");

_this.imgSrc = image;//赋值并预览图片

_this.stopNavigator();

return;

},

// 关闭摄像头

stopNavigator() {

this.thisVideo.srcObject.getTracks()[0].stop();

}

// base64转文件，此处没用到

// dataURLtoFile(dataurl, filename) {

// var arr = dataurl.split(",");

// var mime = arr[0].match(/:(.*?);/)[1];

// var bstr = atob(arr[1]);

// var n = bstr.length;

// var u8arr = new Uint8Array(n);

// while (n--) {

// u8arr[n] = bstr.charCodeAt(n);

// }

// return new File([u8arr], filename, { type: mime });

// }

}

};

</script>