Feature

基于微信creame的api，對返回的幀使用blazeface解析人臉

blazeface是個啥？是谷歌官方提供的人臉識別模型，簡單好用上手快。

如何演示

下載這個倉庫，然后在小程序里導入項目即可，appid可以用測試號，代碼相對都比較簡單，關鍵的地方加了注釋

如何在你的項目里植入blazeface

首先先去申請下tensorflow.js小程序版本的插件，點擊鏈接 然后在app.json里聲明下，版本號改成最新的

{
  ...
  "plugins": {
    "tfjsPlugin": {
      "version": "0.1.0",
      "provider": "wx6afed118d9e81df9"
    }
  }
  ...
}
復制代碼

命令行里npm init一下（如果已經(jīng)有package.json就不用了） 然后往dependencies里加入這些依賴然后npm i

  "dependencies": {
    "@tensorflow-models/blazeface": "0.0.5",
    "@tensorflow/tfjs-converter": "2.0.1",
    "@tensorflow/tfjs-core": "2.0.1",
    "@tensorflow/tfjs-backend-webgl": "2.0.1",
    "@tensorflow/tfjs-backend-cpu": "2.0.1",
    "fetch-wechat": "0.0.3"
  }
復制代碼

或者你可以直接npm i @tensorflow-models/blazeface @tensorflow/tfjs-converter @tensorflow/tfjs-core @tensorflow/tfjs-backend-webgl @tensorflow/tfjs-backend-cpu fetch-wechat

在小程序的入口文件app.js里注冊tf：

const fetchWechat = require('fetch-wechat');
const tf = require('@tensorflow/tfjs-core');
const webgl = require('@tensorflow/tfjs-backend-webgl');
const plugin = requirePlugin('tfjsPlugin');

App({
  onLaunch: function () {
    plugin.configPlugin({
      // polyfill fetch function
      fetchFunc: fetchWechat.fetchFunc(),
      // inject tfjs runtime
      tf,
      // inject webgl backend
      webgl,
      // provide webgl canvas
      canvas: wx.createOffscreenCanvas()
    });
    ...

復制代碼

前往微信開發(fā)者工具-菜單欄-工具-構建NPM，本地設置里記得勾上“使用Npm模塊”。 OK，正常情況下到這里準備就完成了，但是因為blazeface是google寫的，理所當然他們的模型文件會放在tfhub上，那么很有可能你會下載不了他的模型

如果發(fā)現(xiàn)進入不了或者后面在使用的時候獲取不到model.json這個文件，要到\miniprogram_npm\@tensorflow-models\blazeface\index.js這個文件，然后拉到第12行，

// const BLAZEFACE_MODEL_URL = 'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1';
async function load({ maxFaces = 10, inputWidth = 128, inputHeight = 128, iouThreshold = 0.3, scoreThreshold = 0.75 } = {}) {
    // const blazeface = await tfconv.loadGraphModel(BLAZEFACE_MODEL_URL, { fromTFHub: true });
    const blazeface = await tfconv.loadGraphModel('https://cdn.hansuku.com/tensorflow/model.json');
    const model = new face_1.BlazeFaceModel(blazeface, inputWidth, inputHeight, maxFaces, iouThreshold, scoreThreshold);
    return model;
}
復制代碼

注意我注釋的那兩段話，我把他原先從tfhub上的資源指向了我自己的OSS里了，你可以在這個項目的model下找到model.json和group1-shard1of1.bin這兩個文件，把這兩個文件上傳到你的OSS，并且保持他們在同一級目錄，然后把這里的model.json地址指向你OSS的那個即可。

然后可以開始愉快的寫代碼了

使用

import * as blazeface from '@tensorflow-models/blazeface';
let tensorModel = null

Page({
  async onReady () {
    tensorModel = await blazeface.load()
  },
})
復制代碼

這里就是把blazeface的模型加載出來，我推薦把tensorModel 對象弄到全局，這樣方便你后面的方法使用它：

const imgData = { data: new Uint8Array(frame.data), width: frame.width, height: frame.height}
const returnTensors = false
const flipHorizontal = false
const annotateBoxes = false
const predictions = await tensorModel.estimateFaces(imgData, returnTensors, flipHorizontal, annotateBoxes)
復制代碼

tensorModel.estimateFaces這個方法允許傳入HTMLIMAGE對象、HTMLVIDEO對象、canvas對象和ImageData，但是在小程序里你懂得，我們只能傳入canvas對象和ImageData。(如有不正請指教，這個事情我還挺頭痛的)

其他參數(shù)含義：

• returnTensors: 是否返回tensor數(shù)據(jù)
• flipHorizontal: 畫面是否需要水平翻轉 主要針對移動端前置攝像頭捕獲的畫面都是反轉的，看實際需求開不開
• annotateBoxes: 是否返回五官數(shù)據(jù)，如果不開啟返回的數(shù)據(jù)里就不會有landmarks這個參數(shù)

返回值：

predictions會返回一個數(shù)組，如果長度為0就是沒檢測到人臉，長度是多少就是檢測到了多少張人臉。數(shù)組中會返回包含人臉在當前畫面中從0,0開始偏移的位置信息等，格式如下：

[
  {
    topLeft: [232.28, 145.26],
    bottomRight: [449.75, 308.36],
    probability: [0.998],
    landmarks: [
      [295.13, 177.64], // 右眼
      [382.32, 175.56], // 做眼
      [341.18, 205.03], // 鼻子
      [345.12, 250.61], // 嘴巴
      [252.76, 211.37], // 右耳
      [431.20, 204.93] // 左耳
    ]
  }
]
復制代碼

• topLeft 當前人臉位置的左上角頂點
• bottomRight 當前人臉位置的右下角定點
• landmarks 當前人臉五官的定位，順序參照上面(PS：你可以拿著這玩意往canvas上畫圖，就可以達到blazeface官網(wǎng)上的人臉結構圖效果)
• probability 識別精準度，0-1之間，越大越精準，可以通過這個來過濾一些誤判，比如必須是0.9以上的你才認為他是個人臉