小程序人脸核验功能实现-边读边录（一）

背景介绍

笔者为前端小白，初入前端行业，好多功能都只限于见过没有实践过，初来乍到老板分配了一个小程序“ 边读边录 ”的功能。刚拿到任务时，确实是一脸懵逼的状态，好在本人是从无数困难中摸爬滚打出来的，终于用两天时间理明白了整个逻辑，现在拿出来跟大家分享希望对需要的人有丁点帮助。

目前项目没有正式启动，现在只是实现了基础 边读边录的功能，可以把录像的数据存储在 data 的数组中。

实现效果如图：

所用技术

vue、mpvue、原生微信小程序开发

疑难点

当打开摄像头后，实现一个按钮第一次点击开始录像，第二次点击停止录像。
目前实现的方法是通过定义一个 开关 on，当 on 为 false 时停止录像，当 on 为 true 时开始录像。目前通过它实现了开始录像，只是停止录像并不会真的停止，在我获取了临时存储视频的地址后依然会执行录像，这个问题还没有解决，如果有朋友也遇到这个问题或者有解决方案可以一起交流。

所需重点 API

wx.createCameraContext();
创建并返回 camera 上下文 cameraContext 对象

startRecord()
开始录像

stopRecord()
结束录像

重点代码

html

<div>
    	<p class="title">{{ title }}</p>

      <image src="/static/images/identify.png" alt="人身核验" mode="aspectFit" />

      <p class="tips">
        牢记数字 <span>></span> 
        开始拍摄 <span>></span> 
        边录边读  
      </p>

      <p class="codeNum">{{ code }}</p>

      <button type="primary" @tap="onRead" class="btn">记下了，开始拍摄</button>

      <view v-if="isShow" class="photo">
        <view class="photoWraper">
          <button @tap="camera" class="videoBtn" v-if="isBtn">
            <div class="cover" v-if="isTime">{{ time }}</div>
          </button>
          <camera 
          device-position="back" 
          flash="off" 
          binderror="error" 
          ></camera>

        </view>
      </view>

  </div>

.tips{
font-size: 28rpx;
text-align: center;
}
.tips span{
color: #4494fd;
}
.title{
text-align: center;
color: #4494fd;
padding-bottom: 20rpx;
}
.codeNum{
color: #376ceb;
font-size: 120rpx;
text-align: center;
padding-bottom: 20rpx;
letter-spacing: 20rpx;
padding-top: 20rpx;
}
.page-body-button {
margin-bottom: 30rpx;
}
.btn{
width: 70%;
height: 120rpx;
line-height: 90rpx;
font-size: 40rpx;
}
.photo{
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.photo .photoWraper{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
camera{
height: 100%;
}
.videoBtn{
width: 160rpx;  
height: 160rpx;  
border-radius: 110rpx;  
background-color: #ffffff;    
color:#da2121;  
font-size: 32rpx;  
z-index: 10;
position: absolute;
bottom: 50rpx;
left: 50%;
margin-left: -55rpx;
}
.ss{
position: absolute;
z-index: 11;
}

 data() {
    return {
      title: 'FaceID 人脸核身服务',
      code: '',//验证码
      isShow: false,//相机模拟是否显示
      videoSrc: [],//录制视频的临时缩略图地址  
      thumbSrc: [],// 录制视频的临时视频地址  
      time: 0, //录像计时,
      isTime: false,
      isBtn: false,
      startRecord: false,
      timeLoop: '1',
      ctx: {},
      on: "on"
    }
  },

  mounted: function() {
        //刚进入页面随机先获取一个随机数
        this.createCode();
        //获取相机实例
        let ctx = wx.createCameraContext();
        this.$data.ctx = ctx;
    },

  methods: {
    camera() {
      let { ctx,type, on, startRecord } = this.$data; 
      this.videoOff(ctx);
      this.time = 0;
      //清缓存
      wx.removeStorage({
        key: 'data',
        success (res) {
          
        }
      })

      if(!startRecord){
        this.videoOff(ctx);
      }
      this.isTime= true;

      //录像计时
      let t1 = 0;  
      let timeLoop = setInterval(() => {  
        t1++;  
        this.time = t1;
        // 最长录制30秒  
        if (t1 == 30) {  
          clearInterval(timeLoop);  
          this.videoOff(ctx);  
        }  
      }, 1000);  
      this.$data.timeLoop = timeLoop;

      //开始录制  
      let that = this;
      ctx.startRecord({  
        success: (res) => {  
          console.log("录制成功");  
        },  
        fail: (e) => {  
        console.log(e);  
        },
        complete: () => {
          this.startRecord = false;
        }
      }) 
      
    }, 
   
    //结束录像
    videoOff(ctx) {
      clearInterval(this.$data.timeLoop);  

      let that = this;
      ctx.stopRecord({
        success: (res) => {
            that.thumbSrc.push({src: res.tempThumbPath});
            that.videoSrc.push({src: res.tempVideoPath});
            that.time = 0;
            that.isShow = false;
            that.isTime = false;

            // wx.uploadFile({
            //   url: 'xxxxxxxx',//开发者文件上传地址
            //   filePath: tempFilePath,
            //   name: 'file',
            //   success: res => {
            //       const url = JSON.parse(res.data);//将这个url提交保存
            //   },
            // });
           
        },
        fail: (err) => {
          console.log(err);
        }
      })
    },
    //开启模拟录像
    onRead(){
      this.isShow = true;
      setInterval(() => {
        this.isBtn = true;
      }, 1000);
    },
      
    //随机生成4位数字
    createCode() {
      let code = '';
      let codeLength = 4;
      let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

      for (var i = 0; i < codeLength; i++) {
          var index = Math.floor(Math.random() * 9);

          code += random[index];
      }

      this.code = code;
  }
  }
}

标签：false,核验,data,ctx,录像,边读,let,res,边录
来源： https://blog.51cto.com/u_14785218/2877432