uniapp -人臉識別 - 前端實現(xiàn)

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;

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市钧唐,隨后出現(xiàn)的幾起案子忙灼,更是在濱河造成了極大的恐慌,老刑警劉巖钝侠,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件该园,死亡現(xiàn)場離奇詭異,居然都是意外死亡帅韧,警方通過查閱死者的電腦和手機里初,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來忽舟,“玉大人双妨,你說我怎么就攤上這事《T模” “怎么了刁品?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長浩姥。 經(jīng)常有香客問我挑随,道長,這世上最難降的妖魔是什么及刻? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任崇堰,我火速辦了婚禮徙融,結(jié)果婚禮上容诬,老公的妹妹穿的比我還像新娘香伴。我一直安慰自己涯保,他們只是感情好旧困,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布寨蹋。 她就那樣靜靜地躺著蹄胰,像睡著了一般幕垦。 火紅的嫁衣襯著肌膚如雪丢氢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天先改,我揣著相機與錄音疚察,去河邊找鬼。 笑死仇奶,一個胖子當著我的面吹牛貌嫡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼岛抄,長吁一口氣:“原來是場噩夢啊……” “哼别惦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起夫椭,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤掸掸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蹭秋,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扰付,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年仁讨,在試婚紗的時候發(fā)現(xiàn)自己被綠了悯周。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡陪竿,死狀恐怖禽翼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情族跛,我是刑警寧澤闰挡,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站礁哄,受9級特大地震影響长酗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜桐绒,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一夺脾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧茉继,春花似錦咧叭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至派撕,卻和暖如春婉弹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背终吼。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工镀赌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人际跪。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓商佛,卻偏偏與公主長得像蛙粘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子威彰,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容