labsop_experiment_android/pages/face/index.nvue

<template>
  <view class="face-container">
    <leven-arcFace
      ref="refLevenArcFace"
      style="width: 100%; flex: 1"
      :camera="camera"
      :video="video"
      @onError="onError"
      @onCameraOpened="onCameraOpened"
      @onCameraClosed="onCameraClosed"
      @onFaceResult="onFaceResult"
    ></leven-arcFace>
    <view class="back-btn" @click="backMain">
      <text class="back-val">返回</text>
    </view>
  </view>
</template>

<script>
  const module = uni.requireNativePlugin("leven-arcFace-ArcFaceModule");
  export default {
    data() {
      return {
        num: 0,
        // 摄像机配置，所有的参数都可以不传，不传则按默认的
        camera: {
          // 相机预览旋转角度
          rotation: 360,
          //相机预览模式，0:后置，1:前置(默认)
          facing: 1,
          //预览分辨率
          // size: [800, 600],
          // 摄像机预览圆角
          radius: 0,
          // 是否开启预览，默认：true
          preview: true,
        },
        // 视频检测配置，所有参数都可以不传，不传则按默认的
        video: {
          // 视频检测角度，可接收参数，0,90,180,270(默认),360(全方位检测)
          orient: 360,
          // 是否进行活体检测(默认为true)
          liveness: true,
          // 人脸注册同一人是否可以多次注册（默认：true）
          registerMultiple: true,
          // 人脸识别成功后是否展示左上角人脸识别图片（默认：true）
          showIdentifyImage: false,
          // 人脸框是否处于X反向状态，如果未设置该参数人脸框和人脸处于反向请将该参数设置为true
          isContraryX: false,
          // 人脸框是否处于Y反向状态，如果未设置该参数人脸框和人脸处于反向请将该参数设置为true
          isContraryY: false,
          // 识别阈值
          similar: 0.8,
          // 识别的最小人脸比例，如果失败比较敏感可以适当调小，默认：16
          detectFaceScaleVal: 10,
          showIdentifyText: false,
        },
      };
    },
    onLoad() {},
    onHide() {
      this.closeFace();
    },
    onShow() {
      console.log("开启人脸检查");
      this.openFace();
    },
    mounted() {},
    methods: {
      backMain() {
        uni.redirectTo({
          url: "/pages/home/index",
        });
      },
      // 注册人脸
      register() {
        if (this.$refs.refLevenArcFace) {
          console.log("开始注册人脸");
          const num = this.num++;
          this.$refs.refLevenArcFace.register(
            {
              // 注册后保存的id（可以不传该参数，默认时间戳）
              // id: "456",
              //注册后保存的名字（可以不传该参数，默认时间戳）
              name: "用户" + num,
            },
            (res) => {
              console.log(res);
            }
          );
        }
      },
      // 切换相机
      switchCamera() {
        if (this.$refs.refLevenArcFace) {
          this.$refs.refLevenArcFace.switchCamera((res) => {
            console.log(res);
          });
        }
      },
      // 关闭预览
      stop() {
        if (this.$refs.refLevenArcFace) {
          this.$refs.refLevenArcFace.stop((res) => {
            console.log(res);
          });
        }
      },
      // 开启预览
      start() {
        if (this.$refs.refLevenArcFace) {
          this.$refs.refLevenArcFace.start((res) => {
            console.log(res);
          });
        }
      },
      // 关闭人脸检测
      closeFace() {
        if (this.$refs.refLevenArcFace) {
          this.$refs.refLevenArcFace.closeFace((res) => {
            console.log(res);
          });
        }
      },
      // 开启人脸检测
      openFace() {
        if (this.$refs.refLevenArcFace) {
          this.$refs.refLevenArcFace.openFace((res) => {
            console.log("开启人脸检查", res);
          });
        }
      },
      // 错误事件
      onError(e) {
        console.log("错误信息", e);
      },
      // 相机打开事件
      onCameraOpened(e) {
        console.log("相机打开事件", e);
      },
      // 相机关闭事件
      onCameraClosed(e) {
        console.log("相机关闭事件", e);
      },
      // 相机配置改变事件
      onCameraConfigurationChanged(e) {
        console.log(e);
      },
      // 人脸识别结果
      onFaceResult(e) {
        console.log("人脸识别结果", e.detail);
        if (e.detail.status == "1") {
          uni.showToast({
            title: "人脸识别成功",
            icon: "success",
            duration: 1000,
          });
          setTimeout(() => {
            uni.setStorageSync("handleAppoint", "appointLine");
            uni.redirectTo({
              url: "/pages/home/index?id=" + e.detail.id,
            });
          }, 1000);
        }
      },
    },
  };
</script>

<style>
  .face-container {
    width: 750rpx;
    height: 100vh;
    flex: 1;
    background: skyblue;
  }
  .back-btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 100px;
    height: 40px;
    border-radius: 4px;
    background: #ecf5ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .back-val {
    color: #606266;
    font-size: 18px;
  }
</style>