增加摄像头预览图

api/device.js

@@ -14,6 +14,26 @@ import api from "@/config/api.js";
 const wvpUsername = "admin" // 用户名
 const wvpPassword = "af7b951b3a30e898e2684ffe8d20a961" // 密码（MD5加密）
 const wvpServer = "https://nxy.gbdfarm.com:9000/pro-uniapp/wvp"// WVP服务器地址
+
+/**
+ * 登录wvp获取token
+ */
+export function querySnap(deviceId, channelId) {
+   return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${api.wvpServer}/api/device/query/snap/${deviceId}/${channelId}`,
+      method: 'GET',
+      responseType: 'arraybuffer',
+      success: (res) => {
+        const base64 = uni.arrayBufferToBase64(res.data)
+        resolve('data:image/png;base64,' + base64)
+      },
+      fail: reject
+    })
+  })
+}
+
+
 /**
  * 登录wvp获取token
  */

pages/trace/detail.vue

@@ -189,7 +189,9 @@
 					<view class="video-section">
 											<view class="video-container" :class="{'fullscreen-mode': isFullscreen}">
 												<!-- 默认未播放态背景：深灰绿 + 柔和层次感 -->
-												<view v-if="!isPlaying" class="video-placeholder-bg"></view>
+												<view v-if="!isPlaying" class="video-placeholder-bg">
+													<image :src="deviceInfo.imageUrl" mode="aspectFill" style="width:100%;height:100%"></image>
+												</view>
 
 											<!-- 使用跨平台视频播放组件 -->
 											<!-- #ifdef H5 -->
@@ -605,6 +607,7 @@ import {
 	getChannels,
 	playStart,
 	pause ,
+	querySnap
 } from '@/api/device.js'
 import Jessibuca from '@/components/common/jessibuca.vue'
 // 页面状态选择（H5 演示用）：通过路由参数传入 state 即可切换 mock 场景
@@ -682,6 +685,7 @@ const deviceInfo = reactive({
 	wsFlvStreamUrl: '',       // wss_flv 流地址（安卓 H5 用）
 	hlsStreamUrl: '',         // hls 流地址（iOS H5 / 小程序 / App iOS 用）
 	fmp4StreamUrl: '',        // fmp4 流地址（App Android 用）
+	imageUrl: ''              // 设备图片（如果有）
 })
 const MOCK_TRACE_DETAILS = {
 	normal: {
@@ -1053,7 +1057,9 @@ onLoad((opts) => {
 					console.log('channelId:', deviceInfo.channelId)
 					console.log('isH5IOS:', isH5IOS.value)
 					console.log('isIPhoneH5:', isIPhoneH5.value)
-
+					querySnap(deviceInfo.deviceId, deviceInfo.channelId).then(url => {
+					  deviceInfo.imageUrl = url
+					})
 					playStart(deviceInfo.deviceId, deviceInfo.channelId).then(res => {
 						if (res.data.code !== 0) {
 							console.error('播放开始失败:', res.message)