小程序uniapp制作人脸识别

需求：模拟小程序做人脸识别功能

思路：利用uni.getStorageSync调用相机录制视频

***未做官方api对接，仅模拟做了视频的录制并上传数据库，uni.getStorageSync不支持H5（注意注意）

<template>
  <view class="face-cover-img">
    <view class="face-camera-box">
      <view class="face-camera-box-title"> 请将脸移入框内 </view>
      <image
        class="face-camera-box-img"
        src="@/static/user/video_img.gif"
        mode=""
      ></image>

      <view class="face-camera" v-show="!rzShow">
        <camera
          device-position="front"
          mode="normal"
          style="height: 100%; width: 100%"
          @initdone="initCamera"
        >
        </camera>
      </view>
    </view>

    <view class="footer"> 超时提醒：{{ tiems }}s </view>

    <!-- <u-mask :show="rzShow">
            <view class="popuWarp">
                <view class="popuRz">
                    <image src="../../../../static/imgs/common/rz.gif" mode=""></image>
                </view>
            </view>
        </u-mask> -->

    <u-overlay :show="rzShow">
      <view class="popuWarp">
        <view class="popuRz">
          <image src="@/static/user/rz.gif" mode=""></image>
        </view>
      </view>
    </u-overlay>
  </view>
</template>
<script>
//人脸识别(使用自己的接口)
import { init_face } from "@/api/user.js";

export default {
  data() {
    return {
      rzShow: false,
      tiems: 5,
      lights: false,
      cameraContext: {},
      windowHeight: 0,
      windowWidth: 0,
      cameraHeight: 0,
      type: "video",
      state: true,
      count: 3,
      timer: null,
      maskBg: ``,
      faceState: false,
      initState: false, // 设置初始状态，等待相机初始化成功
      show: {
        updateTip: false,
        cameraScope: false,
      },
      file: "",
      key: "",
      types: "",
      orderId: "",
      collateralId: "",
    };
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  onLoad(options) {
    // this.types = uni.getStorageSync("type");
    // this.orderId = uni.getStorageSync("orderId");
    // this.collateralId = uni.getStorageSync("collateralId");
    if (uni.createCameraContext) {
      setTimeout(() => {
        this.cameraContext = uni.createCameraContext();
      }, 200);
    } else {
      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
      uni.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      });
    }
    let tiem = setInterval(() => {
      this.tiems--;
      if (this.tiems < 1) {
        clearInterval(tiem);
        this.overCamera();
      }
    }, 1000);
  },
  onHide() {},
  methods: {
    // 初始化成功
    initCamera() {
      this.cameraContext.startRecord({
        quality: "low",
        success: (res) => {},
        fail: (err) => {
          console.log(err);
        },
      });
    },
    // 拍照或者视频录制结果
    overCamera() {
      console.log("this.cameraContext", this.cameraContext);
      // console.log('this.collateralId', this.collateralId);
      // console.log('this.orderId', this.orderId);
      // console.log('this.types', this.types);
      this.cameraContext.stopRecord({
        success: async (res) => {
          console.log("视频录制成功", res);
          this.rzShow = true;
          uni.uploadFile({
            url: this.vuex_baseUrl + "/common/upload",
            filePath: res.tempVideoPath,
            name: "file",
            header: {
              "login-platform": "MINI_PROGRAM",
              Authorization: "Bearer " + this.vuex_token,
            },

            success: async (uploadFileRes) => {
              let updata = JSON.parse(uploadFileRes.data);
              console.log("updata", updata);
              await init_face(
                {
                  file: updata.url,
                  type: this.types,
                  orderId: this.orderId,
                  collateralId: this.collateralId,
                },
                {
                  custom: {
                    toast: false,
                    catch: true,
                  },
                }
              )
                .then((data) => {
                  uni.navigateTo({
                    url: "/pages/home/pages/signature",
                  });
                })
                .catch((err) => {
                  console.log("err", err);
                  this.rzShow = false;
                  uni.navigateTo({
                    url: "/pages/home/pages/humanFaceClose?msg=" + err.msg,
                  });
                });
            },
            fail() {
              uni.redirectTo({
                url: "/pages/home/pages/humanFaceClose",
              });
            },
          });
        },
        fail(err) {
          console.log("1111视频录制失败", err);
          uni.redirectTo({
            url: "/pages/home/pages/humanFaceClose",
          });
        },
        complete() {
          console.log("走进方法了");
        },
      });
    },
  },
};
</script>
<style lang="scss">
$face-size: 500rpx;

.popuWarp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .popuRz {
    margin: auto;
    width: 240rpx;
    height: 240rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 180rpx;
      height: 180rpx;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 100rpx;
  z-index: 1000;
  text-align: center;
  color: #e6e6e6;
  font-size: 32rpx;
  font-weight: 500;
}

.face-cover-img {
  background-color: #000;
  height: 100vh;
  position: relative;

  .face-camera-box {
    width: 750rpx;
    height: 1000rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 16rpx;

    .face-camera-box-title {
      position: absolute;
      top: 140rpx;
      left: 0;
      right: 0;
      color: #ffffff;
      font-size: 40rpx;
      font-weight: 700;
      text-align: center;
      z-index: 1000;
    }

    .face-camera-box-img {
      width: 750rpx;
      height: 1000rpx;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      z-index: 999;
    }

    .face-camera {
      width: $face-size;
      height: $face-size;
      position: relative;
      overflow: hidden;
    }
  }
}
</style>