face-ca 活体检测-张张嘴

源码

• face-ca插件地址: https://github.com/Smile-lrn/face-ca.git
• 使用face-ca示例项目: https://github.com/Smile-lrn/-npm-faceca-.git

概述

face-ca中包含的活体检测有张张嘴，该依赖包输出的是符合活体检测条件的一张base64图片，使用者则可以通过把这张图在自己的vue文件中通过接口传给后端，然后根据后端返回的code码做不同结果的处理。请求接口返回结果后通过更改isRest值控制重置数据。使用者可以在自己的组件中通过activename控制人脸识别页面的展示隐藏。

  
  activename:控制人脸识别展示还是隐藏
  restActive：关闭人脸识别页面
  responseFun：该函数能拿到符合的截图，在该函数中调用接口进行其他数据处理

运行该示例项目

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

在自己的项目中引用

人脸识别

安装face-ca

  npm install face-ca --save-dev
  npm install

引入相关文件

main.js:
    import face from 'face-ca'
    face.install(Vue,{
      msg:'Hellworld'
      ...参数
    })

使用

.vue组件直接使用：
  
  activename:控制人脸识别展示还是隐藏
  restActive：关闭人脸识别页面
  responseFun：该函数能拿到符合的截图，在该函数中调用接口进行其他数据处理

模型加载错误

• 资源未加载到
• 测试无效这里手动把/node_modules/face-ca/src/assets/文件夹下的数据复制到当目录下/static/

flexible

安装flexible

npm install flexible --save

引用

main.js:
  // 移动端适配
  import 'lib-flexible/flexible.js'

vue组件中使用代码

html

js

    data() {
      return {
        msg: '',
        activeName: '',
        isRest:false
      };
    },
    methods: {
      // 进入人脸识别页面
      faceLogin() {
        this.activeName = 'active';
      },
      // 重置插件中的数据
      restactive(val){
        this.activeName = val
        this.isRest = false;
      },
      responseFun(data){
        // 活体检测后的base64图片
         console.log(data)
         setTimeout(()=>{
           this.isRest = true;
         },1000)
      }
    },