作者：绿色小植被_552_584 | 来源：互联网 | 2023-08-22 19:49
Tracking.js是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体脸
Tracking.js 是一个独立的Javascript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发Javascript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。
很久之前做的，做个记录吧，实现挺复杂的，包需到官网下载 tracking-min.js 和 face-min.js 压缩文件。
实现效果
活体检测组件
点击查看活体检测组件代码
:visible="modalVisible"
custom-class="compaines-dialog"
title="Action"
class="face-dialog"
v-dialogDrag
:close-on-click-modal="false"
@close="close"
:append-to-body="true"
>
Complete Registration
{{ faceTips[imgList.length] }}
id="video"
preload
autoplay
loop
muted
>
Turn on the camera
Save the image
Please keep your face in the box
拍照组件代码
点击查看拍照组件代码
:visible="modalVisible"
custom-class="compaines-dialog"
title="Action"
class="face-dialog"
@close="close"
>
Complete Registration
Please take a personal photo
id="video"
preload
autoplay
loop
muted
>
id="shortCut"
v-show="steps === 'save'"
>
Turn on the camera
Save the image
RETAKE
SAVE
Please keep your face in the box
样式文件
点击查看样式代码
.face {
.big-title{
font-size: 16PX;
font-weight: 600;
color: #030229;
}
.video-container {
background: #D9D9D9;
position: relative;
width: 295PX;
height: 345PX;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
video,
#canvas,
#shortCut,
#canvas1 {
position: absolute;
}
}
.btns {
padding: 10PX;
text-align: center;
margin-top: 6PX;
.tips {
font-size: 14PX;
color: #666;
margin-top: 16PX;
line-height: 24PX;
}
}
.imgs {
padding: 10PX;
p {
font-size: 16PX;
}
}
.add-num {
display: inline-block;
font-size: 16PX;
padding: 6PX 14PX;
margin-right: 4PX;
border-radius: 4PX;
color: #0a9391;
background: #1a949133;
cursor: pointer;
}
.retake-btn {
display: inline-block;
font-size: 16PX;
padding: 6PX 14PX;
margin-right: 24PX;
border-radius: 4PX;
color: #c81124;
background: #c8122333;
cursor: pointer;
}
}
.face-dialog {
.el-dialog__body {
padding-top: 0;
padding-bottom: 15px;
}
}
京公网安备 11010802041100号