vue实现录播播放

Vue 实现录播播放

在 Vue 中实现录播播放功能，通常需要结合视频录制和播放的 API，例如使用浏览器的 MediaRecorder API 进行录制，并通过 <video> 标签播放录制的视频片段。以下是一个完整的实现方案。

录制视频

使用 MediaRecorder API 录制视频，并将录制的数据保存到数组中。

<template>
  <div>
    <video ref="videoElement" autoplay muted></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: [],
      stream: null,
    };
  },
  methods: {
    async startRecording() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        this.$refs.videoElement.srcObject = this.stream;
        this.mediaRecorder = new MediaRecorder(this.stream);
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.recordedChunks.push(event.data);
          }
        };
        this.mediaRecorder.start();
      } catch (error) {
        console.error("Error accessing media devices:", error);
      }
    },
    stopRecording() {
      if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
        this.mediaRecorder.stop();
        this.stream.getTracks().forEach((track) => track.stop());
      }
    },
  },
};
</script>

播放录制的视频

录制完成后，将录制的数据转换为 Blob 并生成 URL，通过 <video> 标签播放。

<template>
  <div>
    <video ref="playbackElement" controls></video>
    <button @click="playRecording">播放录制的视频</button>
  </div>
</template>

<script>
export default {
  methods: {
    playRecording() {
      if (this.recordedChunks.length > 0) {
        const blob = new Blob(this.recordedChunks, { type: "video/webm" });
        const url = URL.createObjectURL(blob);
        this.$refs.playbackElement.src = url;
        this.$refs.playbackElement.play();
      }
    },
  },
};
</script>

保存录制的视频

可以将录制的视频保存为文件，供用户下载。

<template>
  <button @click="saveRecording">保存视频</button>
</template>

<script>
export default {
  methods: {
    saveRecording() {
      if (this.recordedChunks.length > 0) {
        const blob = new Blob(this.recordedChunks, { type: "video/webm" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "recording.webm";
        a.click();
        URL.revokeObjectURL(url);
      }
    },
  },
};
</script>

完整示例

将录制、播放和保存功能整合到一个完整的 Vue 组件中。

<template>
  <div>
    <h3>录播演示</h3>
    <video ref="videoElement" autoplay muted></video>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <video ref="playbackElement" controls></video>
    <button @click="playRecording">播放录制的视频</button>
    <button @click="saveRecording">保存视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: [],
      stream: null,
    };
  },
  methods: {
    async startRecording() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        this.$refs.videoElement.srcObject = this.stream;
        this.mediaRecorder = new MediaRecorder(this.stream);
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.recordedChunks.push(event.data);
          }
        };
        this.mediaRecorder.start();
      } catch (error) {
        console.error("Error accessing media devices:", error);
      }
    },
    stopRecording() {
      if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
        this.mediaRecorder.stop();
        this.stream.getTracks().forEach((track) => track.stop());
      }
    },
    playRecording() {
      if (this.recordedChunks.length > 0) {
        const blob = new Blob(this.recordedChunks, { type: "video/webm" });
        const url = URL.createObjectURL(blob);
        this.$refs.playbackElement.src = url;
        this.$refs.playbackElement.play();
      }
    },
    saveRecording() {
      if (this.recordedChunks.length > 0) {
        const blob = new Blob(this.recordedChunks, { type: "video/webm" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "recording.webm";
        a.click();
        URL.revokeObjectURL(url);
      }
    },
  },
};
</script>

注意事项

• 浏览器兼容性：MediaRecorder API 在不同浏览器中的支持程度不同，建议使用 Chrome 或 Firefox 进行测试。
• 用户权限：录制视频和音频需要用户授权，确保在安全上下文中运行（如 HTTPS 或 localhost）。
• 视频格式：默认录制的视频格式为 webm，可以根据需要调整 MIME 类型。

通过以上方法，可以在 Vue 中实现录播播放功能，支持录制、播放和保存视频。