1、APP開發(fā)一個人臉識別，實現(xiàn)刷臉功能
首先要考慮的是實現(xiàn)流程：
1、?打開攝像頭——自動讀取照片——傳輸給后端——后端交由第三發(fā)或自主開發(fā)來識別——返回結(jié)果（相識度比）
2、?打開攝像頭——自動讀取視頻——傳輸給后端——后端通過解析視頻，截取圖片交由第三方或自主開發(fā)來識別——返回結(jié)果（相識度比）
我們只需要做兩步驟:打開攝像頭和自動讀取視頻或照片
2卖漫、打開攝像頭
分步驟分析：打開攝像頭，并展示視頻效果在html上弛槐，目前有兩種方式：
2.1懊亡、使用camera組件進行，借用.CREATECAMERACONTEXT()對象來打開攝像頭
因為我開發(fā)的是app乎串，camera組件不支持店枣，在小程序上是支持的
2.2速警、創(chuàng)建 live-player 上下文 livePlayerContext 對象。注意是直播的播放而不是推流鸯两。（直播推流技術(shù)）實現(xiàn)視頻預覽和截屏
流程為??調(diào)用手機攝像頭創(chuàng)建直播推流 → 自動截圖 → 壓縮圖片為base64格式→ 上傳圖片到服務(wù)器 → 服務(wù)器調(diào)用阿里人臉api → 阿里api返回該圖片與底圖的相似度
下面上代碼
<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>
<button type="default" @click="switchCamera">切換攝像頭</button>
<button type="default" @click="stop">停止識別</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));
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
//切換攝像頭
switchCamera() {
this.context.switchCamera({
success: (e) => {
console.log("切換成功",e)
}
})
},
//停止推流
stop() {
this.context.stop({
success: (e) => {
console.log("停止",e)
}
})
},
// 拍照事件
? ? ? ? ? ? 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壓縮圖片并轉(zhuǎn)換成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地址轉(zhuǎn)換為本地文件地址闷旧，否則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;
}
