UNI-APP 人脸识别分析及实现(前端)(unik面部识别怎么用)

UNI-APP 人脸识别分析及实现(前端) APP开发一个人脸识别，实现刷脸功能实现流程：

推荐整理分享UNI-APP 人脸识别分析及实现(前端)(unik面部识别怎么用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp人脸识别打卡,uniapp人脸识别登录,uniapp人脸识别身份证,uniapp人脸识别方案,uniapp人脸识别上传,uniapp人脸识别上传,uniapp人脸识别上传,uniapp人脸识别方案,内容如对您有帮助，希望把文章链接给更多的朋友！

1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果（相识度比） 2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频，截取图片交由第三发或自主开发来识别——返回结果（相识度比） 通过分析，只需要做两步骤:打开摄像头和自动读取视频或照片

打开摄像头

分步骤分析：打开摄像头，并展示视频效果在html上，目前有两种方式： 1、使用camera组件进行，借用.createcameracontext()对象来打开摄像头（由于平台差异，uniapp不能在App、H5、支付宝/字节跳动/飞书/360小程序中使用） 2、通过livepusher对象（直播推流技术）实现视频预览和截屏 现在就有两种获取推流的方式了：第一种是nvue开发，第二种vue开发 如果是nvue开发，可以直接使用live-pusher组件进行直播推流，如果是vue开发，则需要使用h5+的plus.video.LivePusher对象来获取

使用NVUE来开发人脸识别

实际实现流程：调用手机摄像头创建直播推流 → 自动截图 → 压缩图片为base64格式→ 上传图片到服务器 → 服务器调用阿里人脸api → 阿里api返回该图片与底图的相似度

html部分<template> <view><div class="custom" :style="{height: CustomBar+'px'}"><view class="navcontent" :style="[{top:statusBar + 'px'}]"><text style="color: #FFFFFF;font-size: 16px;line-height: 45px;" class="iconfont icon-xiangzuo" @click="BackPage">返回</text><text style="color: #FFFFFF;font-size: 16px;line-height: 45px;">人脸识别</text><text></text></view></div> <div class="livefater"><div style="width: 350px;height: 350px;border-radius: 350px;overflow: hidden;background-color: #CCCCCC;"><live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"aspect="1:1" @statechange="statechange" @netstatus="netstatus" @error = "error"></live-pusher></div><cover-image src="../static/image/gai.png" class="gaiimg"></cover-image></div> <button class="btn" @click="startPreview">打开摄像头进行人脸识别</button> </view></template>js部分 export default { data: { fil: true,imgList:[""],statusBar:'',CustomBar: 0 },onLoad(){// this.startPreview()}, onReady() { // 注意：需要在onReady中 或 onLoad 延时 this.context = uni.createLivePusherContext("livePusher", this);var that = thisuni.getSystemInfo({ success:function(e){ // 计算导航栏高度that.statusBar = e.statusBarHeight // #ifndef MP if(e.platform == 'android') { that.CustomBar = e.statusBarHeight + 50 }else { that.CustomBar = e.statusBarHeight + 45 } console.log(that.statusBar)// #endif // #ifdef MP-WEIXIN let custom = wx.getMenuButtonBoundingClientRect() that.CustomBar = custom.bottom + custom.top - e.statusBarHeight // #endif // #ifdef MP-ALIPAY that.CustomBar = e.statusBarHeight + e.titleBarHeight // #endif }}) }, methods: {Timer(){}, statechange(e) { console.log("statechange:" + JSON.stringify(e)); }, netstatus(e) { console.log("netstatus:" + JSON.stringify(e)); }, error(e) { console.log("error:" + JSON.stringify(e)); }, start: function() { this.context.start({ success: (a) => { console.log("livePusher.start:" + JSON.stringify(a)); } }); }, close: function() { this.context.close({ success: (a) => { console.log("livePusher.close:" + JSON.stringify(a)); } }); },// 拍照事件 snapshot: function() {var that = this this.context.snapshot({ success: (e) => { console.log(JSON.stringify(e));that.getMinImage(e.message.tempImagePath) } }); },// 开启摄像头 startPreview() {console.log("1")var that = this this.context.startPreview({ success: (a) => { console.log("livePusher.startPreview:" + JSON.stringify(a));that.Timer = setInterval(function(){that.snapshot()if(that.imgList.length>3){console.log("3")clearInterval(that.Timer)}},2000) } }); },// 使用plus.zip.compressImage压缩图片并转换成base64getMinImage(imgPath) {plus.zip.compressImage({src: imgPath,dst: imgPath,overwrite: true,quality: 40},zipRes => {setTimeout(() => {var reader = new plus.io.FileReader();reader.onloadend = res => {var speech = res.target.result; //base64图片console.log(speech);this.imgList.push(speech);};//一定要使用plus.io.convertLocalFileSystemURL将target地址转换为本地文件地址，否则readAsDataURL会找不到文件reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target));}, 1000);},function(error) {console.log('Compress error!', error);});},BackPage() {uni.navigateBack({delta: 1});} } }css部分.custom{background-color: #2C65F7;}.navcontent{height: 45px;display: -ms-flex;display: -webkit-flex;display: flex;justify-content:space-around;flex-direction:row;color:#FFFFFF;}.livePusher{width: 350px;height: 350px;}.livefater{display: -ms-flex;display: -webkit-flex;display: flex;justify-content:center;flex-direction:column;align-items:center;margin-top: 50rpx;margin-bottom: 50rpx;height: 350px;}.gaiimg{width: 350px;height: 350px;margin-top: -350px;}使用微信小程序开发人脸识别

微信小程序开发人脸识别，有很大的限制，在于资质审核。 微信文档