vue使用trackingjs
- 前言:因为公司是做人工智能-AI的,所有一个web数据平台为了装X,需要做个人脸登陆。前台需要把人脸的base64发给后台去做人脸校验。
功能很简单,需要注意的是web需要实现“调用摄像头”和“自动拍照”。于是开始找资料,在github上找到个8363星的trackingjs,不得
不说js如此强大。可是当我在最后发现trackingjs没有关闭摄像头,于是在网上也找了一些例子都没有成功关闭。被迫不得不去看tracking
的源码。最后把代码发出来,给后人参考。 - 下载
官网地址:https://trackingjs.com/。我的网盘下载,提取码:nuex。我这里直接下载压缩包到本地。解压后我们需要下面这两个文件
tracking.js/build/tracking-min.js,
tracking.js/build/data/face-min.js - 引入vue项目使用
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485// 引入trackingjs所需文件
import
tracking from
'@/assets/js/tracking-min.js'
import
'@/assets/js/face-min.js'
export
default
{
name:
'login'
,
data() {
return
{
trackerTask:
null
,
trackering:
null
,
mediaStreamTrack:
null
}
},
mounted() {
this
.getCompetence()
},
methods: {
getCompetence() {
let
flag =
true
;
const _this =
this
;
const video =
this
.mediaStreamTrack = document.getElementById(
'videoCamera-face'
);
const canvas = document.getElementById(
'canvas-face'
);
const context = canvas.getContext(
'2d'
);
const tracker =
new
window.tracking.ObjectTracker(
'face'
);
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
// 启动摄像头初始化
this
.trackerTask = window.tracking.track(
'#videoCamera-face'
, tracker, {
camera:
true
});
tracker.on(
'track'
,
function
(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(
function
(rect) {
context.strokeStyle =
'#ff0000'
;
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
});
if
(event.data.length) {
// 会不停的去检测人脸,所以这里需要做个锁
if
(flag) {
// 裁剪出人脸并绘制下来
const canvasUpload = document.getElementById(
'canvas-face-upload'
)
const contextUpload = canvasUpload.getContext(
'2d'
)
contextUpload.drawImage(video, 0, 0, 105, 105)
flag =
false
// 人脸的basa64
const dataURL = canvasUpload.toDataURL(
'image/jpeg'
);
// ajax请求
_this.$store.dispatch(
'LoginByFaceID'
, {
face_img: dataURL.slice(23)
// 我们后台需要的basa64不要前缀
}).then(res => {
let
type =
'success'
// 登录成功跳转到首页
if
(res.data.code === 200) {
_this.$router.push({
path:
'/'
});
}
// 登录失败重新进行人脸检测
else
{
type =
'error'
setTimeout(() => {
flag =
true
}, 1500)
}
_this.$message({
message: res.data.message,
type,
center:
true
});
}).
catch
(error => {
console.log(error)
})
}
}
});
}
},
destroyed() {<br>
if
(!
this
.mediaStreamTrack){<br>
return
<br> }
// 关闭摄像头和侦测
this
.mediaStreamTrack.srcObject.getTracks()[0].stop();
this
.trackerTask.stop()
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步