vue video实现录屏

要在Vue中实现录屏功能，可以使用WebAPI中的MediaRecorder接口和Canvas API。

首先，使用`getUserMedia`方法来获取用户媒体设备的访问权限，其中包括麦克风和摄像头。然后，创建一个`MediaRecorder`对象来录制视频，并将其存储在一个`Blob`对象中。最后，将`Blob`对象转换为URL，以便将其显示在视频播放器中。以下是一个简单的Vue组件示例，它可以录制屏幕并将其显示在视频播放器中：

<template>
  <div>
    <button @click="startRecording" v-if="!recording">开始录制</button>
    <button @click="stopRecording" v-if="recording">停止录制</button>
    <video ref="videoPlayer" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recording: false,
      stream: null,
      chunks: []
    };
  },
  methods: {
    startRecording() {
      this.recording = true;
      navigator.mediaDevices
        .getDisplayMedia({
          video: { mediaSource: "screen" }
        })
        .then(stream => {
          this.stream = stream;
          const mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.ondataavailable = event => {
            if (event.data && event.data.size > 0) {
              this.chunks.push(event.data);
            }
          };
          mediaRecorder.onstop = () => {
            const blob = new Blob(this.chunks, { type: "video/webm" });
            this.chunks = [];
            const videoURL = URL.createObjectURL(blob);
            this.$refs.videoPlayer.src = videoURL;
          };
          mediaRecorder.start();
        });
    },
    stopRecording() {
      this.recording = false;
      this.stream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>

在上面的示例中，我们使用`navigator.mediaDevices.getDisplayMedia`方法来获取屏幕媒体流。我们还创建了一个`MediaRecorder`对象，它会将视频数据存储在一个数组中，直到我们停止录制。我们使用`Blob`对象来存储视频数据，并将其转换为URL以显示在视频播放器中。最后，我们还实现了开始和停止录制按钮的逻辑。