当前位置：首页 > VUE

vue实现拍摄视频上传

2026-02-24 05:38:00VUE

Vue 实现拍摄视频上传

准备工作

确保项目已安装Vue.js及相关依赖。需要使用浏览器提供的MediaDevices API进行视频拍摄，并通过FormData实现文件上传。

获取摄像头权限

通过navigator.mediaDevices.getUserMedia请求摄像头权限，将视频流绑定到<video>元素：

vue实现拍摄视频上传

async function startCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  const videoElement = document.getElementById('cameraView');
  videoElement.srcObject = stream;
}

录制视频

使用MediaRecorder API录制视频流，存储为Blob对象：

vue实现拍摄视频上传

let mediaRecorder;
let recordedChunks = [];

function startRecording() {
  recordedChunks = [];
  const stream = document.getElementById('cameraView').srcObject;
  mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) recordedChunks.push(event.data);
  };

  mediaRecorder.start();
}

停止录制并生成文件

录制结束后将数据块合并为Blob对象，可通过URL.createObjectURL生成预览：

function stopRecording() {
  mediaRecorder.stop();
  mediaRecorder.onstop = () => {
    const videoBlob = new Blob(recordedChunks, { type: 'video/webm' });
    const videoUrl = URL.createObjectURL(videoBlob);
    // 预览或上传
  };
}

文件上传

通过FormData将视频文件发送到服务器：

function uploadVideo(videoBlob) {
  const formData = new FormData();
  formData.append('video', videoBlob, 'recorded_video.webm');

  axios.post('/api/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(response => {
    console.log('上传成功', response);
  });
}

完整组件示例

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

<script>
export default {
  methods: {
    async startCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      document.getElementById('cameraView').srcObject = stream;
    },
    startRecording() {
      this.recordedChunks = [];
      const stream = document.getElementById('cameraView').srcObject;
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = this.handleDataAvailable;
      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaRecorder.onstop = this.handleStop;
    },
    handleDataAvailable(event) {
      if (event.data.size > 0) this.recordedChunks.push(event.data);
    },
    handleStop() {
      const videoBlob = new Blob(this.recordedChunks, { type: 'video/webm' });
      this.uploadVideo(videoBlob);
    },
    uploadVideo(videoBlob) {
      const formData = new FormData();
      formData.append('video', videoBlob, 'recording.webm');
      axios.post('/upload', formData);
    }
  },
  mounted() {
    this.startCamera();
  }
};
</script>