add: 添加分辨率设置逻辑

2025-07-13 11:42:26 +08:00
parent b913f58f13
commit 352ee1f4f2
5 changed files with 581 additions and 21 deletions
--- a/src/APIClient.ts
+++ b/src/APIClient.ts
@@ -311,6 +311,150 @@ export class VideoStreamClient {
        }
        return Promise.resolve<boolean>(null as any);
    }
+
+    /**
+     * 设置视频流分辨率
+     * @param width 宽度
+     * @param height 高度
+     * @return 操作结果
+     */
+    setResolution(width: number, height: number): Promise<boolean> {
+        let url_ = this.baseUrl + "/api/VideoStream/SetResolution";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify({ width: width, height: height });
+
+        let options_: RequestInit = {
+            method: "POST",
+            body: content_,
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processSetResolution(_response);
+        });
+    }
+
+    protected processSetResolution(response: Response): Promise<boolean> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return result200;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            let result500: any = null;
+            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result500 = Exception.fromJS(resultData500);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<boolean>(null as any);
+    }
+
+    /**
+     * 获取当前视频流分辨率
+     * @return 当前分辨率信息
+     */
+    getCurrentResolution(): Promise<any> {
+        let url_ = this.baseUrl + "/api/VideoStream/GetCurrentResolution";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetCurrentResolution(_response);
+        });
+    }
+
+    protected processGetCurrentResolution(response: Response): Promise<any> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return result200;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            let result500: any = null;
+            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result500 = Exception.fromJS(resultData500);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<any>(null as any);
+    }
+
+    /**
+     * 获取支持的视频流分辨率列表
+     * @return 支持的分辨率列表
+     */
+    getSupportedResolutions(): Promise<any[]> {
+        let url_ = this.baseUrl + "/api/VideoStream/GetSupportedResolutions";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetSupportedResolutions(_response);
+        });
+    }
+
+    protected processGetSupportedResolutions(response: Response): Promise<any[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return result200;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            let result500: any = null;
+            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result500 = Exception.fromJS(resultData500);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<any[]>(null as any);
+    }
 }

 export class BsdlParserClient {
--- a/src/views/Project/VideoStream.vue
+++ b/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(() => {