uni-app 人脸识别分析及实现(前端) + nvue开发源码

雨点打透心脏的1/2处 2022-12-14 13:49 665阅读 0赞

### 人脸识别 ###

*  1、前言和思路
 *  2、打开摄像头
 *   *   *  2.1、使用camera组件进行，借用.createCameraContext()对象来打开摄像头
         *  2.2、通过livePusher对象（直播推流技术）实现视频预览和截屏
 *  3、使用nvue来开发人脸识别
 *   *  3.1、效果图
     *  3.2、代码
 *  4、使用微信小程序开发人脸识别
 *  5 nvue的背景图片

# 1、前言和思路 #

app开发一个人脸识别，实现刷脸功能  
首先要考虑的是实现流程：  
1、 打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果（相识度比）  
2、 打开摄像头——自动读取视频——传输给后端——后端通过解析视频，截取图片交由第三发或自主开发来识别——返回结果（相识度比）

那么通过分析，我们只需要做两步骤:**打开摄像头和自动读取视频或照片**

# 2、打开摄像头 #

分步骤分析：打开摄像头，并展示视频效果在html上，目前有两种方式：

### 2.1、使用camera组件进行，借用.createCameraContext()对象来打开摄像头 ###

因为我开发的是app，因此方法2.1并不可行。但是在微信小程序中实践过，是可以获取摄像头并自动截取照片的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center]

### 2.2、通过livePusher对象（直播推流技术）实现视频预览和截屏 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 1]

现在就有两种获取推流的方式了：第一种是nvue开发，第二种vue开发  
**如果是nvue开发，可以直接使用live-pusher组件进行直播推流，如果是vue开发，则需要使用h5+的plus.video.LivePusher对象来获取**

下面我主要是以nvue进行开发，毕竟组件简单明了是吧，然后就遇到了很多坑…

# 3、使用nvue来开发人脸识别 #

在捋一遍我所使用的实际实现流程：  
 调用手机摄像头创建直播推流 → 自动截图 → 压缩图片为base64格式→ 上传图片到服务器 → 服务器调用阿里人脸api → 阿里api返回该图片与底图的相似度

## 3.1、效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 2]

## 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中 或 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));
                        }
                    });
                },
    			// 拍照事件
                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][https_cloud.tencent.com_document_product_1007_31071]

# 5 nvue的背景图片 #

gai.png  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3d121e4b7a7b4be3bd55b5a5bf474e59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/4da8da095ae6420daa68096e75e88202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/0fa27b4643d949198379ff9d895cc95e.png
[https_cloud.tencent.com_document_product_1007_31071]: https://cloud.tencent.com/document/product/1007/31071
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/f8731bdb99924ce899f9f595c0bfdf4f.png