From 3597c23525fe05458971942a104ebe21093f9631 Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Thu, 26 Dec 2024 16:23:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=92=AD=E6=94=BE=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DeviceList.vue     |  2 +-
 src/views/DeviceRealVPV2.vue | 68 ++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/views/DeviceRealVPV2.vue

diff --git a/src/views/DeviceList.vue b/src/views/DeviceList.vue
index b2abd1e..54708f0 100644
--- a/src/views/DeviceList.vue
+++ b/src/views/DeviceList.vue
@@ -9,7 +9,7 @@ import { updateDeviceService } from "@/api/device.js";
 import router from "@/router/index.js";
 import { ElMessage } from 'element-plus';  
 import Menu from "@/views/Menu.vue";
-import VideoStream from "@/views/DeviceRealVP.vue";
+import VideoStream from "@/views/DeviceRealVPV2.vue";
 
 export default {
   components: {
diff --git a/src/views/DeviceRealVPV2.vue b/src/views/DeviceRealVPV2.vue
new file mode 100644
index 0000000..1d81b38
--- /dev/null
+++ b/src/views/DeviceRealVPV2.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <img ref="imagePlayer" alt="实时图像" width="100%" height="100%"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imagePlayer: null,
+      socket: null,
+      device_id: localStorage.getItem("realvp_device_id"),
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+        to_user_id: this.to_user_id,
+      },
+    };
+  },
+  mounted() {
+    this.imagePlayer = this.$refs.imagePlayer;
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      let socketUrl =
+        "wss://gep.ljsea.top/device/get_real_time_image?device_id=" +
+        this.device_id +
+        "&token=" +
+        this.tokenData.token;
+      this.socket = new WebSocket(socketUrl);
+      this.socket.onopen = () => {
+        console.log('WebSocket连接成功');
+      };
+      this.socket.onmessage = (event) => {
+        const blob = new Blob([event.data], { type: 'image/jpeg' });
+        const objectURL = URL.createObjectURL(blob);
+        this.imagePlayer.src = objectURL;
+      };
+      this.socket.onclose = () => {
+        console.log('WebSocket连接关闭');
+        this.imagePlayer.src = "";
+      };
+      this.socket.onerror = (error) => {
+        console.error('WebSocket出现错误:', error);
+      };
+    },
+  },
+  beforeUnmount() {
+    if (this.socket) {
+        this.socket.onmessage = null;
+        console.log('关闭WebSocket连接');
+      this.socket.close();
+       window.location.reload();
+    }
+  },
+};
+</script>
+
+<style scoped>
+img {
+  width: 100%;
+  margin: 0 auto;
+}
+</style>
\ No newline at end of file