正文

vue使用trackingjs

IP云
IP云V管理员/0 阅读
08/04
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
  • 前言：因为公司是做人工智能-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项目使用

    // 引入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() {
    if(!this.mediaStreamTrack){
    return
    }
    // 关闭摄像头和侦测
    this.mediaStreamTrack.srcObject.getTracks()[0].stop();
    this.trackerTask.stop()
    }
    }