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 = 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;
}
使用微信小程序开发人脸识别
微信小程序开发人脸识别,有很大的限制,在于资质审核。
微信文档
UNI-APP 人脸识别分析及实现(前端)相关推荐
- uni-app 人脸识别分析及实现(前端) + nvue开发源码
人脸识别 1.前言和思路 2.打开摄像头 2.1.使用camera组件进行,借用.createCameraContext()对象来打开摄像头 2.2.通过livePusher对象(直播推流技术)实现视 ...
- 腾讯云app人脸识别 java
人脸检测与分析和接口鉴权 --来自腾讯al开放平台 代码中用到的方法会在文末给出 人脸检测与分析文档地址:https://ai.qq.com/doc/detectface.shtml 分为两步,1接口 ...
- 嵌入式人脸识别sdk,支持前端、后端api特征比对
支持平台 iOS版本:iOS 10+ 安卓版本:Android 5.1.1+ 人脸检测 对传入的图像数据进行人脸检测,返回人脸的边框以及朝向信息,可用于后续的人脸识别.特征提取.活体检测等操作; 支持 ...
- 简单的说一下人脸识别的过程及前端实现
写在前面 最近写项目的时候在做一个登录的操作,但是我们因为是多端的,有小程序,有PC,后期可能还有公众号等,所以我们的登录是很多种不同的登录方式的,有最基本的账号密码登录,有微信扫码登录,有工号刷卡登 ...
- 国标GB28181(EasyGBS)/RTSP/HIKSDK/EHOME协议视频智能分析平台EasyCVR人脸识别智能分析功能拓展
计算机视觉技术作为人工智能(AI)技术发展的重要应用之一已经在我们的日常生活中屡见不鲜,AI人脸识别智能分析是基于人的脸部特征信息进行身份识别的一种生物识别技术,通常采用摄像机或摄像头采集含有人脸的图 ...
- 美国人到底为什么不待见人脸识别技术?
https://www.toutiao.com/a6695915398514082318/ 2019年5月,旧金山市对人脸识别技术发出了禁令,禁止该技术在政府机关和执法机关中使用,从而成为全球首个对人 ...
- 人脸识别走光引热议!原来后台能看到的不只有脸,网友已社死,审核辣哭眼...
明敏 博雯 发自 凹非寺 量子位 报道 | 公众号 QbitAI 不要光着人脸识别!不要光着人脸识别!不要光着人脸识别! 如果你以为,App人脸识别验证,只是拍你的脸- 那现在最新的爆料可能要让有些盆 ...
- 智能门禁(2)---安检人脸识别人证验证系统解决方案
安检人脸识别人证验证系统解决方案方案 一.概述及特点 基于可见光下的中远距离人脸识别算法--人脸识别智能监控平台,对多个摄像头监控范围内的多个人脸同时进行检测.跟踪和识别,实时对人员身份进行确认,一旦 ...
- 基于haar+adaboost的人脸检测、深度学习的人脸识别技术应用综述
版权声明:本文为博主原创文章,未经博主允许不得转载.欢迎交流,QQ:896922782,微信:15058133936 目录 第一节 核心技术 3 一.人脸检测 3 二.特征点检测 5 三.人脸归一化 ...
最新文章
- 使用jQuery的9个误区
- 拜托!不要再问我是否了解多线程了好吗
- 域netbios名什么意思_域渗透(二):域环境搭建
- 改变世界的七大NLP技术,你了解多少?(上)
- C和指针之函数之求参数列表中的最大值
- 便捷式计算机无线功能按钮,TP-Link TL-MR13U便携式无线路由器Client模式设置
- 回归分析中自变量共线性_具有大特征空间的回归分析中的变量选择
- kubernetes 应用快速入门
- 在CentOS 6.7部署wordpress博客系统Discuz论坛系统
- Codeforces Round #387 (Div. 2) 747E
- 三级java_java三级(最全的题库).doc
- js生成二维码 中间有logo
- Android studio成品源码项目计步器锻炼跑步步数,该计步器实现了实时计步,设定计划提醒
- vulntarget-a靶场的学习思考
- 原理 CDN加速原理
- MacBook无故黑屏,按键没反应解决办法
- Android 点击空白位置并且隐藏软键盘
- Ubuntu安装谷歌拼音输入法/搜狗拼音输入法
- Unresolved defparam reference to 'read_aclr_synch' in dcfifo_component.read_aclr_synch
- springboot电子邀请函制作