移动端H5及微信公众号实现人脸识别的可行性demo

原创

已于 2022-03-22 08:31:09 修改 · 4.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

于 2021-08-13 13:22:34 首次发布

该博客介绍了一个使用HTML、Vue和tracking.js库实现的实时人脸识别系统。系统通过手机前置摄像头捕获视频流，利用tracking.js跟踪人脸，并在canvas上绘制人脸照片，转化为base64编码后上传至第三方平台进行识别对比。整个过程包括获取视频流、人脸检测、拍照、图片转换和上传。

实现思路

1.利用手机的前置摄像头获取视频流
2.利用第三方插件tracking.js捕获人脸部分
3.捕获到人脸后利用canvas绘制带人脸的照片（业务需要：转为base64编码）
4.将绘制带人脸的照片和其他数据上传到第三方校验平台进行识别对比校验
5.结束完工 (getUserMedia要在https的安全域名下使用)

html

<!DOCTYPE html>
<html lang=en style="font-size: 37.5px">
<head>
  <meta charset=utf-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>人脸检测</title>
  <script src="../vue.min.2.6.js"></script>
  <script src="../tracking/tracking.js"></script>
  <script src="../tracking/data/face-min.js"></script>
</head>
<style>
  .face-capture {
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: #FF0000;
    position: relative;
  }

  .face-capture .title {
    
    
    position: absolute;
    top: 100px;
    color: #FF0000;
    font-size: 18px;
    z-index: 10;
  }

  .face-capture .rect {
    
    
    border: 2px solid #0aeb08;
    position: absolute;
    z-index: 3;
  }

</style>
<body>
<div id="app">
  <div v-show="showContainer" class="face-capture" id="face-capture">
    <video ref="refVideo" id="video" :width="screenSize.width" :height="screenSize.height" muted webkit-playsinline playsinline>