最新提示：微信小程序上线前审核，要求你必须使用微信自带活体识别的sdk，自己开发的不会被允许通过，望周知！

这相信有很多小程序都会用，为啥呢？因为小程序压根不得给你用户身份证信息，所以替换做法就是你让用户上传身份证照片，然后你在人脸识别，判断是同一个人后，再将你信息录入数据库

1、在小程序端的活体识别方法

1、uniapp camera组件拍照 takePhoto

2、uniapp camera组件录像 startRecord

3、uniapp live-pusher组件视频推流方式

2、拍照方式实现人脸识别

因为项目要得紧，所以我这里使用最简单的拍照，拍八张，定时器每秒一张（后端用的是百度人脸识别api，有照片活体识别和视频活体识别），然后一起传给后端，不过更好的做法是拍一张传一张，成功则完成，识别失败那就再调拍照api，总的时间不超过十秒，在用户端看来是没有任何异常的。

<template><view class="face-detection"><view class="live-father"><view v-if="status==-1" class="camera-box"><view class="camera-tip"><image class="controls-play" src="../../static/img/own/face.png" mode=""></image></view></view><camera v-else class="camera-box" device-position="front" flash="off" @initdone="initdone" @stop="stop"@error="error"><cover-view class="camera-tip"><cover-image class="controls-play" src="../../static/img/own/face.png"></cover-image></cover-view></camera></view><button class="bottom" type="primary" :disabled="status==1"  @click="startFace">{{statusFilter()}}</button></view>
</template><script setup>import {ref,reactive,computed,getCurrentInstance,onBeforeUnmount,watch} from 'vue'import {onLoad,onReady,onHide,onError} from '@dcloudio/uni-app'import { pullAuth } from '@/utils'const {proxy} = getCurrentInstance()const context = ref(null)onHide(() => {photoStatus(3)})onError(() => {photoStatus(3)})onBeforeUnmount(() => {console.log(1);photoStatus()})const flag = ref(0)const time = ref(0) // 重新调用接口限制为10次const ctx = ref(null) // 相机对象const realUser = reactive({name: '',idNumber: ''})/*** 相机初始化完成*/const initdone = () => {console.log(2);photoStatus()}const startFace = () => {pullAuth('scope.camera', firstSuccess, firstFail)}/*** 相机状态回调*/const photoStatus = (type = 0) => {status.value = type}const status = ref(-1) // -1 => 相机未就绪，申请摄像头权限, 0 => 相机已就绪，但未开始, 1 => 进行中, 2 => 已结束, 3 => 重新识别const statusFilter = () => {switch (status.value) {case -1:return '开始识别'case 0:return '开始识别'case 1:return '正在识别中...'case 2:return '识别完成'case 3:return '重新识别'default:return '开始识别'}}/*** 拍照*/const takePhoto = () => {time.value++photoStatus(1)ctx.value.takePhoto({quality: 'high',success: (result) => {proxy.$api.user.faceRecognition({file: result.tempImagePath,userName: realUser.name,userNo: realUser.idNumber}).then(res => {if (res.code == 200) {uploadId()}}).catch(e => {flag.value = Date.now()})},fail: () => {console.log('fail');}});}watch(flag, val => {if (time.value >= 10) {uni.showToast({title: '人脸识别失败，请重试',icon: 'error'})photoStatus(3)time.value = 0} else {takePhoto()}})const uploadId = () => {proxy.$api.user.updateUser({userName: realUser.name,userNo: realUser.idNumber,editType: 1,id: uni.getStorageSync('id')}).then(res => {if (res.code == 200) {uni.setStorageSync('idCard', 1)uni.navigateTo({url: './userInfo'})}}).catch(e => {})}/*** 摄像头在非正常终止时触发，如退出后台等情况*/const stop = (e) => {photoStatus(3)}/*** 用户不允许使用摄像头时触发*/const error = (e) => {console.log(3);photoStatus()}const firstSuccess = () => {uni.showLoading({title: '初始化...'})photoStatus()if (!ctx.value) {ctx.value = uni.createCameraContext();}setTimeout(() => {uni.hideLoading()takePhoto()}, 500)}const firstFail = () => {photoStatus(-1)}onLoad((options) => {realUser.name = options.namerealUser.idNumber = options.idNumber})
</script><style lang="scss" scoped>.face-detection {background-color: #F3F3F3;height: 100vh;box-sizing: border-box;padding: 30rpx;position: relative;.live-father {width: 600rpx;height: 600rpx;border-radius: 50%;margin: 100rpx auto;.camera-box {width: 100%;height: 100%;border-radius: 50%;position: relative;background-image: linear-gradient(to right, #acb6e5, #86fde8);.camera-tip {text-align: center;line-height: 600rpx;font-size: 70rpx;font-weight: bold;color: #fff;.controls-play{width: 390rpx;height: 480rpx;position: absolute;top: 50%;left: 50%;z-index: 99;transform: translate(-50%, -50%);}}}}.bottom {margin: 60rpx auto 0;width: 690rpx;height: 98rpx;background-color: #CA2915;border-radius: 16rpx;font-size: 34rpx;font-weight: 400;color: #FFFFFF;line-height: 98rpx;text-align: center;}}
</style>

uniapp + vue3微信小程序开发（2）活体人脸识别相关推荐

uniapp + vue3微信小程序开发（4）身份信息认证
微信是无法获取用户的身份证信息,那么我们可以自己通过上传或者拍摄身份证,然后结合ocr进行识别,那么最后为了保证准确性,再通过人脸识别来比对,辨别是不是本人,关于人脸识别,在我这篇博客里介绍了 uni ...
uniapp + vue3微信小程序开发（5）授权
不知道大家在小程序授权的时候,会不会点击拒绝授权,然后第二次进来,哦豁..授权框就在也出不来了,这种问题,在很多线上正在使用的小程序也会出现的问题,所以说,大家貌似都不太注意这方面问题,下面就是我对这 ...
uniapp + vue3微信小程序开发（1）框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...
uniapp + vue3微信小程序开发（3）微信授权登录
整体思路: 接口获取openId => 用户微信信息入库 => 手机号授权入库逻辑详解: 我们知道小程序都是需要openId的,那我们可以通过前端获取,也可以通过后端接口获取, 前端就是 ...
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
文章目录小程序引用图片的几种方式小程序如何引用svg图片? 小程序根据主题色,动态修改svg颜色总结及注意点小程序引用图片的几种方式这一期我们直入主题,教大家如何动态改变图标的颜色. 首先, ...
微信小程序使用face++实现人脸识别登录注册
Face++是一个人工智能开放平台,要使用它我们得先注册并进入控制台创建API Key,这是前提. 平台网址:https://www.faceplusplus.com.cn 整个项目代码我已经上传到 ...
人脸表情识别微信小程序百度智能云人脸识别API（含完整项目文件）
展示界面展示正下方三个按钮: 左边:切换前后置摄像头中间:拍照右边:选择相册识别结果展示图像中有人脸时显示识别结果: 图像中无人脸时不显示识别结果: 获取百度智能云人脸识别API 1.进入 ...
微信小程序使用tensorflow做人脸识别检测卡顿的部分解决思路
1.tf.tidy() 防止内存溢出,特别是在ios上 return tf.tidy(() => {const raw_im = xxxreturn raw_im; }); 2.tf.dispo ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
uniapp手写_uni-app框架纯手写微信小程序开发左侧滑动菜单
原来到最后才发现有些东西,没有就真的没有.不行,就真的不行唠叨一会在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香),在大佬的指引下学会自己去写 ...

uniapp + vue3微信小程序开发（2）活体人脸识别

1、在小程序端的活体识别方法

2、拍照方式实现人脸识别

uniapp + vue3微信小程序开发（2）活体人脸识别相关推荐

最新文章

热门文章