百度H5活体校验实践

官方文档 Api

第一步: 获取 access_token

第二步: 获取语音校验码接口

第三步: 视频活体检测接口

这里重点说一下第三步: 百度入参video_base64 通过把视频转换成base64编码后的视频数据然后再提交给百度做校验
通过语音校验码和人的语音校验是否是当前录制的视频, 再通过人像校验是否是活体。

整理下相关知识点 :

• input[capture="camcorder"]
• FileReader
• FormData
• XMLHttpRequest
• webRTC

// 通过input唤起手机摄像机
<input type="file"
    class="camera-input"
    @change="iptChange($event)"
    ref="cameraInput"
    accept="video/*"
    capture="camcorder" />

在mobile模式下 手机是直接唤起摄像机, 并且不能通过上传本地视频的方式, 这样避免了用户作弊
而在pc中用户可以选择文件上传, 那就只有使用webRTC来获取用户图像再传输

iptChange (event) {
  const files = event.target.files || event.dataTransfer.files
  if (files && files.length > 0) {
    let file = files[0]
    if (file.size > 20 * 1024 * 1024) {
      // 视频大于20MB
      confirm('您录制的视频时间过大,请重新录制')
    } else {
      this.verify(file)
    }
  }
}   

通过拿到的file.size可以获取文件大小 在某个区间大小才允许用户上传

 verify (file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
}

此处用到了FileReader => readAsDataURL
将文件读取为base64格式 data:[<mediatype>][;base64],<data> 传输给百度做校验

FileReader 整理了个脑图

image.png

此处遇到一些问题

视频转base64之后 视频体积大了2倍左右, 在传输过程中, 想通过Network查下或者调试一下, 是相当蛋疼的事情, 手机分分钟就卡死了 ! 如何优化?

我想到的通过formdata传输二进制流给后端, 让后端再去转base64给百度

const formdata = new FormData()
formdata.append('videoFile', file)

const xhr = new XMLHttpRequest()

xhr.onload = () => {
  if (xhr.status === 200 || xhr.status === 304) {
    console.log('success')
  } else {
    console.log('服务器处理失败')
  }
}

xhr.onerror = () => {
  console.log('网络错误')
}

xhr.open('POST', 'apiUrl')
xhr.send(formdata)

本项目的开发环境用的vue-cli 用了axios 所以并没有用原生XMLHttpRequest 用 axios 直接上传
代码如下:

const formdata = new FormData()
formdata.append('videoFile', file)

this.$ajax.post('apiUrl', formdata).then(res => {})

需要注意的是

image.png

封装过axios之后, 发现设置content-type并没有作用, 而且boundary没有如预期那样.
最终排查原因是transformRequest通过qs.stringify转了一次请求数据, 其实content-type=multipart/form-data 是浏览器通过判断我们传输的数据自动添加上的 !

const config = {
  transformRequest: (data) => {
    return data
  }
}
this.$ajax.post('/baiduVerify.json', formdata, config).then(res => {})

Mobile版本的活体校验就这样解决了, PC的webRTC待我整理之后会写出来~

项目体验地址-实名认证之后会有活体校验