vue 调用摄像头录制视频

以下是使用Vue调用摄像头录制视频的示例代码：

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

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      chunks: [],
    };
  },
  mounted() {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        this.$refs.video.srcObject = stream;
        this.mediaRecorder = new MediaRecorder(stream);
        this.mediaRecorder.ondataavailable = (e) => {
          this.chunks.push(e.data);
        };
        this.mediaRecorder.onstop = () => {
          const blob = new Blob(this.chunks, { type: 'video/webm' });
          const videoUrl = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = videoUrl;
          a.download = 'recorded_video.webm';
          a.click();
          URL.revokeObjectURL(videoUrl);
          this.chunks = [];
        };
      })
      .catch((error) => {
        console.error('Error accessing camera:', error);
      });
  },
  methods: {
    startRecording() {
      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();
    },
  },
};
</script>

这段代码使用了Vue框架来调用摄像头并录制视频。在模板中，我们使用`<video>`元素来显示摄像头的视频流，并添加了两个按钮来控制录制的开始和停止。在脚本部分，我们使用`navigator.mediaDevices.getUserMedia()`方法来获取摄像头的视频流，并将其赋值给`<video>`元素的`srcObject`属性。然后，我们创建了一个`MediaRecorder`对象来录制视频，并设置了`ondataavailable`事件来处理录制的数据块。当点击停止录制按钮时，我们将录制的数据块合并为一个`Blob`对象，并通过创建一个下载链接来保存录制的视频文件。