uniapp+vue3+ts+百度人脸检测

百度人脸检测：https://console.bce.baidu.com/ai/?fromai=1#/ai/face/overview/index

免费资源包用完需要付费。

1、百度开通人脸检测

创建应用：https://console.bce.baidu.com/ai/?fromai=1#/ai/face/app/list

新建组->新建用户

实名认证->领取“人脸检测”资源：https://console.bce.baidu.com/ai/#/ai/face/overview/resource/getFree

2、uni
微信小程序：uni.createCameraContext()

0、展示

<up-modal :show="show"  title="人脸检测" @confirm="close()">
			<view class="slot-content">
                <!-- "front"表示使用前置摄像头、"back"表示使用后置摄像头，高度不能太小 -->
				<camera device-position="front" flash="off" style="width: 300px; height: 300px;border-radius: 50%;"></camera>
</view>
</up-modal>

// 使用 reactive 创建响应式状态
const state = reactive({
    baiduApiData: {
        apikey: '', // 创建应用时生成
        SecretKey: '' // 创建应用时生成
    },
    access_token: '',
    base64Img: '',
    // 检测到人脸的照片
    baseImage: ''
});

// 弹窗
const show = ref(false); 
const close = () => {
    show.value = false
}
const show_camera = () => {
    show.value = true

    // 初始化相机之后再调用，不然报错
    setTimeout(() => {
        to_camera()
    }, 1000);
}

1、拍照
2、图片 base64编码

const to_camera = () => {
    uni.showLoading({
        title: '加载中'
    });
    
	const cameraContext = uni.createCameraContext();
	cameraContext.takePhoto({
        quality: 'high',
		success: (res) => {
			console.log("cameraContext", res.tempImagePath)

            wx.getFileSystemManager().readFile({
                filePath: res.tempImagePath, //选择图片返回的相对路径
                encoding: 'base64', //编码格式
                success: (res) => { //成功的回调
                    state.base64Img = res.data

                    console.log("getFileSystemManager", res)

                    getAccessToken()
                }
            })

		},
        fail: (err) => {
            uni.hideLoading();
            console.log("to_camera02", err)
        }
	});
}

3、百度人脸检测获取token

const getAccessToken = () => {
    // 每次更新access_token
    let baiduApiData = state.baiduApiData;
    uni.request({
        url: "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id="+baiduApiData.apikey+"&client_secret="+baiduApiData.SecretKey,
        method: 'POST',
        dataType: "json",
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            state.access_token = res.data.access_token;
            console.log("getAccessToken", res.data.access_token)
            //获取到token后开始检测人像
            setTimeout(()=>{
                initBaiDuApiFunction()
            },1000)
        },
        fail(err) {
            uni.hideLoading();
            console.log(err)
        }
    })
}

4、检测人脸数据（传base64图片）

const initBaiDuApiFunction = () => {
    uni.request({
        url: "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=" + state.access_token,
        data: {//具体参数请自动查看api
            image: state.base64Img,
            image_type: "BASE64",
            max_face_num: 1,
            face_field: 'quality',
        },
        method: 'POST',
        dataType: "json",
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            console.log(res)
            if (res.data.error_code === 0) { //检测到人脸就开启拍照
                let faceList = res.data.result.face_list[0];
                let face_probability = faceList.face_probability > 0.6; //人脸置信度
                let quality = faceList.quality; //人脸质量
                let blur = quality.blur < 0.5; //人脸模糊度 0-1 0清晰 1模糊
                // let illumination = quality.illumination > 100; //脸部光照度 暂时不用
                // left_eye : 0.6, #左眼被遮挡的阈值
                // right_eye : 0.6, #右眼被遮挡的阈值
                // nose : 0.7, #鼻子被遮挡的阈值
                // mouth : 0.7, #嘴巴被遮挡的阈值
                // left_cheek : 0.8, #左脸颊被遮挡的阈值
                // right_cheek : 0.8, #右脸颊被遮挡的阈值
                // chin_contour : 0.6, #下巴被遮挡阈值
                let  occlusion =quality.occlusion;//遮挡情况
                let location = faceList.location;//头像位置信息
                let top = location.top;
                let left = location.left;
                
                let completeness = quality.completeness == 1; //人脸完整度
            
                if (face_probability && blur && completeness) {//获取人脸较为清晰可以开始身份检测
                    state.baseImage = 'data:image/png;base64,'+ state.base64Img//获取到的图片base64
                    uni.showToast({
                        title:"人脸检测成功！"
                    })
                    show.value = false
                    uni.hideLoading();
                }else{
                    uni.showToast({
                        title:"检测失败！"
                    })
                    //否则重新开始拍照
                    setTimeout(()=>{
                        to_camera()
                    },1000)
                }
                
            } else {
                //没有检测到人脸也重新开始拍照
                setTimeout(()=>{
                    to_camera()
                },1000)
            }
        },
        fail(err) {
            uni.hideLoading();
            console.log(err)
        }
    })
}