vue3 移动端人脸活体检测 只限安卓

百度人脸配置项：https://ai.baidu.com/ai-doc/FACE/Zk37c1urr

前言

这里只限安卓

其实步骤很简单，1.先访问用户媒体设备。2.将视频流给到video回显出来。3.将video当前画面画到canvas，生成Base64。4.将base64生成照片传给百度人脸API判断是否为活体。

---

1.点击按钮打开摄像头，获取视频流并回显

<van-button type="primary" style="width:100%;z-index:9999;" @click="faceUse">拍摄人脸</van-button>
<video ref="refVideo" id="video" autoplay muted></video>
<canvas ref="refCanvas" :width="screenSize.width" :height="screenSize.height" :style="{ opacity: 0 }"></canvas>

const faceUse = () => {
getUserMedia({
    video: {
      width: 1920, height: 1080, facingMode: "user"
    }     /* 前置优先 */
  })
}

// 访问用户媒体设备 拿到视频流
const getUserMedia = (constrains) => {
  if (navigator.mediaDevices.getUserMedia) {
    //最新标准API
    navigator.mediaDevices.getUserMedia(constrains).then((res) => { success(res); }).catch((e) => { error(e); });
  } else if (navigator.webkitGetUserMedia) {
    //webkit内核浏览器
    navigator.webkitGetUserMedia(constrains).then((res) => { success(res); }).catch((e) => { error(e); });
  } else if (navigator.mozGetUserMedia) {
    //Firefox浏览器
    navagator.mozGetUserMedia(constrains).then((res) => { success(res); }).catch((e) => { error(e); });
  } else if (navigator.getUserMedia) {
    //旧版API
    navigator.getUserMedia(constrains).then((res) => { success(res); }).catch((e) => { error(e); });
  } else {
    showToast("你的浏览器不支持访问用户媒体设备")
  }
}

//成功并播放视频
const success = (stream) => {
  // webkit内核浏览器
  URL.value = window.URL || window.webkitURL;
  if ("srcObject" in proxy.$refs.refVideo) {
    proxy.$refs.refVideo.srcObject = stream;
  } else {
    proxy.$refs.refVideo.src = URL.value.createObjectURL(stream);
  }
  proxy.$refs.refVideo.onloadedmetadata = e => {
    proxy.$refs.refVideo.play();
    countDown();
  }
}
const error = (e) => {
  showToast("访问用户媒体失败" + e.name + "," + e.message);
}

//生成画布
const countDown = () => {
  context.value = proxy.$refs.refCanvas.getContext("2d");    // 画布
  tackPhoto();
}

//生成Base64，并上传生成图片
const tackPhoto = () => {
  context.value.drawImage(proxy.$refs.refVideo, 0, 0, screenSize.value.width, screenSize.value.height);
  // 保存为base64格式
  const Base64 = saveAsPNG(proxy.$refs.refCanvas);
  afterRead({ content: Base64 });
}

2.生成图片并调取百度人脸api

这里我是用是ali-oss生成图片，看你自己怎么使用。

const afterRead = (file) => {
  let imageName = generateUUID()
  var blob = dataURLtoBlob(file.content)
  //这里是oss方法 不用管 只需要生成图片就行
  uploadOSS(blob, `${imageName}.jpg`).then(async (result) => {
    console.log("🚀 ~ file: result:", result);
    faceVerify(result);
  })
}

const faceVerify = (filePaths, imageName, fd, blob) => {
  $.ajax({
    type: "POST",
    url: 你的头部 + '/rest/2.0/face/v3/faceverify?access_token=' + 你的AK,
    dataType: "json",
    data: JSON.stringify([
      {
        image: filePaths, //传照片
        image_type: "URL",
        face_field: "age,beauty,spoofing"
      }
    ]),
    beforeSend: function (xhr) {
      xhr.setRequestHeader("Content-Type", "application/json");
    },
    success: function (res) {
      console.log("🚀 ~ file: wageFaceConfirm.vue:158 ~ faceVerify ~ res:", res)
      if (!res.result) {
        //错误信息 我在下面贴了
        showToast(getFaceMessage(res.error_msg));
        return;
      }
      if (res.result.face_liveness < 0.8) {
        //如果调取成功了 会返回face_liveness 有范围值0~1 值越大就越接近活体
        showToast('请移入人脸');
        return;
      }
    }
    error: function (err) {
      showToast('活体检测失败');
      // console.log("error", err);
    }
}

// 获取人脸报错信息
function getFaceMessage(msg) {
  let toast = msg
  switch (msg) {
    case "network not available":
    case "rtse service return fail":
      toast = "服务端请求失败";
      break;
    case "pic not has face":
      toast = "图片中没有人脸";
      break;
    case "image check fail":
      toast = "无法解析人脸";
      break;
    case "match user is not found":
      toast = "未找到匹配的用户";
      break;
    case "the number of image is incorrect":
      toast = "图片的数量错误";
      break;
    case "get face fail":
      toast = "获取人脸图片失败";
      break;
    case "user is already exist":
      toast = "该用户已存在";
      break;
    case "user is not exist":
      toast = "找不到该用户";
      break;
    case "face is already exist":
      toast = "该人脸已存在";
      break;
    case "face is not exist":
      toast = "该人脸不存在";
      break;
    case "face is covered":
      toast = "人脸有被遮挡";
      break;
    case "face is fuzzy":
      toast = "人脸模糊";
      break;
    case "face light is not good":
      toast = "人脸光照不好";
      break;
    case "incomplete face":
      toast = "人脸不完整";
      break;
    case "liveness check fail":
      toast = "活体检测未通过";
      break;
    case "police picture is none or low quality":
      toast = "公安网图片不存在或质量过低";
      break;
    case "system busy":
      toast = "系统繁忙";
      break;
  }
  return toast
}

---

总结

这只是大概流程 具体代码看你的业务来改造。