add: 添加分辨率设置逻辑

src/views/Project/VideoStream.vue

@@ -8,7 +8,7 @@
           控制面板
         </h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
           <!-- 服务状态 -->
           <div class="stats shadow">
             <div class="stat bg-base-100">
@@ -42,6 +42,38 @@
             </div>
           </div>
 
+          <!-- 分辨率控制 -->
+          <div class="stats shadow">
+            <div class="stat bg-base-100">
+              <div class="stat-figure text-info">
+                <Settings class="w-8 h-8" />
+              </div>
+              <div class="stat-title">分辨率设置</div>
+              <div class="stat-value text-sm">
+                <select 
+                  class="select select-sm select-bordered max-w-xs" 
+                  v-model="selectedResolution"
+                  @change="changeResolution"
+                  :disabled="changingResolution"
+                >
+                  <option v-for="res in supportedResolutions" :key="`${res.width}x${res.height}`" :value="res">
+                    {{ res.width }}×{{ res.height }}
+                  </option>
+                </select>
+              </div>
+              <div class="stat-desc">
+                <button 
+                  class="btn btn-xs btn-outline btn-info mt-1"
+                  @click="refreshResolutions"
+                  :disabled="loadingResolutions"
+                >
+                  <RefreshCw v-if="loadingResolutions" class="animate-spin h-3 w-3" />
+                  {{ loadingResolutions ? "刷新中..." : "刷新" }}
+                </button>
+              </div>
+            </div>
+          </div>
+
           <!-- 连接数 -->
           <div class="stats shadow">
             <div class="stat bg-base-100 relative">
@@ -321,6 +353,15 @@ const isPlaying = ref(false);
 const hasVideoError = ref(false);
 const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频');
 
+// 分辨率相关状态
+const changingResolution = ref(false);
+const loadingResolutions = ref(false);
+const selectedResolution = ref({ width: 640, height: 480 });
+const supportedResolutions = ref([
+  { width: 640, height: 480 },
+  { width: 1280, height: 720 }
+]);
+
 // 数据
 const statusInfo = ref({
   isRunning: false,
@@ -549,6 +590,69 @@ const startStream = async () => {
   }
 };
 
+// 分辨率相关方法
+// 获取支持的分辨率列表
+const refreshResolutions = async () => {
+  loadingResolutions.value = true;
+  try {
+    addLog("info", "正在获取支持的分辨率列表...");
+    const resolutions = await videoClient.getSupportedResolutions();
+    supportedResolutions.value = resolutions;
+    
+    // 获取当前分辨率
+    const currentRes = await videoClient.getCurrentResolution();
+    selectedResolution.value = currentRes;
+    
+    addLog("success", "分辨率列表获取成功");
+  } catch (error) {
+    addLog("error", `获取分辨率列表失败: ${error}`);
+    console.error("获取分辨率列表失败:", error);
+  } finally {
+    loadingResolutions.value = false;
+  }
+};
+
+// 切换分辨率
+const changeResolution = async () => {
+  if (!selectedResolution.value) return;
+  
+  changingResolution.value = true;
+  const wasPlaying = isPlaying.value;
+  
+  try {
+    addLog("info", `正在切换分辨率到 ${selectedResolution.value.width}×${selectedResolution.value.height}...`);
+    
+    // 如果正在播放，先停止视频流
+    if (wasPlaying) {
+      stopStream();
+      await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒
+    }
+    
+    // 设置新分辨率
+    const success = await videoClient.setResolution(selectedResolution.value.width, selectedResolution.value.height);
+    
+    if (success) {
+      // 刷新流信息
+      await refreshStatus();
+      
+      // 如果之前在播放，重新启动视频流
+      if (wasPlaying) {
+        await new Promise(resolve => setTimeout(resolve, 500)); // 短暂延迟
+        await startStream();
+      }
+      
+      addLog("success", `分辨率已切换到 ${selectedResolution.value.width}×${selectedResolution.value.height}`);
+    } else {
+      addLog("error", "分辨率切换失败");
+    }
+  } catch (error) {
+    addLog("error", `分辨率切换失败: ${error}`);
+    console.error("分辨率切换失败:", error);
+  } finally {
+    changingResolution.value = false;
+  }
+};
+
 // 停止视频流
 const stopStream = () => {
   try {
@@ -574,6 +678,7 @@ const stopStream = () => {
 onMounted(async () => {
   addLog("info", "HTTP 视频流页面已加载");
   await refreshStatus();
+  await refreshResolutions(); // 初始化分辨率信息
 });
 
 onUnmounted(() => {