@hzab/face-recognition

组件模板

• [email protected]
• 需要先将 public 中的 models 文件复制到对应项目的 public 文件夹中，保证相关的 model

组件

示例

预加载 models

• 提高人脸识别组件首次响应速度

import { initModel } from "@hzab/face-recognition";

// 加载 model 模块文件目录地址按需配置
initModel("./models/model_js");

人脸识别组件加载

import { useRef } from "react";

import FaceRecognition, { IInitParams } from "@hzab/face-recognition";

const Index: any = () => {
  const faceRef = useRef<IInitParams>();

  function faceInit(params) {
    faceRef.current = params;
  }

  function onStart() {
    if (faceRef.current) {
      faceRef.current?.onStart();
    }
  }

  function onClose() {
    if (faceRef.current) {
      faceRef.current?.onClose();
    }
  }

  function onSuccess(res) {
    console.log("onSuccess", res);
    return new Promise<void>((resolve) => {
      // 模拟请求
      setTimeout(() => {
        resolve();
      }, 2000);
    });
  }
  return (
    <div className="demo">
      <div className="pl30 pt30 mt30"> demo </div>
      <FaceRecognition
        onSuccess={onSuccess}
        // isPlugin
        // isAutoStart
        videoConf={
          {
            // facingMode: "environment",
          }
        }
        apiConf={{
          // model 文件目录地址
          modelDir: "./public/models/model_js",
        }}
        init={faceInit}
      />
    </div>
  );
};

export default Index;

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ----------- | --------- | ---- | ------ | -------------------------------------------------------- | | onSuccess | Function | 是 | - | 识别成功回调 | | wrapStyle | Object | 否 | - | 容器行内样式 | | interval | number | 否 | 300 | 定时器时间间隔 | | isAutoStart | boolean | 否 | true | 是否自动开启人脸识别 | | isPlugin | Object | 否 | false | 是否使用插件进行视频流播放 cordova-plugin-camera-preview | | init | Function | 否 | - | 加载成功回调 | | videoConf | Object | 否 | - | 视频流配置 | | faceConf | Object | 否 | - | 人脸识别配置 | | apiConf | Object | 否 | - | face-api 人脸识别组件配置参数 | | figureImg | string | 否 | - | 人脸示意区域图片 | | children | ReactNode | 否 | - | 子元素 |

faceConf

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | ------ | ---- | ------ | ----------------------------------------------------------------------- | | faceSizeRatio | number | 否 | 0.45 | 人脸大小最小阈值（占图片大小比值） 0-1 值越大人，要求脸越大 | | facePosRatio | number | 否 | 0.45 | 人脸在图片中心偏差占图片大小比值 0-1 值越大允许偏移量越大（越靠近边界） | | eyeTH | number | 否 | 3 | 眨眼阈值 >0 | | lipsTH | number | 否 | 8 | 张嘴差阈值 >0 | | lipsOpenTH | number | 否 | 15 | 张嘴阈值 >0 | | nodTH | number | 否 | 8 | 摇头阈值 >0 | | biasTH | number | 否 | 40 | 斜头阈值 >0 | | rockTH | number | 否 | 15 | 晃动阈值 >0 | | getFaceTH | number | 否 | 2 | 获取正脸晃动阈值 >0 | | scoreTH | number | 否 | 0.6 | 置信度得分阈值 |

apiConf

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | ------ | ---- | ----------------- | -------- | | modelDir | string | 否 | ./models/model_js | 模块目录 |

init 回调参数

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | --------------------- | ---- | ------ | -------------------------------- | | init | Function | 否 | | 初始化函数 | | onPlay | Function | 否 | | 开启视频流 | | onStart | Function | 否 | | 开始人脸识别 | | onClose | Function | 否 | | 关闭人脸识别及视频流 | | getFacePic | Function | 否 | | 从视频流中获取图片并进行人脸识别 | | getPic | Function | 否 | | 从视频流中获取图片 | | videoRef | Ref | 否 | | video 元素 Ref | | setOpen | Function | 否 | | 设置弹窗显示状态 | | faceApi | Object | 否 | | face-api.js 实例 |

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码

命令

• Mac 执行该命令，设置 pre-commit 为可执行文件

  • npm run mac-chmod
  • chmod +x .husky && chmod +x .husky/pre-commit

• 生成文档：npm run docs

• 本地运行：npm run dev

• 打包编译：npm run build

发布

• 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！

• 编译组件：npm run build

• 命令：npm publish --access public

• 发布目录：

  • src

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js