标签：flex nvue 人脸识别 console log 源码 摄像头
人脸识别
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中 或 onl oad 延时
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
---------------------
作者：tseng荒男
来源：CSDN
原文：https://blog.csdn.net/weixin_43236062/article/details/109065450
版权声明：本文为tseng荒男原创文章，转载请附上博文链接！
标签：flex,nvue,人脸识别,console,log,源码,摄像头 来源： https://blog.csdn.net/jiaoqi6132/article/details/117666140
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。