[转](16条消息) uni

2023-07-30 00:43| 来源: 网络整理| 查看: 265

人脸识别 1、前言和思路2、打开摄像头 2.1、使用camera组件进行，借用.createCameraContext()对象来打开摄像头2.2、通过livePusher对象（直播推流技术）实现视频预览和截屏3、使用nvue来开发人脸识别 3.1、效果图3.2、代码4、使用微信小程序开发人脸识别5 nvue的背景图片

1、前言和思路

app开发一个人脸识别，实现刷脸功能首先要考虑的是实现流程： 1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果（相识度比） 2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频，截取图片交由第三发或自主开发来识别——返回结果（相识度比）

那么通过分析，我们只需要做两步骤:打开摄像头和自动读取视频或照片

2、打开摄像头

分步骤分析：打开摄像头，并展示视频效果在html上，目前有两种方式：

2.1、使用camera组件进行，借用.createCameraContext()对象来打开摄像头

因为我开发的是app，因此方法2.1并不可行。但是在微信小程序中实践过，是可以获取摄像头并自动截取照片的在这里插入图片描述

2.2、通过livePusher对象（直播推流技术）实现视频预览和截屏

在这里插入图片描述

现在就有两种获取推流的方式了：第一种是nvue开发，第二种vue开发如果是nvue开发，可以直接使用live-pusher组件进行直播推流，如果是vue开发，则需要使用h5+的plus.video.LivePusher对象来获取

下面我主要是以nvue进行开发，毕竟组件简单明了是吧，然后就遇到了很多坑…

3、使用nvue来开发人脸识别

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

3.1、效果图

在这里插入图片描述

3.2、代码

话不多说，直接上代码

html部分

返回人脸识别打开摄像头进行人脸识别

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; }

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

微信小程序开发人脸识别，有很大的限制，在于资质审核。资质如下微信文档https://cloud.tencent.com/document/product/1007/31071

5 nvue的背景图片

gai.png 在这里插入图片描述

【本文地址】

[转](16条消息) uni

[转](16条消息) uni

今日新闻

推荐新闻