APP開發(fā)一個人臉識別，實(shí)現(xiàn)刷臉功能

實(shí)現(xiàn)流程：

1、打開攝像頭——自動讀取照片——傳輸給后端——后端交由第三發(fā)或自主開發(fā)來識別——返回結(jié)果（相識度比）
2、打開攝像頭——自動讀取視頻——傳輸給后端——后端通過解析視頻，截取圖片交由第三發(fā)或自主開發(fā)來識別——返回結(jié)果（相識度比）
通過分析，只需要做兩步驟:打開攝像頭和自動讀取視頻或照片

打開攝像頭

分步驟分析：打開攝像頭，并展示視頻效果在html上，目前有兩種方式：
1、使用camera組件進(jìn)行，借用.createcameracontext()對象來打開攝像頭（由于平臺差異，uniapp不能在App、H5、支付寶/字節(jié)跳動/飛書/360小程序中使用）
2、通過livepusher對象（直播推流技術(shù)）實(shí)現(xiàn)視頻預(yù)覽和截屏
現(xiàn)在就有兩種獲取推流的方式了：第一種是nvue開發(fā)，第二種vue開發(fā)
如果是nvue開發(fā)，可以直接使用live-pusher組件進(jìn)行直播推流，如果是vue開發(fā)，則需要使用h5+的plus.video.LivePusher對象來獲取

使用NVUE來開發(fā)人臉識別

實(shí)際實(shí)現(xiàn)流程：調(diào)用手機(jī)攝像頭創(chuàng)建直播推流 → 自動截圖 → 壓縮圖片為base64格式→ 上傳圖片到服務(wù)器 → 服務(wù)器調(diào)用阿里人臉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">打開攝像頭進(jìn)行人臉識別</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){  
					// 計(jì)算導(dǎo)航欄高度
					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壓縮圖片并轉(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;
}

使用微信小程序開發(fā)人臉識別

微信小程序開發(fā)人臉識別，有很大的限制，在于資質(zhì)審核。
微信文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-404434.html

到了這里，關(guān)于UNI-APP 人臉識別分析及實(shí)現(xiàn)(前端)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！