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项目使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    // 引入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()
        }
    }
posted @   大耳朵小虎  阅读(10053)  评论(17编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示