It is suitable for face collection, face detection and other functions.
The logic is to turn on the camera first, and after obtaining the real-time frame data, use wx.faceDetect to perform face detection. If the front face is detected, the photo can be uploaded to the backend.
<template>
<view class="content">
<view class="camera-box" v-if="showcamera == 1">
<view class="camera-bg-box"><camera class="camera" device-position="front" flash="off" resolution="low"></camera></view>
<view v-show="tipsText" class="camera-tip">{
{ tipsText }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tipsText: '',
};
},
onShow() {
// 初始化相机引擎
this.initData();
},
methods: {
// 初始化相机引擎
initData() {
let that = this;
// #ifdef MP-WEIXIN
// 1、初始化人脸识别
wx.initFaceDetect();
// 2、创建 camera 上下文 CameraContext 对象
that.cameraEngine = wx.createCameraContext();
// 3、获取 Camera 实时帧数据
const listener = that.cameraEngine.onCameraFrame(frame => {
// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
wx.faceDetect({
frameBuffer: frame.data,
width: frame.width,
height: frame.height,
enablePoint: true,
enableConf: true,
enableAngle: true,
enableMultiFace: true,
success: faceData => {
let face = faceData.faceInfo[0];
if (faceData.x == -1 || faceData.y == -1) {
that.tipsText = '检测不到人';
}
if (faceData.faceInfo.length > 1) {
that.tipsText = '请保证只有一个人';
} else {
const {
pitch, roll, yaw } = face.angleArray;
const standard = 0.3;
if (
Math.abs(pitch) >= standard ||
Math.abs(roll) >= standard ||
Math.abs(yaw) >= standard ||
face.x < 300 ||
face.x > 400 ||
face.y < 460 ||
face.y > 600
) {
that.tipsText = '请平视摄像头';
} else if (
face.confArray.global <= 0.8 ||
face.confArray.leftEye <= 0.8 ||
face.confArray.mouth <= 0.8 ||
face.confArray.nose <= 0.8 ||
face.confArray.rightEye <= 0.8
) {
that.tipsText = '请勿遮挡五官';
} else {
listener.stop();
let time = 3;
that.tipsText = time + '秒后拍照，请保持！';
let timer = setInterval(function() {
time--;
if (time <= 0) {
clearInterval(timer);
// 拍照
return that.handleTakePhotoClick();
} else {
that.tipsText = time + '秒后拍照，请保持！';
}
}, 1000);
// listener.stop();
}
}
},
fail: err => {
if (err.x == -1 || err.y == -1) {
that.tipsText = '检测不到人';
} else {
that.tipsText = err.errMsg || '网络错误，请退出页面重试';
}
}
});
});
// 5、开始监听帧数据
listener.start();
// #endif
},
// 拍照
handleTakePhotoClick() {
this.tipsText = '正在上传...';
// 检测是否授权相机
uni.getSetting({
success: res => {
if (!res.authSetting['scope.camera']) {
this.isAuthCamera = false;
uni.openSetting({
success: res => {
if (res.authSetting['scope.camera']) {
this.isAuthCamera = true;
}
}
});
}
}
});
this.cameraEngine.takePhoto({
quality: 'low',
success: ({
tempImagePath }) => {
let mybase64 = wx.getFileSystemManager().readFileSync(tempImagePath, 'base64');
// 调用后端接口进行人脸识别，使用base64图片格式
// 后端人脸识别可以使用阿里云，百度智能云这些
}
});
}
}
};
</script>
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.camera-box {
position: relative;
width: 100%;
height: 100%;
}
.camera-bg-box{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 100%;
width: 600rpx;
height: 600rpx;
border: 1000rpx solid rgba(0, 0, 0, 0.5);
}
}
.camera {
width: 100%;
height: 100%;
border-top: 200rpx solid black;
border-bottom: 200rpx solid black;
box-sizing: border-box;
}
.camera-tip {
position: absolute;
bottom: 220rpx;
left: 50%;
transform: translateX(-50%);
.text-40-fff-600();
}
}
Scan code to add q group
