前台vue+后台java实现离线人脸检测采集识别tracking.js

1、前台页面

```html
 <script th:src="@{/plugin/face/tracking-min.js}" th:inline="javascript"></script>
    <script th:src="@{/plugin/face/face-min.js}" th:inline="javascript"></script>
    <script th:src="@{/plugin/face/dat.gui.min.js}" th:inline="javascript"></script>
    <script th:src="@{/plugin/face/stats.min.js}" th:inline="javascript"></script>
       <div v-show="!showForm">
            <div class="demo-frame">
                <div class="demo-container">
                    <video id="video" width="420" height="420" preload autoplay loop muted></video>
                    <div>
                        <canvas id="canvas" width="420" height="340"></canvas>
                    </div>
                </div>
            </div>
        </div>

2、js

   getCompetence: function () {
            var that = this;
            var video = that.mediaStreamTrack = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var tracker = new tracking.ObjectTracker('face');
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);
            this.trackerTask = tracking.track('#video', tracker, {camera: true});
            tracker.on('track', function (event) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                event.data.forEach(function (rect) {
                    context.strokeStyle = '#a64ceb';
                    context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                    context.font = '11px Helvetica';
                    context.fillStyle = "#fff";
                    context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
                    context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
                });
                //判断是否检测到人脸
                if (event.data.length) {
                    if (that.flag) {
                        context.drawImage(video, 0, 0, 420, 340);
                        var snapData = canvas.toDataURL('image/png');
                        var imgSrc = snapData;
                        that.flag = false
                        that.$http.post("../faceUpload/addFaceDb", {
                            jobNumber: that.addRuleForm.jobNumber,
                            username: that.addRuleForm.username,
                            base64: imgSrc,
                        }, {emulateJSON: true}).then(function (response) {
                            console.log(JSON.stringify(response))
                            if (response.body.code == "1") {
                                that.destroyed();
                                that.showForm = true;
                                that.$message({
                                    type: 'success',
                                    message: '采集成功。'
                                });
                                that.$refs['addRuleForm'].resetFields()
                            } else {
                                that.$message({
                                    type: 'error',
                                    message: response.body.msg
                                });
                                that.showForm = true;
                                that.destroyed();
                            }
                        });
                    }
                }
            });
        },
        //关闭操作
   destroyed: function () {
            console.log("结束")
            this.trackerTask.stop()
            this.mediaStreamTrack.srcObject.getTracks()[0].stop();
        }

提示：下载tracking.js

3、后台java+百度离线识别

  /**
  * 添加到人脸库
  */
  @RequestMapping("addFaceDb")
    @ResponseBody
    public ResultMsg addFaceDb(SysUser vo) throws IOException {
        if (vo != null) {
            List<SysUser> list = userService.getByJobNumber(vo);
            if (list.size() > 0) {
                return ResultMsg.errorWithData("0", "您已采集过人脸信息，请勿重新采集。", null);
            }
            //图像数据为空
            if (vo.getBase64() == null) {
                return ResultMsg.errorWithData("0", "未采集到人脸信息，请重试。", null);
            }
            BASE64Decoder decoder = new BASE64Decoder();
            try {
                //Base64解码
                String base641 = vo.getBase64().replace("data:image/png;base64,", "");
                byte[] b = decoder.decodeBuffer(base641);
                for (int i = 0; i < b.length; ++i) {
                    if (b[i] < 0) {//调整异常数据
                        b[i] += 256;
                    }
                }
                String nowHour = DateUtils.DateToString("HH");
                String nowMin = DateUtils.DateToString("mm");
                String nowSec = DateUtils.DateToString("ss");
                int random = (int) (100 + Math.random() * (999 - 100 + 100));
                String fileName = nowHour + nowMin + nowSec + random + ".png";
                // 创建保存文件夹
                String path = savePath + "face\\" + fileName;
                //采集人脸照片存放地址D:\nginx\www\movies\face
                String filePath2 = filePath + "face\\" + fileName;
                //新生成的图片
                OutputStream out = new FileOutputStream(filePath2);
                out.write(b);
                out.flush();
                out.close();
                //初始化
                Face.discern();
                //获取人脸图片质量
                String faceQuality = Face.faceQuality(filePath2);
                JSONObject quality = new JSONObject(faceQuality);
                if (("success").equals(quality.getString("msg"))) {
                    double illum = Double.parseDouble(quality.getJSONObject("data").getJSONObject("result").getString("illum"));
                    //人脸图片质量大于70，存入人脸库
                    if (illum > 70) {
                        //添加人脸库
                        String addInfo = Face.userAdd(vo.getJobNumber(), "0", filePath2, vo.getGzh());
                        //将返回结果转为JSON判断采集是否成功
                        System.err.println("addInfo=======" + addInfo);
                        JSONObject infoJson = new JSONObject(addInfo);
                        String msg = infoJson.getString("msg");
                        if (msg.equals("success")) {
                            SysUser user = new SysUser();
                            user.setId(UUIDUtil.getUUID());
                            user.setGzh(vo.getJobNumber());
                            user.setSfsc("0");
                            user.setUsername(vo.getUsername());
                            user.setFacetoken(infoJson.getJSONObject("data").getString("face_token"));
                            user.setBase64(vo.getBase64());
                            user.setPath(path);
                            userService.insertUser(user);
                        } else {
                            return ResultMsg.errorWithData("0", "添加人脸库失败。", null);
                        }
                        return ResultMsg.successWithData("1", "人脸采集成功！", vo);
                    } else {
                        return ResultMsg.errorWithData("0", "人脸照片不清晰，请重试。", null);
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
                return ResultMsg.errorWithData("0", "请求异常。", null);
            }
        }
        return ResultMsg.errorWithData(null);
    }

总结

如果发现浏览器请求时打不开摄像头参考上一个博客，后续再更新…。