uni-app 微信小程序之实现使用百度云 人脸录入人脸识别功能

1. 实现效果

1.1 人脸录入效果

1. 未检测到人脸
2. 人脸录入成功
   
   录入成功后，可以在后台查看到自己的人脸数据
   
   1.2 小程序进行人脸拍照上传（上传失败状态）
   

1.2 人脸识别效果

1. 未检测到人脸
2. 人脸识别成功
3. 人脸识别失败
   

2. 准备工作（开始撸）

就是需要在百度智能云注册，并创建人脸识别的应用。（完全免费）

2.1 访问百度智能云注册

完成后进入管理控制台->产品服务->人工智能->人脸识别->创建应用->填写必要信息->立即创建




至此，我们已经完成了在云上的所有必要操作。下面，我们在小程序中，拍照上传即可。

3. 实现人脸录入代码

新建页面命名为： faceEntry

3.1 faceEntry.wxml

<view class="camera-box">
  <camera device-position="front" flash="off" binderror="error" class="camera"></camera>
  <view class="face-box">
    <button class="face" type="primary" bindtap="takePhoto"> 人脸录入 </button>
  </view>
</view>

3.2 faceEntry.js

const app = getApp()
Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    src: "", //图片的链接
    baidutoken: "",
    base64: "",
    msg: ""
  },

  //拍照
  takePhoto() {
    var that = this;
    //拍照
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath //获取图片
        })
        //图片base64编码
        wx.getFileSystemManager().readFile({
          filePath: this.data.src, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            this.setData({
              base64: res.data
            })
          }
        })
        this.getBaiduToken();
      } //拍照成功结束
    }) //调用相机结束


    //失败尝试
    wx.showToast({
      title: '请重试',
      icon: 'loading',
      duration: 500
    })
  },
  error(e) {
    console.log(e.detail)
  },

  getBaiduToken() {
    var that = this;
    //acess_token获取,qs:需要多次尝试
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址
      data: {
        grant_type: 'client_credentials',
        client_id: 'xxxxxxxxxxxxxxxxxxx', //用你创建的应用的API Key
        client_secret: 'xxxxxxxxxxxxxxxxxxx' //用你创建的应用的Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          baidutoken: res.data.access_token //获取到token
        })
        that.uploadPhoto();
      }
    })
  },

  uploadPhoto() {
    var that = this;
    //上传人脸进行注册-----test
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.baidutoken,
      method: 'POST',
      data: {
        image: this.data.base64,
        image_type: 'BASE64',
        group_id: 'xh_0713', //自己建的用户组id
        user_id: 'xiehao' //这里获取用户昵称
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          msg: res.data.error_msg
        })
        //做成功判断
        if (that.data.msg == "pic not has face") {
          wx.showToast({
            title: '未捕获到人脸',
            icon: 'error',
          })
        }
        if (that.data.msg == 'SUCCESS') {
          wx.showToast({
            title: '人脸录入成功',
            icon: 'success',
          })
        }
      }
    })
  },
})

3.3 faceEntry.wxss

.camera-box {
  width: 100%;
  height: 100vh;
  position: relative;
}

.camera-box .camera {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.camera-box .face-box {
  position: absolute;
  width: 100%;
  bottom: 40px;
  padding: 40rpx;
  box-sizing: border-box;
}

.camera-box .face-box .face {
  width: 100%;
}

4. 实现人脸识别代码

新建页面命名为： faceRecognition

4.1 faceRecognition.wxml

<view class="camera-box">
  <camera device-position="front" flash="off" binderror="error" class="camera"></camera>
  <view class="face-box">
    <button class="face" type="primary" bindtap="takePhoto"> 人脸识别 </button>
  </view>
</view>

4.2 faceRecognition.js

Page({
  data: {
    src: '',
    base64: "",
    baidutoken: "",
    msg: null
  },
  //拍照并编码
  takePhoto() {
    var that = this;
    //拍照
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        that.setData({
          src: res.tempImagePath
        })
        //图片base64编码
        wx.getFileSystemManager().readFile({
          filePath: that.data.src, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调          
            that.setData({
              base64: res.data
            })
            that.checkPhoto();
          }
        })
      }
    })

    wx.showToast({
      title: '请重试',
      icon: 'loading',
      duration: 500
    })
  },
  error(e) {
    console.log(e.detail)
  },
  checkPhoto() {
    var that = this;
    //acess_token获取
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token', //真实的接口地址
      data: {
        grant_type: 'client_credentials',
        client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', //用你创建的应用的API Key
        client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' //用你创建的应用的Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          baidutoken: res.data.access_token //获取到token
        })
        that.validPhoto();
      }
    })
  },
  validPhoto() {
    var that = this;
    //上传人脸进行 比对
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.baidutoken,
      method: 'POST',
      data: {
        image: this.data.base64,
        image_type: 'BASE64',
        group_id_list: 'xh_0713', //自己建的用户组id
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          // msg: res.data.result.user_list[0].score
          msg: res.data.error_msg
        })

        //做成功判断
        if (that.data.msg == "pic not has face") {
          wx.showToast({
            title: '未捕获到人脸',
            icon: 'error',
          })
        }
        if (that.data.msg == 'SUCCESS') {
          if(res.data.result.user_list[0].score>80){
            wx.showToast({
              title: '人脸识别成功',
              icon: 'success',
            })
          }else{
            wx.showToast({
              title: '人脸识别失败',
              icon: 'error',
            })
          }
        }
      }
    });
  }
})

4.3 faceRecognition.wxss

.camera-box {
  width: 100%;
  height: 100vh;
  position: relative;
}

.camera-box .camera {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.camera-box .face-box {
  position: absolute;
  width: 100%;
  bottom: 40px;
  padding: 40rpx;
  box-sizing: border-box;
}

.camera-box .face-box .face {
  width: 100%;
}