UNI-APP 人脸识别分析及实现(前端)

APP开发一个人脸识别，实现刷脸功能

实现流程：

1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果（相识度比）
2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频，截取图片交由第三发或自主开发来识别——返回结果（相识度比）
通过分析，只需要做两步骤:打开摄像头和自动读取视频或照片

打开摄像头

分步骤分析：打开摄像头，并展示视频效果在html上，目前有两种方式：
1、使用camera组件进行，借用.createcameracontext()对象来打开摄像头（由于平台差异，uniapp不能在App、H5、支付宝/字节跳动/飞书/360小程序中使用）
2、通过livepusher对象（直播推流技术）实现视频预览和截屏
现在就有两种获取推流的方式了：第一种是nvue开发，第二种vue开发
如果是nvue开发，可以直接使用live-pusher组件进行直播推流，如果是vue开发，则需要使用h5+的plus.video.LivePusher对象来获取

使用NVUE来开发人脸识别

实际实现流程：调用手机摄像头创建直播推流 → 自动截图 → 压缩图片为base64格式→ 上传图片到服务器 → 服务器调用阿里人脸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">打开摄像头进行人脸识别</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;
}

使用微信小程序开发人脸识别

微信小程序开发人脸识别，有很大的限制，在于资质审核。
微信文档