增加预览，修改组件

src/views/safe/camera/CameraView.vue

@@ -0,0 +1,113 @@
+<template>
+  <Dialog :title="dialogTitle +'(' + memo + ')'" v-model="dialogVisible" destroy-on-close @close="close">
+    <ContentWrap>
+      <video
+        ref="videoPlayer"
+        controls="true" autoplay="true"
+      ></video>
+    </ContentWrap>
+    <b>{{memo}}地址:</b> {{playUrl}}
+    <template #footer>
+      <el-button type="primary" @click="play('res')"><Icon icon="fa-solid:video" /> 原画面</el-button>
+      <el-button type="success" @click="play('ai')"><Icon icon="fa-solid:video" /> AI画面</el-button>
+      <el-button @click="close"><Icon icon="ep:close" />  关 闭</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { CameraApi } from '@/api/safe/camera'
+import { ServerApi } from '@/api/safe/server'
+import { onUnmounted} from 'vue'
+
+defineOptions({ name: 'CameraView' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const videoPlayer = ref(null)
+let sdk = null
+let memo = ref('')
+let playUrl = ref('')
+let webrtcUrl = ref('')
+let webrtcAiUrl = ref('')
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  if (id) {
+    formLoading.value = true
+    try {
+      const camera = await CameraApi.getCamera(id)
+      if(camera && camera.serverId){
+        const server = await ServerApi.getServer(camera.serverId);
+        dialogTitle.value = server.name + ' - ' + camera.name + ' 监视预览'
+        webrtcUrl.value = 'http://' + server.ip + ':1985/rtc/v1/whep/?app=' + server.domain + '&stream=' + camera.code
+        webrtcAiUrl.value = webrtcUrl.value + '-ai'
+        play('res')
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+const play = async (type: String) => {
+  try {
+    if(type === 'res'){
+      playUrl.value = webrtcUrl.value
+      memo.value = '原画面'
+    }else if(type === 'ai'){
+      playUrl.value = webrtcAiUrl.value
+      memo.value = 'AI画面'
+    }
+    console.log('播放地址:' + playUrl.value)
+    if (playUrl.value) {
+      if (sdk) {
+        sdk.close()
+        sdk = null
+      }
+      sdk = new SrsRtcWhipWhepAsync()
+      sdk.play(playUrl.value)
+        .then(function (session) {
+          videoPlayer.value.srcObject = sdk.stream
+        })
+        .catch(function (reason) {
+          console.error(reason)
+        })
+    } else {
+      ElMessage.error(
+        playUrl.value + '视频源无法播放'
+      )
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const close = async () => {
+  if(dialogVisible){
+    dialogVisible.value = false
+  }
+  if (sdk) {
+    sdk.close()
+  }
+  sdk = null
+  playUrl = ref('')
+  memo = ref('')
+}
+
+onUnmounted(() => {
+  close
+})
+
+
+defineExpose({ open}) // 暴漏 open 方法，用于打开弹窗
+
+</script>
+
+<style scoped>
+video {
+  width: 100%;
+  height: auto;
+}
+</style>

src/views/safe/camera/CameraViewForm.vue

@@ -1,41 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    
-    <template #footer>
-      <el-button @click="dialogVisible = false">关 闭</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { CameraApi } from '@/api/safe/camera'
-import { ServerApi } from '@/api/safe/server'
-
-defineOptions({ name: 'CameraViewForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-let webrtcUrl = ''
-let webrtcAiUrl = ''
-
-/** 打开弹窗 */
-const open = async (id: number) => {
-  dialogVisible.value = true
-  if (id) {
-    formLoading.value = true
-    try {
-      const camera = await CameraApi.getCamera(id)
-      if(camera && camera.serverId){
-        const server = await ServerApi.getServer(camera.serverId);
-        dialogTitle.value = server.name + ' - ' + camera.name + ' 监视预览'
-        
-      }
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-
-defineExpose({ open}) // 提供 open 方法，用于打开弹窗
-
-</script>

src/views/safe/camera/index.vue

@@ -120,30 +120,32 @@
       <el-table-column label="描述" align="center" prop="des" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button
-            link
-            type="success"
-            @click="openViewForm(scope.row.id)"
-            v-hasPermi="['safe:camera:query']"
-          >
-            预览
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['safe:camera:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['safe:camera:delete']"
-          >
-            删除
-          </el-button>
+          <div class="flex items-center justify-center">
+            <el-button
+              link
+              type="success"
+              @click="openView(scope.row.id)"
+              v-hasPermi="['safe:camera:query']"
+            >
+            <Icon icon="ep:camera" /> 预览
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['safe:camera:update']"
+            >
+            <Icon icon="ep:edit" /> 编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['safe:camera:delete']"
+            >
+            <Icon icon="ep:delete" /> 删除
+            </el-button>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -158,7 +160,7 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <CameraForm ref="formRef" @success="getList" />
-  <CameraViewForm  ref="viewFormRef"/>
+  <CameraView  ref="viewRef"/>
 </template>
 
 <script setup lang="ts">
@@ -167,7 +169,7 @@ import download from '@/utils/download'
 import { CameraApi, CameraVO } from '@/api/safe/camera'
 import { ServerApi } from '@/api/safe/server'
 import CameraForm from './CameraForm.vue'
-import CameraViewForm from './CameraViewForm.vue'
+import CameraView from './CameraView.vue'
 
 /** 安防前端设备 列表 */
 defineOptions({ name: 'SafeCamera' })
@@ -223,9 +225,9 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 预览操作 */
-const viewFormRef = ref()
-const openViewForm = (id?: number) => {
-  viewFormRef.value.open(id)
+const viewRef = ref()
+const openView = (id?: number) => {
+  viewRef.value.open(id)
 }
 
 /** 删除按钮操作 */

src/views/safe/server/index.vue

@@ -114,22 +114,24 @@
       <el-table-column label="描述" align="center" prop="des" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['safe:server:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['safe:server:delete']"
-          >
-            删除
-          </el-button>
+          <div class="flex items-center justify-center">
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['safe:server:update']"
+            >
+            <Icon icon="ep:edit" /> 编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['safe:server:delete']"
+            >
+            <Icon icon="ep:delete" /> 删除
+            </el-button>
+          </div>
         </template>
       </el-table-column>
     </el-table>