修改User界面，添加警告组件

src/element/Alarm.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="alarmOn">
+      <slot></slot>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'Alarm'
+  }
+  </script>
+  
+  <style scoped>
+@keyframes flashing {
+  0% {
+    background: red;
+  }
+  50% {
+    background: transparent;
+  }
+  100% {
+    background: red;
+  }
+}
+.alarmOn {
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+
+  font-size: 100px;
+  color: white;
+  height: 200px;
+
+  width: 200px;
+  background: red;
+  border-radius: 50%;
+
+  animation: flashing 2000ms infinite ease-in-out;
+}
+  </style>

src/views/User.vue

@@ -1,15 +1,120 @@
 <template>
-  <div id="app1">
-    
+  <div class="outer">
+    <div class="video">
+      <video ref="video" autoplay></video>
+    </div>
+    <div>
+      <Alarm></Alarm>
+    </div>
+    <!-- <img src="../image/感叹号.png" alt="error" class="alarmOn" /> -->
+    <span class="alarmOn">!</span>
+    <!-- <button @click="startRecording">开始录像</button>
+    <button @click="stopRecording">停止录像</button> -->
+    <!-- <video ref="recordedVideo" controls></video> -->
   </div>
 </template>
 
 <script>
+import Alarm from '@/element/Alarm.vue';
 export default {
+  name: 'User',
+  data() {
+    return {
+      mediaRecorder: null,
+      recordedChunks: [],
+      videoDevices: [],
+      selectedDeviceId: null,
+    };
+  },
+  comments: {
+    Alarm,
+  },
+  async mounted() {
+    await this.getVideoDevices();
+    await this.startRecording();
+  },
+  methods: {
+    async getVideoDevices() {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      this.videoDevices = devices.filter(device => device.kind === 'videoinput');
+      if (this.videoDevices.length > 0) {
+        this.selectedDeviceId = this.videoDevices.find(device=>device.label.includes('usb'));
+      }
+      console.log(this.selectedDeviceId);
+    },
+    async startRecording() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { deviceId: this.selectedDeviceId ? { exact: this.selectedDeviceId } : undefined }
+        });
+        this.$refs.video.srcObject = stream;
 
-}
+        this.mediaRecorder = new MediaRecorder(stream);
+        // this.mediaRecorder.ondataavailable = (event) => {
+        //   if (event.data.size > 0) {
+        //     this.recordedChunks.push(event.data);
+        //   }
+        // };
+        this.mediaRecorder.start();
+      } catch (err) {
+        console.error('Error accessing media devices.', err);
+      }
+    },
+    // stopRecording() {
+    //   this.mediaRecorder.stop();
+    //   const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
+    //   this.$refs.recordedVideo.src = URL.createObjectURL(blob);
+    //   this.recordedChunks = [];
+    // },
+  },
+};
 </script>
 
-<style>
+<style lang="less">
+.outer {
+
+  display: flex;
+  .video {
+    width: 100%;
+    //居中
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+  }
+
+}
+video {
+  width: 100%;
+  max-width: 700px;
+}
+@keyframes flashing {
+  0% {
+    background: red;
+  }
+  50% {
+    background: transparent;
+  }
+  100% {
+    background: red;
+  }
+}
+.alarmOn {
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+
+  font-size: 100px;
+  color: white;
+  height: 200px;
+
+  width: 200px;
+  background: red;
+  border-radius: 50%;
+
+  animation: flashing 2000ms infinite ease-in-out;
+}
 
 </style>