zc_saas_pc/src/components/takePicture/media.vue

<template>
  <div id="">
    <el-dialog
      width="600px"
      class="take-photo"
      :visible.sync="takeVideoModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <h1 class="h_t">人脸录像抽查检测</h1>
      <div class="content">
        <video ref="videoPlayer11"
          id="video1"
          v-show="status === 3"
          class="video"
          autoplay
          controls
          :src="url"
        ></video>
        <video v-show="status !== 3" id="video2" class="video" autoplay></video>
      </div>
      <div class="footer">
        <el-button
          :type="status === 3 ? 'success' : 'primary'"
          class="pos"
          @click="luzhi"
          :disabled="status === 2"
          >{{
            status === 1 ? "开始录制3秒" : status === 2 ? "录制中" : "提交"
          }}</el-button
        >
        <el-button @click="again" v-if="status === 3">重录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 1, //1未录制 2录制中 3录制完成
      takeVideoModal: false,
      mediaRecorder: null,
      videoblob:null,
      url: null,
      faceUrl:null,
    };
  },
  methods: {
    openBoxs() {
      this.takeVideoModal = true;
      this.status=1;
      this.mediaRecorder=null;
      this.videoblob=null;
      this.url=null;
      this.faceUrl=null;
      this.$nextTick(() => {
        const video = document.getElementById("video2");
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then((stream) => {
            video.srcObject = stream;
            this.mediaRecorder = new MediaRecorder(stream);
          })
          .catch(function (err) {
            console.log("err", err);
            /* 处理error */
          });
      });
    },
    again() {
      this.url = null;
      this.status = 1;
    },
    luzhi() {
      if (this.status === 3) {
        //完成提交
        this.loading = true;
        this.$emit("returnParameterVideo", this.videoblob,this.faceUrl);
        this.takeVideoModal=false;
        return;
      }
      this.onCatchPhoto();
      this.mediaRecorder.start();
      this.status = 2;
      setTimeout(() => {
        this.stop();
        this.status = 3;
      }, 3500);
    },
    //拍照
    onCatchPhoto() {
      const canvas = document.createElement("canvas");
      const video = document.getElementById("video1"); 
      canvas.width = 500;
      canvas.height = 375;
      const context = canvas.getContext("2d");
      context.drawImage(video, 0, 0, 500, 375);
      this.faceUrl = canvas.toDataURL("image/png");
      // console.log(this.faceUrl,'faceUrl')
    },
    stop() {
      this.mediaRecorder.stop();
      this.mediaRecorder.ondataavailable = (event) => {
        this.$message.success("录制完成");
        console.log(event.data,'data')
        // 尝试转换为mp4类型
        const blob = event.data.slice(0, event.data.size, "video/mp4");
        this.url = URL.createObjectURL(blob);
        this.videoblob =blob;
        //console.log(event.data,'url')
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.video {
  width: 500px;
  height: 375px;
  border: 1px solid #333;
}
.h_t {
  text-align: center;
  font-size: 34px;
  color: #333;
  margin-bottom: 14px;
}
.content {
  text-align: center;
  margin-bottom: 20px;
}
.footer {
  text-align: center;
}
</style>