当前位置：首页 > VUE

vue实现录播播放

2026-01-12 00:24:36VUE

Vue 实现录播播放功能

录播播放功能通常涉及视频录制、存储和回放。以下是基于 Vue 的实现方案，结合常见技术栈（如 MediaRecorder API 和视频播放器库）。

视频录制实现

使用浏览器提供的 MediaRecorder API 录制视频流，并通过 Vue 管理状态。

// 在 Vue 组件中
data() {
  return {
    mediaStream: null,
    mediaRecorder: null,
    recordedChunks: [],
    isRecording: false
  };
},
methods: {
  async startRecording() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      this.mediaStream = stream;
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) this.recordedChunks.push(event.data);
      };
      this.mediaRecorder.start();
      this.isRecording = true;
    } catch (error) {
      console.error('Error accessing media devices:', error);
    }
  },
  stopRecording() {
    if (this.mediaRecorder && this.isRecording) {
      this.mediaRecorder.stop();
      this.mediaStream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  }
}

视频存储与下载

录制完成后，将视频数据保存为 Blob 并支持下载或上传。

vue实现录播播放

methods: {
  saveRecording() {
    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);
  },
  // 如需上传到服务器
  async uploadRecording() {
    const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
    const formData = new FormData();
    formData.append('video', blob, 'recording.webm');
    await axios.post('/api/upload', formData);
  }
}

视频回放实现

使用第三方播放器库（如 video.js 或 vue-video-player）播放录制的视频。

安装 vue-video-player：

vue实现录播播放

npm install vue-video-player

在 Vue 组件中集成播放器：

import { videoPlayer } from 'vue-video-player';
export default {
  components: { videoPlayer },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          type: 'video/webm',
          src: '' // 动态设置视频 URL
        }]
      }
    };
  },
  methods: {
    playRecording() {
      const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
      this.playerOptions.sources[0].src = URL.createObjectURL(blob);
    }
  }
}

模板部分：

<video-player :options="playerOptions"></video-player>
<button @click="playRecording">播放录播</button>

服务器端存储（可选）

如需持久化录播视频，需结合后端服务：

前端通过 FormData 上传视频到服务器。

后端（如 Node.js + Express）接收文件并存储：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('video'), (req, res) => {
  res.send({ path: req.file.path });
});