uniapp自定义摄像界面方法 安卓h5已经验证 不使用插件

代码在最后

项目需求是要实现类似于微信扫描的人脸识别
来看看官方解释

官方解释.png

项目里面用到拍摄自定义页面，起初我尝试使用
Barcode 组件来写，然后效果并不好 ，不能修改为前摄像头。
然后去看了下 camera 这个组件只支持小程序？

camera.png

此时我的心已经凉了一大截！！！苍天啊，不会写原生插件怎么玩？？
然后我尝试使用plus写摄像的东西

plus.png

此时我的内心又懵逼了。

然后我放弃了uniapp转向 h5 来思考。
在csdn找到了h5解决方案 h5解决来源

最终使用webview来包裹实现了效果
代码见
https://gitee.com/superliuge/h5-camera
h5可以随便加遮罩啦

使用时需要官方的获取权限sdk获取权限 因为webview使用也需要权限

ios权限得打包时设置好

https://ext.dcloud.net.cn/plugin?id=594
然后导入 使用

import permision from '@/js_sdk/wa-permission/permission.js';
...
onLoad() {
        
        uni.getSystemInfo({
            success: async res => {
                if (res.platform == 'android') {
                    let typesOs = await permision.requestAndroidPermission(
                        'android.permission.CAMERA'
                    );
                    if (typesOs) {
                        return;
                    }
                    uni.showToast({
                        title: '请打开相机权限',
                        icon: 'loading'
                    });
                    setTimeout(() => {
                        uni.hideToast();
                        permision.gotoAppPermissionSetting();
                    }, 1000);
                } else {
                    if (permision.judgeIosPermission('camera')) {
                        return;
                    }
                    uni.showToast({
                        title: '请打开相机权限',
                        icon: 'loading'
                    });
                    let cam = plus.camera.getCamera(2);
                    cam.captureImage();
                    setTimeout(() => {
                        uni.hideToast();
                        permision.gotoAppPermissionSetting();
                    }, 1000);
                }
            }
        });
    },
...