创新实训日记一：clmtrackr.js初探
本周的主要任务为学习使用clmtrackr.js，使用js进行简单的人脸检测和相关部位的提取。
clmtrackr是一个javascript库，用于将面部模型拟合到视频或图像中的面部，并实现纯js的人脸检测，并且clmtrackr跟踪一个面部并按照下面模型的编号将面部模型的坐标位置输出为数组
通过该js库能实现的功能主要包括以下几个方面：
- 跟踪图像
- 跟踪视频
- 面部替换
- 面部遮蔽
- 实时面部变形
- 表情检测
- 漫画
在本次的学习过程中，我主要学习的部分是对于视频图像中的面部图像的追踪，至于其他部分可以到github项目下亲自体验。
以下是我根据GitHub中clmtrackr项目的相关介绍，进行的相关的实践
调用clmtrackr中人脸识别的demo代码如下
html部分（clmtrackr.js文件即为所需要的js库）
<!DOCTYPE html>
<html>
<head>
<title>this is a test</title>
</head>
<body>
<video id="webcam" width="400" height="300" autoplay loop></video>
<canvas id="overlay" width="400" height="300"></canvas>
<style>/*video和canvas标签位置重合使显示出来的人脸模型和视频重合*/
#webcam, #overlay {
position: absolute;
top: 0;
left: 0;
}
</style>
<!-- 导入相关的js文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="clmtrackr.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js部分
$(document).ready(function() {
const video = $('#webcam')[0];
const overlay = $('#overlay')[0];
const overlay_eye = overlay.getContext('2d');
const ctrack = new clm.tracker();
ctrack.init();
// 根据输出的数组中人脸相应位置的坐标，圈出眼睛的位置
function getEyes(positions) {
const minX = positions[23][0] - 6;
const maxX = positions[28][0] + 6;
const minY = positions[24][1] - 6;
const maxY = positions[26][1] + 6;
const width = maxX - minX;
const height = maxY - minY;
return [minX, minY, width, height];
}
// 持续监测人脸
function detect() {
// 检查是否检测到人脸
requestAnimationFrame(detect);
let currentPosition = ctrack.getCurrentPosition();
overlay_eye.clearRect(0, 0, 400, 300);
if (currentPosition) {
// 在overlay canvas上画出检测到的人脸:
ctrack.draw(overlay);
// 用红色画出人眼位置:
const eyesRect = getEyes(currentPosition);
overlay_eye.strokeStyle = 'red';
overlay_eye.strokeRect(eyesRect[0], eyesRect[1], eyesRect[2], eyesRect[3]);
}
}
function onStreaming(stream) {
video.srcObject = stream;
ctrack.start(video);
detect();
}
navigator.mediaDevices
.getUserMedia({
video: true,
})
.then(onStreaming);
});
效果如下图