uniapp人脸识别解决方案

APP端:
因为APP端无法使用uni的camera组件,最开始考虑使用内嵌webview的方式,通过原生dom调用video渲染画面然后通过canvas截图。但是此方案兼容性在ios几乎为0,如果app只考虑安卓端的话可以采用此方案。后面又想用live-pusher组件来实现,但是发现快照api好像需要真实流地址才能截取图像。因为种种原因,也是安卓ios双端兼容性不佳。最终决定采用5+api实现。经实测5+api兼容性还算可以,但是毕竟是调用原生能力,肯定是没有原生开发那么丝滑的,难免会出现一些不可预测的兼容性问题。所以建议app和手机硬件交互强的话还是不要用uni开发了。不然真的是翻文档能翻死人。社区也找不到靠谱的解决方案。

5+api 文档
https://www.html5plus.org/doc/zh_cn/video.html#plus.video.createLivePusher

就是使用这个api调用原生的camera完成。并且可以直接在预览模式下完成快照,也不需要真实的推流地址。

<template>
    <view class="content">
        <view class="c-footer">
            <view class="msg-box">
                <view class="msg">
                    1、请保证本人验证。
                </view>
                <view class="msg">
                    2、请使头像正面位于画框中。
                </view>
                <view class="msg">
                    3、请使头像尽量清晰。
                </view>
                <view class="msg">
                    4、请保证眼镜不反光,双眼可见。
                </view>
                <view class="msg">
                    5、请保证无墨镜,口罩,面膜等遮挡物。
                </view>
                <view class="msg">
                    6、请不要化浓妆,不要戴帽子。
                </view>
            </view>
            <view class="but" @click="snapshotPusher" v-if="!cilckSwitch">采集本人人脸</view>
        </view>
    </view>
</template>

<script>
    import permission from '../../util/permission.js'
    export default {
        data() {
            return {
                type: '', //是否是补签拉起的人脸识别
                imgData: '',
                pusher: null,
                scanWin: null,
                faceInitTimeout: null,
                snapshTimeout: null,
                uploadFileTask: null,
                cilckSwitch: false, //防止多次点击
            };
        },
        methods: {
            //人脸比对
            handleFaceContrast(param) {
                uni.hideLoading()
                this.$http({
                    url: '/API_AUTH/AppIaiFace/faceContrast.api',
                    data: {
                        ...param,
                        userid: uni.getStorageSync('userInfo').id
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.compareResult == 1) {
                        let pages = getCurrentPages(); //获取所有页面栈实例列表
                        let nowPage = pages[pages.length - 1]; //当前页页面实例
                        let prevPage = pages[pages.length - 2]; //上一页页面实例
                        if (this.type == 'signOut') {
                            prevPage.$vm.signOutXh = param.xh;
                            prevPage.$vm.signOutPhotoPath = param.path
                        } else {
                            prevPage.$vm.xh = param.xh;
                            prevPage.$vm.photoPath = param.path
                        }
                        uni.navigateBack()
                    } else {
                        uni.showToast({
                            title: '人脸比对不通过,请重试',
                            icon: 'none'
                        })
                        this.cilckSwitch = false
                    }
                }).catch(err => {
                    uni.showToast({
                        title: '人脸比对不通过,请重试',
                        icon: 'none'
                    })
                    this.cilckSwitch = false
                })
            },
            //初始化
             faceInit() {
                 uni.showLoading({
                    title: '请稍后...'
                 })
                this.faceInitTimeout = setTimeout(async () => {
                    //创建livepusher
                    if (uni.getSystemInfoSync().platform === 'android') {
                        const data1 = await permission.requestAndroidPermission(
                            "android.permission.RECORD_AUDIO")
                        const data2 = await permission.requestAndroidPermission("android.permission.CAMERA")
                        console.log(data1,data2,1111)
                        if (data1 == 1 && data2 == 1) {
                            this.pusherInit();
                        }
                    } else {
                        this.pusherInit();
                    }
                    //覆盖在视频之上的内容,根据实际情况编写
                    // this.scanWin = plus.webview.create('/hybrid/html/faceTip.html', '', {
                    //  background: 'transparent'
                    // });
                    //新引入的webView显示
                    // this.scanWin.show();
                    //初始化上传本地文件的api
                    this.initUploader()
                }, 500);
            },
            //初始化播放器
            pusherInit() {
                const currentWebview = this.$mp.page.$getAppWebview();
                this.pusher = plus.video.createLivePusher('livepusher', {
                    url: '',
                    top: '0px',
                    left: '0px',
                    width: '100%',
                    height: '50%',
                    position: 'absolute',
                    aspect: '9:16',
                    muted: false,
                    'z-index': 999999,
                    'border-radius': '50%',
                });
                currentWebview.append(this.pusher);
                //反转摄像头
                this.pusher.switchCamera();
                //开始预览
                this.pusher.preview();
                uni.hideLoading()
            },
            //初始化读取本地文件
            initUploader() {
                let that = this
                this.uploadFileTask = plus.uploader.createUpload(
                    "完整的接口请求地址", {
                        method: "POST",
                        headers: {
                            // 修改请求头Content-Type类型 此类型为文件上传
                          
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凉亭下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值