vue定时录屏并下载（可定时停止并下载）

使用到了element ui 请知晓，开始时间不能小于当前时间，可随意，没有别的效果，本人本来想做定时录屏，突然发现js的方法里会弹权限框，好像还默认不了（有可以默认的方法请告知下，谢谢），随即做了个小demo。仅供大家参考一下

HTML:

<template>
  <div class="container">
    <el-form label-position="right" label-width="140px">
<!--   时间范围选择器，注意！！！先选择结束时间才会解锁开始时间，不然开始时间选不了   -->
      <el-form-item label="开始至结束时间">
        <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" placeholder="选择时间范围" @change="picker(value1)"value-format="HH:mm:ss">
        </el-time-picker>
      </el-form-item>
<!--   点击事件   -->
      <el-form-item>
        <el-button @click="clicks">{{txt}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

JavaScript:

  data() {
    return {
      value1: ['',''],
      time: '',
      timeout: 0,
      recordedBlobs: [],
      fileName: "",
      txt: "开始录制",
      status: false,
      stream: null,
      options: {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 4500000,
        mimeType: "video/webm",
      },
      startTime: 0,
      timeLong: 0,
      timeLongs: null,
      endTime: 0,
    };
  },
  mounted() {
    this.Timer();
  },
  watch: {
    status(a) {
      if (a) {
        this.txt = "停止录制";
      } else {
        this.txt = "开始录制";
      }
    },
  },
  methods: {
    plick(){
      var strs=new Array();
      var stre=new Array();
      var stra=new Array();
      strs=this.value1[0].split(":")
      stra=this.value1[1].split(":")
      stre=this.time.split(":")
      console.log(stre)
      console.log(stra)
      console.log(strs)
      console.log(this.time)
      console.log(this.value1[0])

      if(this.value1[0]==''){
        this.$message({
          message:'请选择开始时间',
          type:'warning'
        })
      }else if(this.value1[0]==this.value1[1]){
        this.$message({
          message:'开始时间不能与结束时间相同',
          type:'warning'
        })
      }else if(strs[0]<stre[0]){
        this.$message({
          message:'开始时间不能小于当前时间',
          type:'warning'
        })
      }else if(strs[0]==stre[0]){
        if(strs[1]<stre[1]){
          this.$message({
            message:'开始时间不能小于当前时间',
            type:'warning'
          })
        }else{
          this.startScreen();

        }
      }else{
        console.log('1')
        this.startScreen();
      }
    },
    picker(val){
      console.log(val);
    },
    Timer() {
      var timerID = setInterval(this.updateTime, 1000);
      this.updateTime();
      return timerID
    },
    updateTime() {

      var cd = new Date();
      this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this
          .zeroPadding(cd.getSeconds(), 2);
          // console.log(this.time)
      if(this.value1[1]==this.time){
        this.clicks()
      }


    },
    zeroPadding(num, digit) {
      var zero = '';
      for (var i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    },

    clicks() {
      if (this.status) {
        this.stopReset();
        this.status = false;
        clearInterval(this.timesLongs);
      } else {
        console.log('1')
        this.plick();
      }
    },
    cauTime() {
      this.timeLongs = setInterval(() => {
        this.timeLong = (new Date().getTime() - this.startTime);
      }, 200);

    },
    stopReset() {
      this.stream.getTracks().forEach((track) => track.stop());
      this.recordedBlobs = [];
    },
    startScreen() {
      //注意,加上 audio: true 之后底部可以拖动的停止就失效了,正在fixing
      navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true
      }).then(
          (stream) => {
            this.status = !this.status;
            console.log("开始录制");
            this.startTime = new Date().getTime();
            this.cauTime();

            this.stream = stream;
            const mediaRecorder = new MediaRecorder(stream, this.options);
            mediaRecorder.ondataavailable = (event) => {
              if (event.data.size > 0) {
                this.status = false;
                clearInterval(this.timeLongs);
                console.log(
                    "结束录制,录制时长:" +
                    this.timeLong +
                    "s"
                );
                this.recordedBlobs.push(event.data);
                this.download();
                this.stopReset();
              }
            };
            mediaRecorder.start();
          },
          (error) => console.log(error)
      );
    },
    download() {
      const blob = new Blob(this.recordedBlobs, {
        type: "video/mp4"
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.style.display = "none";
      a.href = url;
      if (this.fileName) {
        a.download = this.fileName + ".mp4";
      } else {
        a.download = new Date() + ".mp4";
      }
      a.click();
      window.URL.revokeObjectURL(url);
    },
  },

css:

.container {
  width: 500px;
  margin: 0 auto;
}