微信小程序实现人脸识别认证_微信小程序人脸识别的实现

微信小程序实现人脸识别认证

这个项目中使用的是阿里云的实人认证接口，需要录制视频上传

先说一下逻辑：

1、获取摄像头和录音权限；
2、调起摄像头用于录制视频，录制5s；
3、录制结束后上传视频；
4、取上传返回的视频地址，调用后端提供的人脸识别接口，判断视频中是否含有人脸；
5、通过人脸识别后会返回一个图片地址，调用后端提供的实人认证接口
6、若这个过程中出现错误，则重新录制上传，本项目中失败三次则提示认证失败，可重新识别

上代码：
wxml:

<view class='identification'>
  <view class='camera' wx:if="{{ showCamera }}">
    <camera device-position="front" flash="off" binderror="error"></camera>
  </view>
</view>
<view class='message' wx:if="{{msgStatus == 0}}">
  <text>将脸对准圆框内，即可自动扫描识别</text>
  <view wx:if="{{ recordStatus == 0 }}">准备开始录像</view>
  <view wx:elif="{{ recordStatus == 1 }}">{{countDownNum}}s</view>
  <view wx:else>录制结束</view>
</view>
<view class='message' wx:if="{{msgStatus == 1}}">
  <image src='{{host}}user/msgsuccess.png' mode='widthFix'></image>
  <view class='msgTitle'>认证成功</view>
  <view class='msgContent'>感谢您对我们的信任</view>
  <navigator open-type='switchTab' url='/pages/index/index' class='nextBtn'>进入首页</navigator>
</view>
<view class='message' wx:if="{{msgStatus == -1}}">
  <image src='{{host}}user/msgerror.png' mode='widthFix'></image>
  <view class='msgTitle'>认证失败</view>
  <view bindtap='rescan' class='nextBtn'>重新扫描</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

wxss

.identification {
  width: 480rpx;
  height: 480rpx;
  margin-top: 10%;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.identification .camera {
  width: 430rpx;
  height: 430rpx;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
}

.identification .camera .zz {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.identification .camera camera {
  width: 100%;
  height: 100%;
}

.message {
  text-align: center;
  margin-top: 60rpx;
}

.message text {
  font: 24rpx/50rpx "";
  color: #333;
  display: flex;
  justify-content: center;
}

.message view {
  font: 46rpx/50rpx "";
  color: #4877D1;
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}

.message view.msgTitle {
  font: 32rpx/50rpx "";
  color: #333;
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.message view.msgContent {
  font: 24rpx/50rpx "";
  color: #999;
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.message image {
  width: 70rpx;
  height: 70rpx;
}

.message .nextBtn {
  width: 400rpx;
  margin: 40rpx auto 0;
  background: #4877D1;
  color: #fff;
  font: 32rpx/80rpx "";
  border-radius: 50rpx;
}

.crl-dot {
  width: 10rpx;
  height: 10rpx;
  background: red;
  position: absolute;
  top: -10rpx;
  left: -10rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

js

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    countDownNum: 5, // 录制视频时间
    msgStatus: 0, // 识别状态，0为未识别或识别中，1为识别成功，-1为识别失败
    i: '',
    recordNum: 0, // 记录识别次数
    showCamera: false, // 是否显示相机
    recordStatus: 0 // 录制状态，0为未开始录制， 1为开始录制，2为结束录制
  },

  onLoad() {
    this.getAuthorize('scope.camera', 1)
  },
  getAuthorize: function(value, num) { // 判断是否授权摄像头和录音，num表示判断的序号，1为摄像头，2为录音
    let _this = this
    wx.getSetting({
      success: res => {
        console.log(res.authSetting)
        if (res.authSetting[value] != true) {
          wx.authorize({
            scope: value,
            success () {
              _this.successNext(num)
            }, fail() {
              console.log('未授权');
              wx.showModal({
                title: '开启' + (num == 1 ? '摄像机' : '录音') + '失败',
                showCancel: false,
                content: '点击确定重试!',
                success: function (res) {
                  if (res.confirm) {
                    _this.openSetting(value, num)
                  }
                }
              });
            }
          })
        } else { // 权限开启成功
          _this.successNext(num)
        }
      }
    })
  },
  openSetting: function(value, num) { // 打开设置页
    var _this =this;
    wx.openSetting({
      success(res) {
        if (res.authSetting[value] != true){
          wx.showModal({
            title: '开启' + (num == 1 ? '摄像机' : '录音') + '失败',
            showCancel: false,
            content: '点击确定重试!',
            success: function (res) {
              if (res.confirm) {
                _this.openSetting(value, num)
              }
            }
          });
        } else {
          _this.successNext(num)
        }
      }, fail(res) {
        console.log(res)
      }
    })
  },
  successNext: function(num) {
    if (num == 1) { // 摄像头权限获取成功，去获取录音权限
      this.getAuthorize('scope.record', 2)
    } else if (num == 2) { // 录音权限获取成功，开始录像
      this.openCamera();
      console.log('已授权');
    }
  },
  openCamera: function() { // 打开相机
    this.setData({
      showCamera: true
    })
    this.ctx = wx.createCameraContext();
    this.countDown();
  },

  countDown: function (e) { // 视频录制三秒
    let that = this;
    let countDownNum = 5; // 获取倒计时初始值
    let i = this.data.i;
    if (!i) {
      i = 2
    }
    that.data.recordNum++;
    that.setData({
      recordStatus: 1,
      timer: setInterval(function () {
        if (countDownNum == 5) {
          that.startRecord(); // 开始录制
        }
        countDownNum--;
        that.setData({
          countDownNum: countDownNum,
          i: i
        })
        if (countDownNum == 0) {
          clearInterval(that.data.timer); // 清空定时器
          that.stopRecord(); // 结束录制
        }
      }, 1000)
    })
  },


  startRecord() { // 开始录制
    var _this = this;
    _this.ctx.startRecord({
      success: (res) => {
        console.log('录像开始')
      },fail(res){
        console.log('录像未开始')
      }
    })
  },
  stopRecord() {
    var that = this;
    console.log('停止录像');
    that.ctx.stopRecord({
      success: (res) => {
        that.setData({
          recordStatus: 2
        })
        that.uploadFile(res)
      },fail(res){
        console.log(res);
        that.judgeStatus()
      }
    })
  },
  judgeStatus: function() { // 失败时判断是否继续识别
    var that = this;
    if (that.data.recordNum < 3 && that.data.msgStatus != 1) {
      setTimeout(function () {
        that.setData({
          countDownNum: 5
        })
        that.countDown();
      }, 1000)
    } else if (that.data.recordNum == 3 && that.data.msgStatus != 1) {
      that.setData({
        countDownNum: 5,
        msgStatus: -1
      })
    }
  },

  uploadFile: function(file) { // 上传视频
    var that = this;
    wx.showLoading({
      title: '视频上传中',
    })
    wx.uploadFile({
      url: 'http://图片上传接口地址',
      filePath: file.tempThumbPath,
      name: 'img', // 上传的视频字段名
      success: function (res) {
        console.log(res);
        wx.hideLoading()
        if (res.code == '00000') { // 上传成功
          that.identify(res.data.img)
        } else {
          that.judgeStatus()
        }
      }, fail(res) {
        wx.hideLoading()
        wx.showToast({
          title: '视频上传失败',
        })
        that.judgeStatus()
      }
    })
  },

  identify: function(img) { // 请求后端人脸识别接口
    wx.showLoading({
      title: '正在识别',
    })
    wx.request({
      url: 'http://人脸识别接口地址', // 判断是否有人脸
      data: {
        image: img
      },
      method: "POST",
      success: function (res) {
         console.log(res)
        if (res.data.code == '00000') {
          console.log('人脸识别成功');
          var image_url = res.data.data.image_url;
          wx.request({
            url: 'http://实人认证接口地址', // 实人认证
            data: {
              image_url: res.data.data.image_url
            },
            method: "POST",
            success: function (res) {
              console.log('实人认证成功');
              wx.hideLoading();
              if (res.data.code == '00000') {
                that.setData({
                  msgStatus: 1
                })
                // 实人认证成功后的操作
              } else {
                wx.hideLoading();
                console.log('实人认证失败');
                that.judgeStatus()
              }
            }
          })
        } else {
          console.log('人脸识别失败' + that.data.recordNum);
          wx.hideLoading();
          that.judgeStatus()
        }
      }
    })
  },

  // 重新扫描
  rescan: function () {
    this.onLoad();
    this.setData({
      msgStatus: 0,
      recordNum: 0,
      recordStatus: 0
    })
  },

  onUnload: function () {
    var that = this;
    clearInterval(that.data.timer);
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244