uni-app app端 人臉識別

在聽到人臉識別，連忙去看看，去阿里 騰訊 看他們的人臉識別方法，官方sdk什么的。

到后來，需求確定了，拍照（照片）上傳，后台去識別是不是本人，這一瞬間從天堂到地獄，放着官方那么好的方法，不要。

用照片，還的自己去寫，去實現。

下面為大家提供一個 uni-app 自動拍照 上傳照片 后端做匹配處理。

參考插件市場的 https://ext.dcloud.net.cn/plugin?id=4892

在使用前 先去manifest.json 選擇APP模塊配置， 勾選直播推流

直接采用nvue開發，直接使用live-pusher組件進行直播推流，如果是vue開發，則需要使用h5+的plus.video.LivePusher對象來獲取

nuve js注意事項

注意nuve 頁面 main.js 的封裝函數 。無法直接調用（小程序其他的端沒有測試）

在APP端 this.api報錯，顯示是undefined，難道nvue頁面，要重新引入api文件

在APP端，main.js中掛載Vuex在nvue頁面無法使用this.$store.state.xxx

簡單粗暴點直接用uni.getStorageSync 重新獲取一遍

//獲取用戶數據 userInfo在Data里定義
this.userInfo = uni.getStorageSync('userInfo')

nuve css注意事項

單位只支持px

其他的em,rem,pt,%,upx 都不支持

需要重新引入外部css

不支持使用 import 的方式引入外部 css

<style src="@/common/test.css"></style>

　默認flex布

display: flex; //不需要寫
//直接用下面的標簽
flex-direction: column;
align-items: center;
justify-content: space-between;

頁面樣式

<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
        <view class="title">
            {{second}}秒之后開始識別
        </view>
        <view class="preview" :style="{ width: windowWidth, height: windowHeight-80 }">
            <live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="1" whiteness="0"
                aspect="2:3" min-bitrate="1000" audio-quality="16KHz" :auto-focus="true" :muted="true"
                :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
                :style="{ width: cameraWidth, height: cameraHeight }"></live-pusher>

            <!--提示語-->
            <cover-view class="remind">
                <text class="remind-text" style="">{{ message }}</text>
            </cover-view>

            <!--輔助線-->
            <cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight-80 }">
                <cover-image class="outline-img" src="../../static/idphotoskin.png"></cover-image>
            </cover-view>
    </view>
</view>

JS部分

<script>
    import operate from '../../common/operate.js'
    import api from '../../common/api.js'
    export default {
        data() {
            return {
                //提示
                message: '',
                //相機畫面寬度
                cameraWidth: '',
                //相機畫面寬度
                cameraHeight: '',
                //屏幕可用寬度
                windowWidth: '',
                //屏幕可用高度
                windowHeight: '',
                //流視頻對象
                livePusher: null,
                //照片
                snapshotsrc: null,
                //倒計時
                second: 0,
                ifPhoto: false,
                // 用戶信息
                userInfo: []
            };
        },
        onLoad() {
            //獲取屏幕高度
            this.initCamera();
            //獲取用戶數據
            this.userInfo = uni.getStorageSync('userInfo')
            setTimeout(() => {
                //倒計時
                this.getCount()
            }, 500)
        },
        onReady() {
            // console.log('初始化 直播組件');
            this.livePusher = uni.createLivePusherContext('livePusher', this);
        },
        onShow() {
            //開啟預覽並設置攝像頭
            this.startPreview();
        },
        methods: {
            //獲取屏幕高度
            initCamera() {
                let that = this
                uni.getSystemInfo({
                    success: function(res) {
                        that.windowWidth = res.windowWidth;
                        that.windowHeight = res.windowHeight;
                        that.cameraWidth = res.windowWidth;
                        that.cameraHeight = res.windowWidth * 1.5;
                    }
                });
            },
            //啟動相機
            startPreview() {
                this.livePusher.startPreview({
                    success(res) {
                        console.log('啟動相機', res)
                    }
                });
            },
            //停止相機
            stopPreview() {
                let that = this
                this.livePusher.stopPreview({
                    success(res) {
                        console.log('停止相機', res)
                    }
                });
            },
            //攝像頭 狀態
            statechange(e) {
                console.log('攝像頭', e);
                if (this.ifPhoto == true) {
                    //拍照
                    this.snapshot()
                }
            },
            //抓拍
            snapshot() {
                let that = this
                this.livePusher.snapshot({
                    success(res) {
                        that.snapshotsrc = res.message.tempImagePath;
                        that.uploadingImg(res.message.tempImagePath)
                    }
                });
            },
            // 倒計時
            getCount() {
                this.second = 5
                let timer = setInterval(() => {
                    this.second--;
                    if (this.second < 1) {
                        clearInterval(timer);
                        this.second = 0
                        this.ifPhoto = true
                        this.statechange()
                    }
                }, 1000)
            },
            // 圖片上傳
            uploadingImg(e) {
                let url = e
                // console.log(url);
                let that = this
                uni.uploadFile({
                    url: operate.api + 'api/common/upload',
                    filePath: url,
                    name: 'file',
                    formData: {
                        token: that.userInfo.token
                    },
                    success(res) {
                        // console.log(res);
                        let list = JSON.parse(res.data)
                        // console.log(list);
                        that.request(list.data.fullurl)
                    }
                })
            },
            //驗證請求
            request(url) {
                let data = {
                    token: this.userInfo.token,
                    photo: url
                }
                api.renzheng(data).then((res) => {
                    // console.log(res);
                    operate.toast({
                        title: res.data.msg
                    })
                    if (res.data.code == 1) {
                        setTimeout(() => {
                            operate.redirectTo('/pages/details/details')
                        }, 500)
                    }
                    if (res.data.code == 0) {
                        setTimeout(() => {
                            this.anew(res.data.msg)
                        }, 500)
                    }
                })
            },
            // 認證失敗，重新認證
            anew(msg) {
                let that = this
                uni.showModal({
                    content: msg,
                    confirmText: '重新審核',
                    success(res) {
                        if (res.confirm) {
                            // console.log('用戶點擊確定');
                            that.getCount()
                        } else if (res.cancel) {
                            // console.log('用戶點擊取消');
                            uni.navigateBack({
                                delta: 1
                            })
                        }
                    }
                })
            },
        }
    };
</script>

css 樣式

<style lang="scss">
    // 標題 
    .title {
        font-size: 35rpx;
        align-items: center;
        justify-content: center;
    }

    .live-camera {
        .preview {
            justify-content: center;
            align-items: center;

            .outline-box {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 99;
                align-items: center;
                justify-content: center;

                .outline-img {
                    width: 750rpx;
                    height: 1125rpx;
                }
            }

            .remind {
                position: absolute;
                top: 880rpx;
                width: 750rpx;
                z-index: 100;
                align-items: center;
                justify-content: center;

                .remind-text {
                    color: #dddddd;
                    font-weight: bold;
                }
            }
        }
    }
</style>