目录

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) returnlet 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.5if (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;}//二进制转base64function 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()方法// 作用: 字符转base64function btoa(string) {const b64 ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="string = String(string);var bitmap, a, b, c,result = "",i = 0,rest = string.length %3; // To determine the final paddingfor (; 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) returnif (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) returnthis.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人脸识别