Vue 自动开启摄像头并录制3秒圆形视频，背景颜色动态变化

这个需求可以分为以下几个步骤来实现：

使用'getUserMedia'函数获取摄像头权限，开启摄像头。
使用'canvas'元素录制视频，设置录制时长为3秒。每隔1秒更新一次背景颜色。
录制完成后，停止录制，关闭摄像头。
使用'canvas.toDataURL'方法将录制的视频转换为base64格式。
将base64格式的视频添加到页面中，设置宽高为200px，居中显示，为圆形。

下面是具体的代码实现：

<template>
  <div class="container">
    <div class="video-container">
      <video ref="video" class="video" autoplay></video>
      <canvas ref="canvas" class="canvas"></canvas>
      <div ref="circle" class="circle"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recorder: null, // 录制器
      bgColorIndex: 0, // 背景颜色索引
      bgColors: ['#ff6666', '#ff9966', '#ffcc66', '#ffff66', '#ccff66', '#99ff66', '#66ff66', '#66ff99', '#66ffcc', '#66ffff', '#66ccff', '#6699ff', '#6666ff', '#9966ff', '#cc66ff', '#ff66ff', '#ff6699'],
      circle: null, // 圆形元素
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      navigator.mediaDevices.getUserMedia({ video: true, audio: false })
        .then(stream => {
          const video = this.$refs.video
          video.srcObject = stream
          video.play()
          setTimeout(() => {
            this.startRecording()
          }, 1000)
        })
        .catch(error => {
          console.log(error)
        })

      this.circle = this.$refs.circle
      this.circle.style.width = '200px'
      this.circle.style.height = '200px'
      this.circle.style.borderRadius = '50%'
      this.circle.style.position = 'absolute'
      this.circle.style.left = '50%'
      this.circle.style.top = '50%'
      this.circle.style.transform = 'translate(-50%, -50%)'
    },
    startRecording() {
      const video = this.$refs.video
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const width = video.videoWidth
      const height = video.videoHeight
      canvas.width = width
      canvas.height = height

      this.recorder = new MediaRecorder(video.captureStream(), { mimeType: 'video/webm' })
      this.recorder.ondataavailable = (e) => {
        const blob = new Blob([e.data], { type: 'video/webm' })
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onloadend = () => {
          const base64Data = reader.result
          this.showVideo(base64Data)
        }
      }
      this.recorder.start()

      setInterval(() => {
        const bgColor = this.bgColors[this.bgColorIndex]
        document.body.style.backgroundColor = bgColor
        this.bgColorIndex = (this.bgColorIndex + 1) % this.bgColors.length
      }, 1000)

      setTimeout(() => {
        this.stopRecording()
      }, 3000)
    },
    stopRecording() {
      if (this.recorder && this.recorder.state !== 'inactive') {
        this.recorder.stop()
        this.$refs.video.srcObject.getTracks().forEach(track => {
          track.stop()
        })
      }
    },
    showVideo(base64Data) {
      const video = document.createElement('video')
      video.src = base64Data
      video.style.width = '100%'
      video.style.height = '100%'
      video.style.objectFit = 'cover'
      video.style.borderRadius = '50%'
      this.circle.innerHTML = ''
      this.circle.appendChild(video)
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.video-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.video {
  display: none;
}
.canvas {
  display: none;
}
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上面的代码中，我们首先使用'getUserMedia'函数获取摄像头权限，开启摄像头，并在1秒后调用'startRecording'函数开始录制视频。'startRecording'函数中，我们使用'canvas'元素录制视频，设置录制时长为3秒。每隔1秒更新一次背景颜色。录制完成后，我们调用'stopRecording'函数停止录制，关闭摄像头。然后，我们使用'canvas.toDataURL'方法将录制的视频转换为base64格式，并将其添加到页面中，设置宽高为200px，居中显示，为圆形。

最后，我们在页面中添加一个圆形元素，用于显示录制的视频。在CSS中，我们将圆形元素设置为宽高为200px，居中显示，并设置了一些基本样式。