H5人脸识别功能

这是需要引入的js文件以及tracking的插件,tracking可以进入官方下载插件，里面会有一些简单的dome。

<script type='text/javascript' src='js/tracking-min.js'></script>
<script type="text/javascript" src='js/face-min.js'></script>
<script type="text/javascript" src='js/stats.min.js'></script>

以下是html代码区域

<div class="face_content">
            <div>
                <video id="video"></video>
                <canvas id="canvas"></canvas>
                <canvas id="canvas_two" style="display: none"></canvas>
            </div>
        </div>

我创建了两个canvas是因为，第一个是用作显示在面部监测的框，提示识别到面部操作的，第二个是检测到面部后用canvas绘制video的截图，生成base64码，提取后上传后端，进行人脸识别。

以下是js代码区,具体是需要程序加载执行还是点击执行，只需将代码放入即可

            //获取到dome节点
            var isNo = true;
            var video = document.getElementById("video");
            var canvas = document.getElementById("canvas");
            var canvas_two = document.getElementById("canvas_two");
            var pen = canvas.getContext("2d");
            var conxt = canvas_two.getContext("2d");
            var strImg = '';
            var constraints = {video: true};
            //开启摄像头
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (stream) {
                    video.srcObject = stream;
                    /* 使用这个stream  */
                    let pomise = new Promise((resolve, reject) => {  //创建一个pomise对象，视频获取成功后执行人脸检测
                        video.onloadedmetadata = function (e) {
                            video.play();
                        }
                        resolve();
                    }).then(function () {
                        var tracker = new tracking.ObjectTracker('face');
                        tracker.setInitialScale(4);
                        tracker.setStepSize(2);
                        tracker.setEdgesDensity(0.1);

                        tracking.track('#video', tracker, {camera: true});
                        tracker.on('track', function (event) {
                            pen.clearRect(0, 0, canvas.width, canvas.height);
                            event.data.forEach(function (rect) {
                                if (isNo) {   /*为真，代表第一次识别出人脸，画取截图，保存地址*/
                                    pen.strokeStyle = '#0000ff';  //设置或返回用于笔触的颜色、渐变或模式
                                    pen.strokeRect(rect.x, (rect.y - 60), rect.width, rect.height); //绘制矩形（无填充）
                                    pen.font = '11px Helvetica';  //设置或返回文本内容的当前字体属性
                                    pen.fillStyle = "#0000ff";  //设置或返回用于填充绘画的颜色、渐变或模式
                                    // pen.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);//在画布上绘制“被填充的”文本
                                    // pen.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); //在画布上绘制“被填充的”文本
                                    conxt.drawImage(video, 0, 0, 200, 200);  //绘制识别出来的面部
                                    var url = canvas.toDataURL();
                                    strImg = url.split(",")[1];  //此时已经获取到base64
                                    isNo = false;    //将isNo改为false，还是会进行人脸识别，但是不会继续截取面部
                                    //这里是脸部识别后，关闭调用的摄像头
                                     let stream = video.srcObject;
                                            let tracks = stream.getTracks()
                                            tracks.forEach(track => {
                                                track.stop();
                                            })
                                    console.info(strImg)
                                } else {  /*w为假，代表多次进入，一次显示脸部截取框*/
                                    pen.strokeStyle = '#0000ff';
                                    pen.strokeRect(rect.x, (rect.y - 60), rect.width, rect.height);
                                    pen.font = '11px Helvetica';
                                    pen.fillStyle = "#0000ff";
                                }

                            });
                        });
                    })

                })
                .catch(function (err) {
                    console.log(err.name || err);
                    /* 处理error */
                });

第一次发表，写的不好敬请见谅

在这里插入图片描述