vue实现拍摄视频上传

2026-01-23 15:00:50VUE

Vue实现拍摄视频上传的方法

使用HTML5的`<input type="file">`和`capture`属性

在Vue模板中添加一个文件输入元素，通过capture属性指定使用摄像头拍摄视频：

<template>
  <input type="file" accept="video/*" capture="environment" @change="handleVideoUpload" />
</template>

accept="video/*"限制只能选择视频文件，capture="environment"指定使用后置摄像头。

vue实现拍摄视频上传

通过`getUserMedia`API直接调用摄像头

利用浏览器提供的MediaDevices API实现更灵活的拍摄控制：

methods: {
  async startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    this.mediaRecorder = new MediaRecorder(stream);
    this.chunks = [];

    this.mediaRecorder.ondataavailable = e => {
      this.chunks.push(e.data);
    };

    this.mediaRecorder.onstop = () => {
      const blob = new Blob(this.chunks, { type: 'video/mp4' });
      this.uploadVideo(blob);
    };

    this.mediaRecorder.start();
  },

  stopRecording() {
    this.mediaRecorder.stop();
    this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
  },

  uploadVideo(blob) {
    const formData = new FormData();
    formData.append('video', blob, 'recorded-video.mp4');

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

使用第三方库增强功能

对于更复杂的需求，可以考虑使用以下库：

vue实现拍摄视频上传

vue-video-recorder：提供完整的视频录制组件
recordrtc：支持多种录制格式和效果
vue-webcam：简化摄像头访问的Vue组件

处理移动端兼容性

移动设备可能需要特殊处理：

// 检测是否移动设备
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

// 移动端可能需要不同的配置
if(isMobile) {
  this.mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm',
    videoBitsPerSecond: 3000000
  });
}

上传进度显示

使用axios的onUploadProgress实现上传进度显示：

uploadVideo(blob) {
  const formData = new FormData();
  formData.append('video', blob);

  axios.post('/upload', formData, {
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      this.uploadProgress = percentCompleted;
    }
  });
}