uni-Identify-quality/pages/cameraContext/cameraContext.vue

<template>
  <view class="main"  v-if="needPersonSecret">
    <view class="logo">
      <image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
    </view>
    <view class="container">
      <view style="color:#626262;font-size:40rpx">人脸识别</view>
      <camera
        device-position="front"
        flash="off"
        binderror="error"
        mode="normal"
        style="width: 600rpx; height: 600rpx"
        ref="camera"
      >
        <cover-image src="@/static/image/camera.png" style="width: 600rpx; height: 600rpx"></cover-image>
      </camera>
      <view class="time">
        <view class="dot"></view>
        <u-count-down :time="5 * 1000" format="ss" ref="countDown" v-if="isAnimate"></u-count-down>
      </view>
      <view style="width:400rpx;">
        <u-button
          :text="tips"
          shape="circle"
          color="#76C458"
          @click="startRecord"
          :disabled="isAnimate"
        ></u-button>
        <view style="margin-top: 20rpx;">
          <u-button
            text="确认"
            shape="circle"
            color="#76C458"
            @click="back"
            :disabled="isEnd||tips !== '⚪录制完成'"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {configFun} from "../../http/login";

export default {
  data() {
    return {
      needPersonSecret:false,
      isAnimate: false,
      tempVideoPath: "",
      tips: "⚪录制",
      isEnd: true
    };
  },
 async onLoad() {
    const res= await configFun()
    if (res.code===200){
      this.needPersonSecret=res.data.needPersonSecret
    }
    this.ctx = uni.createCameraContext();
    this.tips = "⚪录制";
  },
  methods: {
    startRecord() {
      this.ctx.startRecord({
        success: res => {
          this.isAnimate = true;
          this.tips = "⚪录制中";
          setTimeout(() => {
            this.ctx.stopRecord({
              success: res => {
                console.log("自动停止录像", res);
                this.isAnimate = false;
                this.$common.msgToast("录制完成");
                this.tempVideoPath = res.tempVideoPath;
                this.tips = "⚪录制完成";
                this.isEnd = false;
                uni.setStorageSync("tempVideoPath", res.tempVideoPath);
              }
            });
          }, 5000);
        }
      });
    },
    // stopRecord() {
    //   // 手动停止录制
    //   this.ctx.stopRecord({
    //     success: res => {
    //       console.log("手动停止录像", res);
    //       this.tempVideoPath = res.tempVideoPath;
    //       this.isAnimate = false;
    //     },
    //     fail: function(error) {
    //       console.log(error);
    //       this.isAnimate = false;
    //       uni.showModal({
    //         content: "停止录像失败",
    //         showCancel: false
    //       });
    //     }
    //   });
    // },
    back() {
      uni.navigateBack({
        delta: 2
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

  .logo {
    width: 100%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("https://cdns.fontree.cn/fonchain-main/prod/image/1381bd18-2f0c-49f1-84f6-d3eceb94f7a7/artwork/6ef00a09-f663-451d-ae0c-0d00cf4068c5.png");

    .img {
      width: 142rpx;
      height: 60rpx;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    height: calc(100vh - 200upx);
    width: 100%;
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 62rpx 32rpx;

    .time {
      display: flex;
      justify-content: center;
      align-items: center;

      .dot {
        width: 30rpx;
        height: 30rpx;
        background: red;
        box-sizing: border-box;
        border-radius: 50%;
        margin-right: 20rpx;
      }
    }
  }
}
</style>