From 484e36b964f74c476bf956a9bc97c67d330b9673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Fri, 18 Oct 2024 14:40:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=82=B9=E6=92=AD=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=8A=9F=E8=83=BD=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/html/Home.vue | 212 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 206 insertions(+), 6 deletions(-)

diff --git a/src/html/Home.vue b/src/html/Home.vue
index abaf9a4..c39c660 100644
--- a/src/html/Home.vue
+++ b/src/html/Home.vue
@@ -1,7 +1,207 @@
 <template>
-   <div>
-    <h1>
-        首页
-    </h1>
-   </div>
-</template>
\ No newline at end of file
+  <div class="camera-container">
+    <!-- 左侧摄像头列表 -->
+    <div class="camera-list">
+      <el-card v-for="camera in cameras" :key="camera.id" class="camera-item" @click="selectCamera(camera)">
+        <div class="camera-header">
+          <span>ID: {{ camera.id }}</span>
+          <span class="status" :class="{'online': camera.status === 'online', 'offline': camera.status !== 'online'}">
+            {{ camera.status === 'online' ? '在线' : '离线' }}
+          </span>
+        </div>
+        <div class="camera-content">
+          <img :src="camera.snapshot" alt="camera-preview" class="camera-thumbnail" />
+          <p class="camera-name">{{ camera.name }}</p>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 右侧摄像头详情和播放控制 -->
+    <div class="camera-details" v-if="selectedCamera">
+      <el-card>
+        <p>{{ selectedCamera.name }}</p>
+        <canvas ref="canvasRef" class="camera-large"></canvas>
+        <p>摄像头状态: 
+          <span :class="{'online': selectedCamera.status === 'online', 'offline': selectedCamera.status !== 'online'}">
+            {{ selectedCamera.status === 'online' ? '在线' : '离线' }}
+          </span>
+        </p>
+        <!-- 播放控制按钮 -->
+        <div class="stream-control">
+          <el-button v-if="!playing" type="primary" @click="handleStartStream">开始点播</el-button>
+          <el-button v-if="playing" type="danger" @click="handleStopStream">停止点播</el-button>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { BoxApi } from '@/utils/boxApi.ts';
+// import Jsmpeg from '../../public/static/jsmpeg-master/jsmpeg.min.js';
+// console.log(">>>>>>>>>>>>>>>>>"+Jsmpeg);
+
+const cameras = ref([]);
+const selectedCamera = ref(null);
+const playing = ref(false);
+const streamPort = ref(null);
+const canvasRef = ref(null);
+const playerRef = ref(null);
+
+const apiInstance = new BoxApi();
+
+// 请求摄像头数据
+const fetchCameras = async () => {
+  try {
+    const token = localStorage.getItem('alertToken');
+    const cameraData = await apiInstance.getMinCameras(token); // 调用 getMinCameras 方法
+    cameras.value = cameraData;  // 保存摄像头列表数据
+  } catch (error) {
+    console.error('Error fetching cameras:', error);
+  }
+};
+
+// 选择摄像头
+const selectCamera = (camera) => {
+  selectedCamera.value = camera;  // 将点击的摄像头设为选中的摄像头
+  playing.value = false; // 重置播放状态
+  streamPort.value = null; // 重置流端口
+};
+
+// 启动流播放
+const handleStartStream = async () => {
+  if (!selectedCamera.value || !canvasRef.value) {
+    return;
+  }
+
+  const token = localStorage.getItem('alertToken');
+  try {
+    // 调用 API 获取端口
+    const response = await apiInstance.startCameraStream(token, selectedCamera.value.id);
+    streamPort.value = response.port;
+    playing.value = true;
+
+    // 创建播放器
+    const url = `ws://192.168.28.33:${streamPort.value}/`; // 动态流 URL
+    console.log('WebSocket URL>>>>>>>>>>>>>:', url);
+    
+    // 使用全局的 window.JSMpeg 对象
+    if (playerRef.value) {
+      playerRef.value.destroy(); // 销毁旧播放器
+    }
+    
+    if (window.JSMpeg) {
+      playerRef.value = new window.JSMpeg.Player(url, {
+        canvas: canvasRef.value,  // 指定 canvas 渲染
+        autoplay: true,
+        videoBufferSize: 15 * 1024 * 1024, // 设置视频缓冲区大小
+        audioBufferSize: 5 * 1024 * 1024,  // 设置音频缓冲区大小
+      });
+    } else {
+      console.error('JSMpeg is not available on window object.');
+    }
+  } catch (error) {
+    console.error('Error starting stream:', error);
+  }
+};
+
+// 停止流播放
+const handleStopStream = async () => {
+  if (!selectedCamera.value) {
+    return;
+  }
+
+  const token = localStorage.getItem('alertToken');
+  try {
+    await apiInstance.stopCameraStream(token, selectedCamera.value.id);
+    playing.value = false;
+
+    // 销毁播放器
+    if (playerRef.value) {
+      playerRef.value.destroy();
+      playerRef.value = null;
+    }
+  } catch (error) {
+    console.error('Error stopping stream:', error);
+  }
+};
+
+// 组件卸载时清理播放器
+onBeforeUnmount(() => {
+  if (playerRef.value) {
+    playerRef.value.destroy();
+    playerRef.value = null;
+  }
+});
+
+onMounted(() => {
+  fetchCameras();  // 页面加载时请求摄像头数据
+});
+</script>
+<style scoped>
+.camera-container {
+  display: flex;
+}
+
+.camera-list {
+  width: 20%;
+  max-height: 90vh; /* 限制高度为一屏 */
+  overflow-y: auto; /* 超出时滚动 */
+  box-sizing: border-box;
+}
+
+.camera-item {
+  margin-bottom: 5px;
+  cursor: pointer;
+  padding: 10px;
+}
+
+.camera-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.status {
+  margin-left: 5px;
+}
+
+.camera-content {
+  display: flex;
+  align-items: center;
+}
+
+.camera-thumbnail {
+  width: 60px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.camera-name {
+  flex: 1;
+  word-break: break-word; /* 文本超出时换行 */
+}
+
+.camera-details {
+  width: 80%;
+  padding: 10px;
+}
+
+.camera-large {
+  width: 100%;
+  height: 68vh;
+}
+
+.online {
+  color: green;
+}
+
+.offline {
+  color: red;
+}
+
+.stream-control {
+  margin-top: 20px;
+  text-align: center;
+}
+</style>
\ No newline at end of file