前言：因为公司是做人工智能-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()
    }
}