添加websocket

package-lock.json

@@ -15,7 +15,8 @@
         "less-loader": "^12.2.0",
         "vue": "^2.6.14",
         "vue-router": "^2.8.1",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "ws": "^8.18.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -11029,6 +11030,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-chain": {
       "version": "6.5.1",
       "resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
@@ -11207,27 +11229,6 @@
         "node": ">= 12.13.0"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.10.0.tgz",
@@ -11379,16 +11380,15 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "7.5.9",
+      "version": "8.18.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
-      "dev": true,
       "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -20135,6 +20135,13 @@
           "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
+        },
+        "ws": {
+          "version": "7.5.10",
+          "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
+          "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -20278,13 +20285,6 @@
             "ajv-formats": "^2.1.1",
             "ajv-keywords": "^5.1.0"
           }
-        },
-        "ws": {
-          "version": "8.16.0",
-          "resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
-          "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-          "dev": true,
-          "requires": {}
         }
       }
     },
@@ -20403,10 +20403,9 @@
       "dev": true
     },
     "ws": {
-      "version": "7.5.9",
+      "version": "8.18.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
-      "dev": true,
       "requires": {}
     },
     "y18n": {

package.json

@@ -15,7 +15,8 @@
     "less-loader": "^12.2.0",
     "vue": "^2.6.14",
     "vue-router": "^2.8.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/views/HospitalView.vue

@@ -1,122 +1,193 @@
 <template>
-    <div class="img_bg_camera">
+  <div class="img_bg_camera">
-        <el-row :gutter="10" style="padding: 10px; opacity: 0.9;">
+    <el-row :gutter="10" style="padding: 10px; opacity: 0.9">
-            <el-col :span="18">
+      <el-col :span="18">
-                <el-card style="margin-top: 10px;">
+        <el-card style="margin-top: 10px">
-                    <div style="width: 100%;max-width: 900px;">
+          <div style="width: 100%; max-width: 900px">
-                        <video ref="video" autoplay></video>
+            <video ref="video" autoplay></video>
-                    </div>
+          </div>
-                </el-card>
+        </el-card>
-            </el-col>
+      </el-col>
-            <el-col :span="6">
+      <el-col :span="6">
-                <el-card style="margin-top: 10px; display: flex;justify-content: center;">
+        <el-card
-                    <canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
+          style="margin-top: 10px; display: flex; justify-content: center"
-                    <div style=" align-items: center;">
+        >
-                        <alarm backgroudColor="red" :size="80">!</alarm>
+          <canvas
-                        <el-button style="margin-top: 10px;" type="danger" @click="Alert()">医疗出警</el-button>
+            style="display: none"
-                    </div>
+            id="canvasCamera"
-                    <el-button style="margin-top: 10px;" type="success" @click="RemoteDialog()">远程对话</el-button>
+            width="250"
-                </el-card>
+            height="250"
-            </el-col>
+          ></canvas>
-        </el-row>
+          <div style="align-items: center">
-    </div>
+            <alarm v-if="isShow" :backgroudColor="color" :size="80">!</alarm>
+            <el-button style="margin-top: 10px" type="danger" @click="Alert()"
+              >医疗出警</el-button
+            >
+          </div>
+          <el-button
+            style="margin-top: 10px"
+            type="success"
+            @click="RemoteDialog()"
+            >远程对话</el-button
+          >
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 // import axios from 'a/xios';
-import Alarm from '@/element/Alarm.vue';
+import Alarm from "@/element/Alarm.vue";
 
 export default {
-    components: {
+  components: {
-        Alarm
+    Alarm,
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            imgif: false,
+      imgif: false,
-            videoWidth: 250,
+      videoWidth: 250,
-            videoHeight: 250,
+      videoHeight: 250,
-            imgSrc: '',
+      imgSrc: "",
-            thisCancas: null,
+      thisCancas: null,
-            thisContext: null,
+      thisContext: null,
-            thisVideo: null,
+      thisVideo: null,
-            imga: '',
+      imga: "",
-            intervalId: null,//
+      intervalId: null, //
-            AiMessage: [
+      AiMessage: [],
-            ],
+      time: "5000", //拍照时间间隔
-            time: "5000",//拍照时间间隔
+      isShow: false,
+      color: "red",
+    };
+  },
+  methods: {
+    webSocketInit() {
+      const that = this;
+      if (typeof WebSocket === undefined) {
+        console.log("您的浏览器不支持WebSocket");
+      } else {
+        console.log("您的浏览器支持WebSocket");
+        let socketUrl = "ws://localhost:8081/danger/get";
+        let socket;
+
+        if (socket != null) {
+          socket.close();
+          socket = null;
         }
-    },
-    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);
+        socket = new WebSocket(socketUrl);
-                // this.mediaRecorder.ondataavailable = (event) => {
+        socket.onopen = function () {
-                //   if (event.data.size > 0) {
+          console.log("websocket已打开");
-                //     this.recordedChunks.push(event.data);
+        };
-                //   }
+        socket.onmessage = function (message) {
-                // };
+          console.log(message.data);
-                this.mediaRecorder.start();
+          if (message.data == "二级") {
-            } catch (err) {
+            that.isShow = true;
-                console.error('Error accessing media devices.', err);
+            that.color = "#CCCC00";
-            }
+            that.issues();
-        },
+            that.solve();
-        issues() {
+          } else if (message.data == "三级") {
-            this.$message({
+            that.issues();
-                showClose: true,
+            that.isShow = true;
-                message: '警告：用户出现异常！',
+            that.color = "red";
-                type: 'error',
+            that.solve();
-                duration: 0
+            that.alarmSound();
-            });
+          }
-        },
-        alarmSound() {
-            var audio = new Audio();
-            audio.src = require('../image/警报声.mp3');
-            audio.play();
-        },
-        Alert() {
-            this.$message({
-                message: '已发送警报！',
-                type: 'success'
-            });
-            this.alarmSound();
-        },
-    },
-    async mounted() {
-        await this.getVideoDevices();
-        await this.startRecording();
-        this.issues();
-    },
 
-}
+          socket.onerror = function () {
+            console.log("websocket发生了错误");
+          };
+          socket.onclose = function () {
+            console.log("websocket已关闭");
+          };
+        };
+      }
+    },
+    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);
+      }
+    },
+    issues() {
+      this.$message({
+        showClose: true,
+        message: "警告：用户出现异常！",
+        type: "error",
+        duration: 0,
+      });
+    },
+    alarmSound() {
+      console.log("警报声");
+      var audio = new Audio();
+      audio.src = require("../image/警报声.mp3");
+      audio.play();
+    },
+    async solve() {
+      setTimeout(() => {
+        this.isShow = false;
+        this.color = "red";
+      }, 5000 * 12);
+    },
+    Alert() {
+      this.$message({
+        message: "已发送警报！",
+        type: "success",
+      });
+      this.alarmSound();
+    },
+  },
+  async mounted() {
+    this.webSocketInit();
+    await this.getVideoDevices();
+    await this.startRecording();
+  },
+};
 </script>
 <style lang="less" scoped>
 // 设置背景图片
 .img_bg_camera {
-    background-image: url(../image/back.png);
+  background-image: url(../image/back.png);
-    background-size: 100% 100%;
+  background-size: 100% 100%;
-    height: 750px;
+  height: 750px;
-    width: 100%;
+  width: 100%;
-    margin: 0 auto;
+  margin: 0 auto;
-    padding-top: 10px;
+  padding-top: 10px;
-    text-align: center;
+  text-align: center;
 }
 
 .contain {
-    height: 90%;
+  height: 90%;
-    width: 95%;
+  width: 95%;
-    opacity: 0.9;
+  opacity: 0.9;
 }
 </style>

src/views/User.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="outer">
-    <Alarm :size="50">!</Alarm>
+    <div style="padding: 20px;">
+
+      <Alarm v-if="isShow" :size="50" :backgroudColor="color">!</Alarm>
+
+    </div>
 
     <div class="video">
       <video ref="video" autoplay></video>
     </div>
-    <div>
+    <div></div>
-    </div>
     <!-- <img src="../image/感叹号.png" alt="error" class="alarmOn" /> -->
 
     <!-- <button @click="startRecording">开始录像</button>
@@ -16,37 +19,114 @@
 </template>
 
 <script>
-import Alarm from '@/element/Alarm.vue';
+import Alarm from "@/element/Alarm.vue";
 export default {
-  name: 'User',
+  name: "User",
   data() {
     return {
       mediaRecorder: null,
       recordedChunks: [],
       videoDevices: [],
       selectedDeviceId: null,
+      isShow: false,
+      color: "red",
     };
   },
   components: {
     Alarm,
   },
   async mounted() {
+    this.webSocketInit();
     await this.getVideoDevices();
     await this.startRecording();
   },
   methods: {
+    issues() {
+      this.$message({
+        showClose: true,
+        message: "警告：用户出现异常！",
+        type: "error",
+        duration: 0,
+      });
+    },
+    alarmSound() {
+      var audio = new Audio();
+      audio.src = require("../image/警报声.mp3");
+      audio.play();
+    },
+    webSocketInit() {
+      const that = this;
+      if (typeof WebSocket === undefined) {
+        console.log("您的浏览器不支持WebSocket");
+      } else {
+        console.log("您的浏览器支持WebSocket");
+        let socketUrl = "ws://localhost:8081/danger/get";
+        let socket;
+
+        if (socket != null) {
+          socket.close();
+          socket = null;
+        }
+
+        socket = new WebSocket(socketUrl);
+        socket.onopen = function () {
+          console.log("websocket已打开");
+        };
+        socket.onmessage = function (message) {
+          console.log(message.data);
+          if (message.data == "二级") {
+            that.isShow = true;
+            that.color = "#CCCC00";
+            that.issues();
+            that.solve();
+          } else if (message.data == "三级") {
+            that.isShow = true;
+            that.color = "red";
+            //延时执行
+            setTimeout(() => {
+              that.alarmSound();
+            }, 500);
+            that.issues();
+            
+          }
+
+          socket.onerror = function () {
+            console.log("websocket发生了错误");
+          };
+          socket.onclose = function () {
+            console.log("websocket已关闭");
+          };
+        };
+      }
+    },
+    async solve(){
+      setTimeout(() => {
+        this.isShow = false;
+        this.color = "red";
+      }, 5000*12);
+    },
     async getVideoDevices() {
       const devices = await navigator.mediaDevices.enumerateDevices();
-      this.videoDevices = devices.filter(device => device.kind === 'videoinput');
+      this.videoDevices = devices.filter(
+        (device) => device.kind === "videoinput"
+      );
       if (this.videoDevices.length > 0) {
-        this.selectedDeviceId = this.videoDevices.find(device=>device.label.includes('usb'));
+        this.selectedDeviceId =
+          this.videoDevices.find((device) => device.label.includes("usb")) !==
+          null
+            ? this.videoDevices.find((device) => device.label.includes("usb"))
+            : this.videoDevices[0].deviceId;
       }
       console.log(this.selectedDeviceId);
     },
     async startRecording() {
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
-          video: { deviceId: this.selectedDeviceId ? { exact: this.selectedDeviceId } : undefined }
+          video: {
+            deviceId: this.selectedDeviceId
+              ? { exact: this.selectedDeviceId }
+              : undefined,
+          },
         });
         this.$refs.video.srcObject = stream;
 
@@ -58,7 +138,7 @@ export default {
         // };
         this.mediaRecorder.start();
       } catch (err) {
-        console.error('Error accessing media devices.', err);
+        console.error("Error accessing media devices.", err);
       }
     },
     // stopRecording() {
@@ -73,7 +153,7 @@ export default {
 
 <style lang="less" scoped>
 .outer {
-  background-image: url('../image/back.png');
+  background-image: url("../image/back.png");
   display: flex;
   .video {
     width: 100%;
@@ -81,14 +161,10 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    
   }
-
 }
 video {
   width: 100%;
   max-width: 900px;
 }
-
-
 </style>