vue 调用摄像头并录制视频上传到服务器

在Vue.js应用中调用摄像头并录制视频，通常需要使用HTML5的`<video>`元素、getUserMedia API以及前端文件上传功能。以下是简单的步骤：

1. 安装依赖：首先需要安装`vue-video-recorder`库，它提供了一个简单易用的API来处理视频录制。在项目目录下运行`npm install vue-video-recorder`。

2. 引入并配置：在你的组件中引入并初始化`VideoRecorder.vue`组件，并配置好视频源和限制（如最大录制时间）：

<template>
  <div>
    <video-recorder ref="videoRecorder" :options="recorderOptions"></video-recorder>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecordingAndUpload">停止并上传</button>
  </div>
</template>

<script>
import VideoRecorder from 'vue-video-recorder';

export default {
  components: { VideoRecorder },
  data() {
    return {
      recorderOptions: {
        video: true,
        audio: true,
        maxLength: 60, // 录制的最大秒数
      }
    };
  },
  methods: {
    startRecording() {
      this.$refs.videoRecorder.start();
    },
    stopRecordingAndUpload() {
      const recordedBlob = this.$refs.videoRecorder.stop();
      this.uploadVideo(recordedBlob);
    },
    uploadVideo(blob) {
      // 这里调用你的后端API将视频数据上传到服务器
      axios.post('/upload', blob).then(response => {
        console.log('上传成功:', response.data);
      }).catch(error => {
        console.error('上传失败:', error);
      });
    },
  }
};
</script>

3. 注意事项：
- 需要用户授权才能访问他们的摄像头。可以在`<video>`标签上添加`autoplay muted`属性来避免预加载视频影响性能。
- `uploadVideo`函数内部通常会发送一个包含文件的数据或Blob对象到服务器，具体实现取决于你的后端技术栈和服务器端API设计。