vue 调用摄像头录像

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

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

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      recordedChunks: [],
    };
  },
  mounted() {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        this.$refs.videoElement.srcObject = stream;
        this.mediaRecorder = new MediaRecorder(stream);
        this.mediaRecorder.ondataavailable = this.handleDataAvailable;
      })
      .catch((error) => {
        console.error('获取摄像头失败:', error);
      });
  },
  methods: {
    startRecording() {
      this.recordedChunks = [];
      this.mediaRecorder.start();
    },
    stopRecording() {
      this.mediaRecorder.stop();
    },
    handleDataAvailable(event) {
      if (event.data.size > 0) {
        this.recordedChunks.push(event.data);
      }
    },
  },
};
</script>

这段代码使用了Vue框架来实现调用摄像头录像的功能。在模板中，我们使用`<video>`元素来显示摄像头的视频流，并添加了两个按钮来控制录像的开始和停止。在脚本部分，我们使用`navigator.mediaDevices.getUserMedia()`方法来获取摄像头的视频流，并将其赋值给`<video>`元素的`srcObject`属性。然后，我们创建了一个`MediaRecorder`对象来处理录像的逻辑，并在`ondataavailable`事件中将录制的数据存储到`recordedChunks`数组中。最后，我们通过调用`start()`和`stop()`方法来开始和停止录像。