MiniScm/subpkg/dynamicFaceCheck/dynamicFaceCheck.vue

<template>
  <view class="content">
    <view class="camera-box" v-if="showcamera">
      <view class="camera-bg-box">
        <camera
          v-if="isOk"
          class="camera"
          device-position="front"
          flash="off"
          resolution="low"
        ></camera>
      </view>
      <view v-show="tipsText" class="camera-tip">{{ tipsText }}</view>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      cameraEngine: null,
      VKSession: null,
      showcamera: true,
      tipsText: "开始人脸检测",
      isOk: true,
      guestId: 0,
      idNumber: null,
      name: null,
    };
  },
  computed: {
    ...mapState("m_business", ["currentHotelId"]),
  },
  onShow() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting["scope.camera"]) {
          //获取摄像头权限
          wx.authorize({
            scope: "scope.camera",
            success() {
              that.showcamera = true;
              wx.showToast({
                title: "授权成功",
                icon: "success",
                duration: 1000,
              });
            },
            fail() {
              console.log("相机授权fail");
              wx.showModal({
                title: "提示",
                content: "尚未进行授权，功能将无法使用",
                cancelText: "取消",
                confirmText: "授权",
                success(res) {
                  console.log(res);
                  if (res.confirm) {
                    console.log("用户点击确定");
                    wx.openSetting({
                      //这里的方法是调到一个添加权限的页面，这里可以测试在拒绝授权的情况下设置中是否存在相机选项
                      success: (res) => {
                        if (!res.authSetting["scope.camera"]) {
                          wx.authorize({
                            scope: "scope.camera",
                            success() {
                              wx.showToast({
                                title: "授权成功",
                                icon: "success",
                                duration: 1000,
                              });
                              setTimeout(function () {
                                wx.navigateBack();
                              }, 1000);
                            },
                            fail() {
                              wx.showToast({
                                title: "您已取消授权",
                                icon: "error",
                                duration: 1000,
                              });
                              setTimeout(function () {
                                wx.navigateBack();
                              }, 1000);
                            },
                          });
                        }
                      },
                      fail: function () {
                        console.log("相机授权设置失败");
                      },
                    });
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                    wx.showToast({
                      title: "您已取消授权",
                      icon: "error",
                      duration: 1000,
                    });
                    setTimeout(function () {
                      wx.navigateBack();
                    }, 1000);
                  }
                },
              });
            },
          });
        }
      },
      fail(res) {
        console.log("22222222222222222" + JSON.stringify(res));
      },
    });
    console.log("OKkkkkkk");
    // 初始化相机引擎，更改调用，引用新接口
    this.initData();
  },

  onLoad(options) {
    console.log("tipsText", this.tipsText);
    this.guestId = options.guestId;
    this.idNumber = options.idNumber;
    this.name = options.name;
    console.log("guestId ", this.guestId);
    console.log("idNumber ", this.idNumber);
    console.log("name", this.name);
  },

  methods: {
    //visionkit人脸必须函数
    async detectFace(frame) {
      console.log("frame", frame.data);

      this.VKSession.detectFace({
        frameBuffer: frame.data,
        width: frame.width,
        height: frame.height,
        scoreThreshold: 0.8,
        sourceType: 0,
        modelMode: 1,
      });
    },

    //初始化相机引擎
    initData() {
      let that = this;
      //使用visionkit
      that.cameraEngine = wx.createCameraContext();
      let count = 0;
      //初始化相机
      const listener = that.cameraEngine.onCameraFrame((frame) => {
        count++;
        //每十帧分析一次
        if (count === 10) {
          this.detectFace(frame);

          count = 0;
        }
      });
      //开始监听数据帧
      listener.start();
      //创建VK对象
      that.VKSession = wx.createVKSession({
        version: "v1",
        track: {
          plane: {
            mode: 1,
          },
          face: {
            mode: 2,
          },
        },
      });
      //启动VK对象
      that.VKSession.start((errno) => {
        console.log("VKSession.start errno", errno);
        if (errno) {
          wx.showModal({
            title: "提示",
            content: "网络错误,请退出后重试",
            showCancel: false,
            confirmText: "确定",
            success(res) {
              console.log(res);
              if (res.confirm) {
                wx.navigateBack();
              }
            },
          });
        }
      });

      that.VKSession.on("updateAnchors", (anchors) => {
        console.log("anchors", anchors);
        console.log("anchors.length", anchors.length);
        anchors.forEach((anchor) => {
          console.log("anchor.points", anchor.points);
          console.log("anchor.origin", anchor.origin);
          console.log("anchor.size", anchor.size);
          console.log("anchor.angle", anchor.angle);
          console.log("anchor", anchor.confidence);
          if (anchors.length > 1) {
            that.tipsText = "请保证只有一个人";
          } else {
            const { pitch, roll, yaw } = anchor.angle;
            const standard = 0.3;

            if (
              Math.abs(pitch) >= standard ||
              Math.abs(roll) >= standard ||
              Math.abs(yaw) >= standard
            ) {
              that.tipsText = "请平视摄像头";
            } else if (
              anchor.origin.x < 0.15 ||
              anchor.origin.x > 0.3 ||
              anchor.origin.y < 0.2 ||
              anchor.origin.y > 0.45
            ) {
              this.tipsText = "请将人脸对准中心位置";
            } else if (
              anchor.confidence[0] <= 0.8 ||
              anchor.confidence[1] <= 0.8 ||
              anchor.confidence[2] <= 0.8 ||
              anchor.confidence[3] <= 0.8 ||
              anchor.confidence[4] <= 0.8
            ) {
              that.tipsText = "请勿遮挡五官";
            } else {
              listener.stop();
              that.tipsText = "即将拍照，请保持！";
              setTimeout(function () {
                that.handleTakePhotoClick();
              }, 1000);
              return;
            }
          }
        });
      });
    },

    // 拍照
    handleTakePhotoClick() {
      this.tipsText = "正在上传...";
      uni.showLoading({
        title: "正在人脸认证，请稍后",
      });
      this.cameraEngine.takePhoto({
        quality: "normal",
        success: ({ tempImagePath }) => {
          let mybase64 = wx
            .getFileSystemManager()
            .readFileSync(tempImagePath, "base64");
          this.afterRead(mybase64);
        },
      });
    },
    //上传
    async afterRead(mybase64) {
      let that = this;
      uni.$http
        .post("/faceVerification/checkPic", {
          hotelId: this.currentHotelId,
          faceData: mybase64,
        })
        .then(async (res) => {
          uni.hideLoading();
          console.log("mybase64", mybase64);
          if (res.data.code === 200 && res.data.success === true) {
            that.isOk = false;
            uni.showLoading({
              title: "正在人证比对，请稍后",
            });
            let yunjiFaceCheckInfo = {
              idNo: that.idNumber,
              name: that.name,
              image: mybase64,
            };
            let res = await uni.$http.post(
              "/faceVerification/yunjiVerification",
              yunjiFaceCheckInfo
            );
            if (res.data.success === true) {
              uni.showModal({
                content: "人证比对通过！",
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                    setTimeout(function () {
                      let pages = getCurrentPages();
                      console.log("pages", pages);
                      let prevPage = pages[pages.length - 2];
                      // prevPage.setData({
                      // 	pic: mybase64,
                      // });
                      wx.navigateBack({
                        success: () => {
                          prevPage.$vm.setGuestPicBase64ById(
                            that.guestId,
                            mybase64
                          );
                        },
                      });
                    }, 1000);
                  }
                },
              });
            } else {
              uni.showModal({
                content: "人证比对失败,请重试",
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                    that.initData();
                  }
                },
              });
            }
          } else {
            uni.showModal({
              content: "人脸认证失败,请重试",
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log("用户点击确定");
                  that.initData();
                }
              },
            });
          }
          console.log("checkPicRes", res);
        });
    },
  },
};
</script>

<style lang="scss">
.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(255, 255, 255, 0.998);
    }
  }

  .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%;
    color: rgb(0, 0, 0);
    transform: translateX(-50%);
    // .text-40-fff-600();
  }
}
</style>