H5利用face++和腾讯云慧眼实现活体检测（人脸识别）的流程总结

背景

随着当前业务安全以及风控的要求，在做一些业务特别是涉及金融领域的业务，需要对用户进行OCR身份证上传识别，活体检测辨别真人，以规避风险和便于风控评估。
再说说为何不使用face++或者腾讯云慧眼的saas模式，因为saas模式集合了身份证OCR，银行卡OCR，活体检测于一体，不可拆分，自定义空间不多，因此我们公司使用的多是paas模式，借用face++或者腾讯云慧眼的api，自定义写自己的业务需求，实现相应的身份证，银行卡OCR进件和活体检测。（ps:如果对业务需求要求没那么高的，可以直接使用face++或者腾讯云慧眼的saas模式，一个链接跳转就搞定了，省事便捷。如有兴趣可查看face++官方文档和腾讯云慧眼官方文档）

paas模式活体检测流程（以数字模式的活体检测为例）

1. 前端从后端获取数字口令，并展示在界面上（用户需要录制读数字的视频上传给后端做活体检测）

<div class="face-record-prompt">
	<span>请使用前置摄像头</span>
    <span>录制一段匀速读取下方数字的身份验证视频</span>
</div>
<div class="face-record-num">
    <div class="face-record-num-item">6577</div>
</div>
<span>开始录制视频</span>

2. 用户点击开始活体，调用摄像头录制视频并上传给后端（通过input 标签实现视频文件的读取并将视频文件转为base64字符串传给后端做活体检测）

<template>
  <!-- 不限制格式 -->
  <input
    type="file"
    accept="video/*"
    id="video"
    name="video"
    @change="uploadVideo"
    capture="user"
  />
  <!-- 限制格式 -->
  <!-- <input
    type="file"
    accept="video/mp4, video/avi, video/flv"
    id="video"
    name="video"
    @change="uploadVideo"
    capture="user"
  /> -->
</template>

<script>
export default {
  name: 'VideoUpload',

  methods: {
    uploadVideo(e) {
      // console.log(e);
      const file = e.target.files[0];
      // 限制格式，判断视频文件类型是否正确
      let errorMsg = null;
      if (!/video\/\w+/.test(file.type) || (/video\/\w+/.test(file.type) && (!/mp4/.test(file.type) && !/avi/.test(file.type) && !/flv/.test(file.type)))) {
        errorMsg = '请上传mp4, avi, flv类型的视频文件';
      }
      if (errorMsg) {
        console.log(errorMsg);
        e.target.value = null;
        return;
      }
      this.switchVideo(file);
    },
    
    // 将视频转为base64
    switchVideo(file) {
      const size = (file.size / 1024 / 1024).toFixed(3);
      if (size > 10) {
        console.log('视频大小超过限制，请控制录制时长在3~5s左右');
      } else {
        const reader = new FileReader();
        const rs = reader.readAsDataURL(file);
        // 将视频转为base64
        reader.onload = (event) => {
          let dataBase64 = event.target.result;
          dataBase64 = dataBase64.split(',')[1];
          //提交到后台部分略
          const path = 'https://后端上传视频的地址';
          const postData = {
            videoStr: dataBase64,
          };
          this.$http.post(path, postData).then((res) => {
          	console.log('上传成功');
          });
        };
      }
    },
  },
};
</script>

<style lang="less" scoped>
input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}
</style>

3. 后端返回活体状态并展示活体检测成功与否

4. 总结：官方文档接入paas模式的描述，需要配置请求公共参数以及密钥参数之类的配置，出于安全性和可控性考虑，不由前端直接调用face++和腾讯云慧眼的接口，而是后端封装接口供前端使用，前端调用后端提供的接口，后端再调用face++和腾讯云慧眼的服务。

saas模式活体检测流程

1. saas模式的活体检测，通常包含了身份证OCR进件和活体检测两个步骤，这个模式下，前端并不需要太大的工作量，直接从后端获取活体检测的token,将其拼接到face++或腾讯云慧眼提供的链接地址，再跳转到拼接好的地址上即可。

window.location.href = `https://${face++或者腾讯云慧眼提供的saas地址}?token=${faceToken}`;

2. 关于后端返回的token，通常是经过加密生成的，用于调用saas模式时进行鉴权。