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

<template>
  <view class="main">
    <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:284rpx;">
        <u-button
          text="⚪长按录制"
          shape="circle"
          color="#76C458"
          @longpress="startRecord"
          @touchend="stopRecord"
        ></u-button>
        <view style="margin-top: 20rpx;">
          <u-button text="确认" shape="circle" color="#76C458" @click="back"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      isAnimate: false,
      tempVideoPath: "",
      data: {}
    };
  },
  onLoad() {
    this.ctx = uni.createCameraContext();
  },
  methods: {
    startRecord() {
      this.ctx.startRecord({
        success: res => {
          this.isAnimate = true;
          console.log(this.$refs);
          setTimeout(() => {
            this.ctx.stopRecord({
              success: res => {
                console.log("自动停止录像", res);
                this.tempVideoPath = res.tempVideoPath;
                this.isAnimate = false;
              }
            });
          }, 5000);
        }
      });
    },
    stopRecord() {
      // 手动停止录制
      this.ctx.stopRecord({
        success: res => {
          console.log("手动停止录像", res);
          this.tempVideoPath = res.tempVideoPath;
          this.isAnimate = false;
          this.$refs.countDown.reset();
        },
        fail: function(error) {
          console.log(error);
          uni.showModal({
            content: "停止录像失败",
            showCancel: false
          });
        }
      });
    },
    back() {
      uni.navigateTo({
        url:
          "/pages/realName/realName?tempVideoPath=" +
          this.tempVideoPath +
          "&isfinish=" +
          !!this.tempVideoPath
      });
    }
  }
};
</script>

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

  .logo {
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img {
      width: 124rpx;
      height: 72rpx;
    }
  }

  .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>