录制视频（vue）

1、html

      
      开始录制
      结束录制
      

2、script

import RecordRTC from "recordrtc";

data(){

return{

adisabled: false,

      bdisabled: true,

      isRecordingStarted: false,

      recorder: null,

      canvas2d: null,

}

),

computed: {

    playerRef() {

      return this.$refs.video;

    },

  },

mounted() {

    this.canvas2d = document.getElementById("background-canvas");

    this.context = this.canvas2d.getContext("2d");

    const w = window.innerWidth;

    const h = (window.innerWidth / 16) * 9;

    this.canvas2d.width = w;

    this.canvas2d.height = h;

  },

  methods: {

//开始录制

    start() {

      console.log(this.playerRef);

      this.isStoppedRecording = false;

      this.isRecordingStarted = true;

      this.recorder = RecordRTC(this.canvas2d, {

        type: "canvas",

      });

      this.recorder.startRecording();

      this.adisabled = true;

      this.bdisabled = false;

      document.getElementById("btn-stop-recording").disabled = false;

      this.looper();

    },

    looper() {

      const that = this;

      if (!this.isRecordingStarted) {

        return setTimeout(this.looper, 500);

      }

      that.context.clearRect(0, 0, that.canvas2d.width, that.canvas2d.height);

      that.context.drawImage(

        that.playerRef,

        0,

        0,

        that.canvas2d.width,

        that.canvas2d.height

      );

      that.context.drawImage(

        that.playerRef,

        0,

        0,

        that.canvas2d.width,

        that.canvas2d.height

      );

      if (that.isStoppedRecording) {

        return;

      }

      requestAnimationFrame(that.looper);

    },

    //结束录制

    stop() {

      const _this = this;

      this.recorder.stopRecording(function () {

        _this.isRecordingStarted = false;

        _this.isStoppedRecording = true;



        _this.bdisabled = true;

        _this.adisabled = false;

        var blob = _this.recorder.getBlob();

        document.getElementById("preview-video").src =

          URL.createObjectURL(blob);

        console.log(blob);

        document.getElementById("preview-video").parentNode.style.display =

          "block";

        // _this.elementToRecord.style.display = 'none'

        let videoFile = new File([blob], "ex.webm", {

          type: "video/webm",

        });



      });

    },

}