uni-app 人脸识别分析及实现(前端) + nvue开发源码
人脸识别
- 1、前言和思路
- 2、打开摄像头
- 2.1、使用camera组件进行,借用.createCameraContext()对象来打开摄像头
- 2.2、通过livePusher对象(直播推流技术)实现视频预览和截屏
- 3、使用nvue来开发人脸识别
- 3.1、效果图
- 3.2、代码
- 4、使用微信小程序开发人脸识别
- 4.1、自主开发
- 4.2、E证通
- 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部分
<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 = thisthis.context.snapshot({success: (e) => {console.log(JSON.stringify(e));that.getMinImage(e.message.tempImagePath)}});},// 开启摄像头startPreview() {console.log("1")var that = thisthis.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;
}
4、使用微信小程序开发人脸识别
分两种,一种自主开发,一种借用第三方插件
4.1、自主开发
微信小程序开发人脸识别,有很大的限制,在于资质审核。
资质如下
微信文档https://cloud.tencent.com/document/product/1007/31071
4.2、E证通
无需证书小程序接入人脸识别—E证通
5 nvue的背景图片
gai.png
uni-app 人脸识别分析及实现(前端) + nvue开发源码相关推荐
- UNI-APP 人脸识别分析及实现(前端)
APP开发一个人脸识别,实现刷脸功能 实现流程: 1.打开摄像头--自动读取照片--传输给后端--后端交由第三发或自主开发来识别--返回结果(相识度比) 2.打开摄像头--自动读取视频--传输给后端- ...
- 腾讯云app人脸识别 java
人脸检测与分析和接口鉴权 --来自腾讯al开放平台 代码中用到的方法会在文末给出 人脸检测与分析文档地址:https://ai.qq.com/doc/detectface.shtml 分为两步,1接口 ...
- 畜牧养殖APP系统开发源码
畜牧养殖APP开发,畜牧养殖APP开发源码,畜牧养殖系统开发. 1.行业资讯展现:在畜牧养殖APP主页,会为用户展现各种行业资讯,有兴趣的用户可以自主查询相关内容,便捷用户深入了解行业信息内容和服务平 ...
- 红酒类小程序APP开发源码交付
红酒类小程序开发,红酒类APP开发源码交付.红酒类在各种餐桌上,酒是不可或缺的;而伴随着用户针对红酒认同度的提升,绝大多数用户都喜爱品尝高品质的红酒.因而,红酒类网上商城系统APP也就伴随着市场的需求 ...
- 短视频APP软件开发源码提供
短视频APP开发,短视频APP开发源码提供.谈起大家身旁这些喜爱看短视频的人肯定是不计其数的,终究大伙儿空闲情况下都是会喜爱拿起手机来刷一下游戏娱乐内容,因此这类取出手机上打开软件就能通过收看的短视频 ...
- 婚车租赁APP开发源码部署
婚车租赁APP开发,婚车租赁APP开发源码部署.说到婚车,大家第一时间就是想到到完婚,那么为了更好地确保婚宴的新意或是是品质,也必须租用婚车,对于此事,婚车租赁APP开发应时而生,构建网上预定平台. ...
- 动漫APP软件开发源码私有部署
动漫APP开发,动漫软件开发源码私有部署.伴随着动漫内容的不断完善,一些具备戏剧化.剧院化的动漫作品一样获得了众多女士用户的亲睐.那么假如说那样的一种方式深受销售市场关注,也会促使动漫APP软件开发更 ...
- 汽车维修APP开发源码现成
汽车维修APP开发,汽车维修APP开发源码现成.近些年因为大家生活水平不断提升,在我国汽车拥有量也在持续提升,由此可见汽车市场销售也有非常大的未来发展室内空间,而我们在驾车交通出行全过程中,在所难免碰 ...
- 在线买菜APP开发源码部署
在线买菜APP开发,在线买菜APP开发源码,在线买菜APP开发搭建部署.买菜是很多人煮饭前都必须完成的一个流程,之前的选购方法主要是根据线下推广的门店来完成实际操作的,可是随着移动互联的迅速发展趋势, ...
最新文章
- centos7安装mariadb
- python自动写作软件_有哪些适合长文的轻量级写作软件值得推荐?
- C#码农的大数据之路 - 使用C#编写MR作业
- Django Rest framework Request
- html列表远点小,HTML小知识点积累(示例代码)
- 数据结构以及算法的资源整理备忘
- Bootstrap3 表单-水平排列的表单
- winrar软件如何测试
- 存储基础(SATA、SCSI、RAID、SAN、SAS、FC)
- 【计算机视觉40例】案例39:易容术(换脸术、合成人脸)
- 360安全软件设置白名单
- 企业邮箱如何免费申请注册?
- 计算机计算用函数平均分,excel表格中数据怎样算均分-excel里如何使用IF函数挑出数值算平均分啊...
- 2022-XTU程设练习1
- win7系统计算机打不开6,Win7系统打不开ppt文件的六种原因和解决方法
- Android5.0之后打开开发者选项中的不保留活动,解决方案
- C++ using的用法
- 关于UCOS任务卡死的原因分析
- 2022数维杯思路分析+各题参考资料
- 如何使用 ChatGPT (人工智能聊天机器人) 运行 Docker 容器