dragon怎么读（UNI-APP 人脸识别分析及实现(前端)）

APP开发一个人脸识别    
    
    
，实现刷脸功能

实现流程：

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 = this uni.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压缩图片并转换成base64 getMinImage(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; }

使用微信小程序开发人脸识别

微信小程序开发人脸识别











，有很大的限制               ，在于资质审核 
    
    
。

微信文档