介绍 & lt; template>
& lt; div id=癴acelogin"祝辞
& lt; h2类=氨晏鈏s-1"在{{FaceisDetected}} & lt;/h2>
& lt; !- & lt; p> {{FaceisDetected}} & lt;/p>——比;
& lt; div类=癱ontent-cam"祝辞
& lt; div类=癱amera-wrp sec"比;
& lt;视频宽度=?20”;身高=?20”;ref=皏ideoDom"id=皏ideo_cam"预加载播放循环muted> & lt;/video>
& lt;画布的宽度=?20”;身高=?20”;ref=癱anvasDOM"id=癴ace_detect"祝辞& lt;/canvas>
& lt; div类=癱ontrol-btn"祝辞& lt;/div>
& lt;/div>
& lt; div类=癷mages-wrp sec"比;
& lt; !——& lt; p类=氨晏鈏s-5"在图像taken——比;
& lt; div
:类=? img-item img-item - ${指数}’”;
v代表=癷mages"(形象,指数);
:关键=啊癷mg-wrp - ${指数}”“
：
祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
出口默认{
名称:& # 39;facelogin& # 39;
数据(){
返回{
数:0,
isdetected: & # 39;请您保持脸部在画面中央& # 39;,
videoEl: {},
canvasEL: {},
图片:[],
trackCcv:假的,
trackTracking:假的,
autoCaptureTrackTraking:假的,
userMediaConstraints: {
音频:假的,
视频:{//理想(应用最理想的)
宽度:{
分钟:320年,
理想:1280年,
马克斯:1920
}，
高度:{
分钟:240年,
理想:720年,
马克斯:1080
}，//帧速率受限带宽传输时,低帧率可能更适宜
帧速率:{
15分钟:
理想:30,
马克斯:60
}，//摄像头翻转
facingMode: & # 39;用户# 39;
}
}
}
}，
计算:{
FaceisDetected () {
返回this.isdetected
}
}，
创建(){
this.changeView ()
}，
安装(){//getUserMedia接口是用于处理摄像头输入。//一些浏览器需要一个前缀这里我们# 39;覆盖所有的选项
导航器。getMedia=导航器。getUserMedia | |
导航器。webkitGetUserMedia | |
导航器。mozGetUserMedia | |
navigator.msGetUserMedia
this.init ()
}，
方法:{
异步init () {
这一点。videoEl=refs.videoDom美元
这一点。canvasEL=refs.canvasDOM美元
等待navigator.mediaDevices
.getUserMedia (this.userMediaConstraints)
不要犹豫(this.getMediaStreamSuccess)
.catch (this.getMediaStreamError)
等待this.onPlay ()
}，
异步>以上就是关于Vue + tracking.js如何实现前端人脸检测功能的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看的到。
这篇文章主要为大家展示了Vue + tracking.js如何实现前端人脸检测功能,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
项目中需要实现人脸登陆功能,实现思路为在前端检测人的脸,把人脸照片发送到后端识别,返回用户令牌登陆成功
前端调用摄像头使用跟踪。js检测视频流中的人的脸,检测到人脸后拍照上传后端。
后端使用face_recognition人脸识别库,使用瓶提供restfulAP供前端调用
实现效果如下图:
登陆界面:
摄像头检测人脸界面:
前端代码如下:
