目录

• 1. 微信小程序人脸识别
• • • 1. 初始化人脸识别
    • 2. 创建 camera 上下文 CameraContext 对象
    • 3.获取 Camera 实时帧数据
    • 4.人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
    • 5.完整代码
    • 附带绝对定位的圆角图片真机展示问题
• 2. H5人脸识别

1660033284021056

1. 微信小程序人脸识别

方案已废弃: 用到的第三方框架: upng.js及pako.js（速度太慢，容易卡顿）
推荐使用：微信小程序人脸识别改进版

1. 初始化人脸识别

	wx.initFaceDetect()

2. 创建 camera 上下文 CameraContext 对象

	this.cameraEngine = wx.createCameraContext();

3.获取 Camera 实时帧数据

	const listener = this.cameraEngine.onCameraFrame()

4.人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据

	wx.faceDetect()

5.完整代码

<template>
	<view>
		<view class="d-flex justify-content-between align-items-center update-box mt-40 mr-32">
			<!-- 可用iconfont -->
			<image @click="devicePosition=!devicePosition" class="camera-change-image" mode="widthFix"
				src="@/static/images/camera_change.png"></image>
		</view>
		<view class="head-image-box w-100 text-center position-relative">
			<!-- resolution：获取人脸图片后的清晰度 low:低 -->
			<camera v-if='isAuthCamera' :device-position="devicePosition ?'back': 'front'" class="camera" flash="off"
				resolution='low' />

			<view class="title mt-40" v-show="!tempImg && tipsText">{{ tipsText }}</view>
			<cover-view class="cover-box" v-show="isShow">
				<cover-image class="image-box" src="@/static/images/camera_verify.png"></cover-image>

				<!-- cover-view 不支持动画所以只能变通的形式实现 -->
				<cover-image :style="'transform: translateY('+translateY+'rpx);'" class="line"
					src="@/static/images/bg_line.png"></cover-image>
				<!-- <cover-view class="line"></cover-view> -->
			</cover-view>
		</view>
	</view>
</template>

<script>
	import upng from "@/common/js/upng.js"

	export default {
		name: 'index',
		data() {
			return {
				isShow: false,
				tipsText: '', // 错误文案提示
				tempImg: '', // 本地图片路径
				cameraEngine: null, // 相机引擎
				devicePosition: true, // 摄像头朝向
				isAuthCamera: true, // 是否拥有相机权限
				isVerify: false,
				translateY: -24,
				timer: null,
				isFlag: true,
				origin: null
			}
		},
		onShow: function() {
			this.isVerify = false;
			this.tipsText = "";
			this.isFlag = true;
		},
		onLoad(options) {
			this.origin = options.origin;

			this.initData();
			this.lineAnimation()
		},
		onUnload: function() {
			clearInterval(this.timer);
			this.timer = null;
			this.isFlag = false;
		},
		methods: {
			// 初始化相机引擎
			initData() {
				// #ifdef MP-WEIXIN
				// 1、初始化人脸识别
				wx.initFaceDetect()
				// 2、创建 camera 上下文 CameraContext 对象
				this.cameraEngine = wx.createCameraContext();
				this.isShow = true;
				// 3、获取 Camera 实时帧数据
				const listener = this.cameraEngine.onCameraFrame((frame) => {
					if (this.tempImg) {
						return;
					}
					// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
					wx.faceDetect({
						frameBuffer: frame.data,
						width: frame.width,
						height: frame.height,
						enablePoint: true,
						enableConf: true,
						enableAngle: true,
						enableMultiFace: true,
						success: (faceData) => {

							if (this.isVerify) return
							let face = faceData.faceInfo[0]
							if (face.x == -1 || face.y == -1) {
								this.tipsText = '检测不到人'
							}
							if (faceData.faceInfo.length > 1) {
								this.tipsText = '请保证只有一个人'
							} else {
								const {
									pitch,
									roll,
									yaw
								} = face.angleArray;
								const standard = 0.5
								if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
									Math.abs(yaw) >= standard) {
									this.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) {
									this.tipsText = '请勿遮挡五官'
								} else {
									this.tipsText = '校验中...'
									this.isVerify = true;
									
									// 太快获取的人脸可能比较抽象,给用户一个准备时间
									setTimeout(() => {
										//借助upng把流转为二进制数据
										let pngData = upng.encode([frame.data], frame.width,
												frame.height),
											base64 = arrayBufferToBase64(pngData);
											
										// 获取到base64后可以已上传，展示，或保存到本地
										
										var imageType = getImageType();

										function getImageType() {
											let type = "center"
											if (face.y / frame.height < 0.3333) {
												type = "top"
											} else if (face.y / frame.height > 0.6666) {
												type = "bottom"
											}
											return type;
										}

										//二进制转base64
										function arrayBufferToBase64(buffer) {
											var binary = '';
											var bytes = new Uint8Array(buffer);
											var len = bytes.byteLength;
											for (var i = 0; i < len; i++) {
												// unicode编码还原
												binary += String.fromCharCode(bytes[i]);
											}
											return "data:image/png;base64," + btoa(binary);
										}

										// 小程序没有window对象，需手动实现btoa()方法
										// 作用: 字符转base64
										function btoa(string) {
											const b64 =
												"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
											string = String(string);
											var bitmap, a, b, c,
												result = "",
												i = 0,
												rest = string.length %
												3; // To determine the final padding

											for (; i < string.length;) {
												if ((a = string.charCodeAt(i++)) > 255 ||
													(b = string.charCodeAt(i++)) > 255 ||
													(c = string.charCodeAt(i++)) > 255)
													throw new TypeError(
														"Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range."
													);

												bitmap = (a << 16) | (b << 8) | c;
												result += b64.charAt(bitmap >> 18 & 63) + b64
													.charAt(bitmap >> 12 & 63) +
													b64.charAt(bitmap >> 6 & 63) + b64.charAt(
														bitmap & 63);
											}

											return rest ? result.slice(0, rest - 3) + "==="
												.substring(rest) : result;
										};

										this.tipsText = '校验成功'
										setTimeout(() => {
											this.clickPushDetail(imageType);
										}, 50)
									}, 300)
								}
							}
						},
						fail: (err) => {
							if (this.isVerify) return
							if (err.x == -1 || err.y == -1) {
								this.tipsText = '检测不到人'
							} else {
								this.tipsText = err.errMsg || '网络错误，请退出页面重试'
							}
						},
					})
				})
				// 5、开始监听帧数据
				listener.start()
				// #endif
			},

			clickPushDetail(imageType) {
				if (!this.isFlag) return
				// 可以跳转到详情页面
			},
			lineAnimation() {
				if (this.timer) return
				this.timer = setInterval(() => {
					this.translateY += 3;
					if (this.translateY >= 460) {
						this.translateY = 10;
					}
				}, 12)
			},
		}
	}
</script>

<style>
	page {
		background-color: #000000;
	}
</style>
<style lang="scss" scoped>
	.d-flex {
	  display: flex;
	}
	
	.justify-content-center {
	  justify-content: center;
	}
	
	.align-items-center {
	  align-items: center;
	}
	
	
	.camera-change-image {
		width: 48rpx;
		margin-left: 40rpx;
	}
	
	.mr-32{
		margin-right: 32rpx;
	}
	
	.mt-40 {
	  margin-top: 40rpx;
	}
	
	.text-center {
	  text-align: center;
	}
	
	.position-relative{
		position: relative;
	}
	
	.w-100{
		width: 100%;
	}

	.update-box {
		color: #ffffff;
	}

	.head-image-box {
		position: absolute;
		top: 10vh;
		color: white;

		.camera {
			width: 100%;
			height: 872rpx;
		}

		.title {
			font-size: 48rpx;
			font-weight: bold;
		}

		.cover-box {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 500rpx;
			height: 500rpx;
		}

		.image-box {
			width: 100%;
			height: 100%;
		}

		.line {
			position: absolute;
			top: 0rpx;
			left: 8rpx;
			right: 8rpx;
			width: auto;
			height: 30rpx;
			// transform: translateY(-24rpx);
			// animation: radar-beam 1.5s infinite;
			// background: linear-gradient(180deg, rgba(13, 110, 217, 0) 0%, rgba(13, 110, 217, 0.4000) 100%);
			z-index: 2;
		}

		// @keyframes radar-beam {
		// 	0% {
		// 		transform: translateY(24rpx);
		// 	}

		// 	100% {
		// 		transform: translateY(450rpx);
		// 	}
		// }

	}
</style>

附带绝对定位的圆角图片真机展示问题

父元素添加：-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

.image-box {
				overflow: hidden;
				border-radius: 50%;
				-webkit-backface-visibility: hidden;
				-webkit-transform: translate3d(0, 0, 0);
				z-index: 1;

				.face-image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;

					&.top {
						top: 0;
					}

					&.bottom {
						bottom: 0;
					}

					&.center {
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}

借鉴于：ZegTsai

2. H5人脸识别

详见：h5人脸识别