看到很多网上 vue 实现人脸识别的 demo ，很多都是不成形的源码。没办法，工作需要，自己借鉴别人的写了一个demo。（ 可以满足所有的需求 ）
1.需要引入 tracking.js 第三方库
2.检测到人脸自动 stop
3.canvas 压缩图片体积 正在上传中...........
代码语言：javascript复制<video id="video" preload autoplay loop muted></video>
<canvas id="canvas" width="500" height="500" style="position:absolute;top:0;left:0;"></canvas> export default {
name: 'componentName',
data() {
return {
videoEle: null,
trackerTask:null,
first:null
}
},
created(){
this.openCamera();
},
mounted(){
},
methods: {
openCamera () {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face'); // 引入第三方 库
tracker.setInitialScale(1);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
this.trackerTask = tracking.track('#video', tracker, { camera: true });
//------- 指定 canvas 的宽高 ，auto 自动播放
let constraints = {
video: {width: 500, height: 500},
audio: true
};
let promise = navigator.mediaDevices.getUserMedia(constraints); // h5 新的API
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
}).catch(function (PermissionDeniedError) {
console.log(PermissionDeniedError);
})
//--------------
let that = this;
that.tracker_fun(tracker,video,context,canvas); //open 摄像头，执行tracker_fun( 传入参数 )
},
tracker_fun(tracker,video,context,canvas){
let that = this;
let set_clear;
set_clear = setTimeout(function(){ // 每秒 检测人脸 结果
tracker.on('track', function(event) { // 视频流
// context.clearRect(0, 0, canvas.width, canvas.height);
if(!that.first){ // if --- > else 检测到人脸 success() =>{}
event.data.forEach(function(rect) {
if(rect.x){
that.first = rect.x;
video.pause(); // success 将暂停 video
console.log(rect)
console.log(video)
context.drawImage(video, 0, 0, 500, 500); // 绘制到 canvas
context.font = '11px Helvetica';
context.fillText("",100,40);
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
var data_url = canvas.toDataURL('image/png'); //base64 request
console.log(data_url)
// video.load();
// that.first = null;
// that.tracker_fun(tracker,video,context,canvas)
return;
}
});
}
});
clearTimeout(set_clear)
console.log('-------')
},5000)
}
},
mounted() {
},
destroyed() {
// 停止侦测
this.trackerTask.stop()
// 关闭摄像头
window.tracking.closeCamera()
}
}demo 仅限于 pc端。
有问题，请大家帮忙指出
