uni |
您所在的位置：网站首页 › uniapp调用摄像头人脸识别 › uni |
uni
文章目录
1. 实现效果1.1 人脸录入效果1.2 人脸识别效果
2. 准备工作（开始撸）2.1 访问百度智能云注册
3. 实现人脸录入代码3.1 faceEntry.wxml3.2 faceEntry.js3.3 faceEntry.wxss
4. 实现人脸识别代码4.1 faceRecognition.wxml4.2 faceRecognition.js4.3 faceRecognition.wxss
1. 实现效果
1.1 人脸录入效果
未检测到人脸人脸录入成功  录入成功后，可以在后台查看到自己的人脸数据  1.2 小程序进行人脸拍照上传（上传失败状态） 
1.2 人脸识别效果
未检测到人脸人脸识别成功人脸识别失败 
2. 准备工作（开始撸）
就是需要在百度智能云注册，并创建人脸识别的应用。（完全免费） 2.1 访问百度智能云注册完成后进入管理控制台->产品服务->人工智能->人脸识别->创建应用->填写必要信息->立即创建 新建页面命名为： faceEntry 3.1 faceEntry.wxml 人脸录入 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 人脸识别 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%; } |
至此，我们已经完成了在云上的所有必要操作。下面，我们在小程序中，拍照上传即可。【本文地址】