refactor: 视频流前后端适配

server/.gitignore

@@ -1,5 +1,6 @@
+# Generate
 obj
 bin
 bitstream
 bsdl
-
+data

server/src/Controllers/VideoStreamController.cs

@@ -4,6 +4,7 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Authorization;
 using System.Security.Claims;
 using DotNext;
+using server.Services;
 
 /// <summary>
 /// 视频流控制器，支持动态配置摄像头连接
@@ -15,7 +16,7 @@ public class VideoStreamController : ControllerBase
 {
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
 
-    private readonly server.Services.HttpVideoStreamService _videoStreamService;
+    private readonly HttpVideoStreamService _videoStreamService;
     private readonly Database.UserManager _userManager;
 
     /// <summary>
@@ -24,7 +25,7 @@ public class VideoStreamController : ControllerBase
     /// <param name="videoStreamService">HTTP视频流服务</param>
     /// <param name="userManager">用户管理服务</param>
     public VideoStreamController(
-        server.Services.HttpVideoStreamService videoStreamService, Database.UserManager userManager)
+        HttpVideoStreamService videoStreamService, Database.UserManager userManager)
     {
         logger.Info("创建VideoStreamController，命名空间：{Namespace}", this.GetType().Namespace);
         _videoStreamService = videoStreamService;
@@ -62,11 +63,11 @@ public class VideoStreamController : ControllerBase
     /// 获取 HTTP 视频流服务状态
     /// </summary>
     /// <returns>服务状态信息</returns>
-    [HttpGet("Status")]
+    [HttpGet("ServiceStatus")]
     [EnableCors("Users")]
-    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(VideoStreamServiceStatus), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public IResult GetStatus()
+    public IResult GetServiceStatus()
     {
         try
         {
@@ -85,7 +86,7 @@ public class VideoStreamController : ControllerBase
 
     [HttpGet("MyEndpoint")]
     [EnableCors("Users")]
-    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(VideoStreamEndpoint), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public IResult MyEndpoint()
     {
@@ -141,14 +142,14 @@ public class VideoStreamController : ControllerBase
         }
     }
 
-    [HttpPost("DisableTransmission")]
+    [HttpPost("SetVideoStreamEnable")]
-    public async Task<IActionResult> DisableHdmiTransmission()
+    public async Task<IActionResult> SetVideoStreamEnable(bool enable)
     {
         try
         {
             var boardId = TryGetBoardId().OrThrow(() => new ArgumentException("Board ID is required"));
 
-            await _videoStreamService.DisableHdmiTransmissionAsync(boardId.ToString());
+            await _videoStreamService.SetVideoStreamEnableAsync(boardId.ToString(), enable);
             return Ok($"HDMI transmission for board {boardId} disabled.");
         }
         catch (Exception ex)
@@ -210,7 +211,7 @@ public class VideoStreamController : ControllerBase
     /// <returns>支持的分辨率列表</returns>
     [HttpGet("SupportedResolutions")]
     [EnableCors("Users")]
-    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(AvailableResolutionsResponse[]), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(string), StatusCodes.Status500InternalServerError)]
     public IResult GetSupportedResolutions()
     {
@@ -319,6 +320,39 @@ public class VideoStreamController : ControllerBase
         }
     }
 
+    /// <summary>
+    /// 配置摄像头连接参数
+    /// </summary>
+    /// <returns>配置结果</returns>
+    [HttpPost("ConfigureCamera")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(object), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async Task<IResult> ConfigureCamera()
+    {
+        try
+        {
+            var boardId = TryGetBoardId().OrThrow(() => new Exception("Board ID not found"));
+
+            var ret = await _videoStreamService.ConfigureCameraAsync(boardId);
+
+            if (ret)
+            {
+                return TypedResults.Ok(new { Message = "配置成功" });
+            }
+            else
+            {
+                return TypedResults.BadRequest(new { Message = "配置失败" });
+            }
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "配置摄像头连接失败");
+            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+
     /// <summary>
     /// 分辨率配置请求模型
     /// </summary>

server/src/Services/HttpVideoStreamService.cs

@@ -13,6 +13,7 @@ namespace server.Services;
 public class VideoStreamClient
 {
     public string? ClientId { get; set; } = string.Empty;
+    public bool IsEnabled { get; set; } = true;
     public int FrameWidth { get; set; }
     public int FrameHeight { get; set; }
     public int FrameRate { get; set; }
@@ -35,28 +36,35 @@ public class VideoStreamClient
 /// <summary>
 /// 表示摄像头连接状态信息
 /// </summary>
-public class VideoEndpoint
+public class VideoStreamEndpoint
 {
-    public string BoardId { get; set; } = "";
+    public required string BoardId { get; set; } = "";
-    public string MjpegUrl { get; set; } = "";
+    public required string MjpegUrl { get; set; } = "";
-    public string VideoUrl { get; set; } = "";
+    public required string VideoUrl { get; set; } = "";
-    public string SnapshotUrl { get; set; } = "";
+    public required string SnapshotUrl { get; set; } = "";
+    public required string HtmlUrl { get; set; } = "";
+    public required string UsbCameraUrl { get; set; } = "";
+
+    public required bool IsEnabled { get; set; }
 
     /// <summary>
     /// 视频流的帧率（FPS）
     /// </summary>
-    public int FrameRate { get; set; }
+    public required int FrameRate { get; set; }
+
+    public int FrameWidth { get; set; }
+    public int FrameHeight { get; set; }
 
     /// <summary>
     /// 视频分辨率（如 640x480）
     /// </summary>
-    public string Resolution { get; set; } = string.Empty;
+    public string Resolution => $"{FrameWidth}x{FrameHeight}";
 }
 
 /// <summary>
 /// 表示视频流服务的运行状态
 /// </summary>
-public class ServiceStatus
+public class VideoStreamServiceStatus
 {
     /// <summary>
     /// 服务是否正在运行
@@ -71,7 +79,7 @@ public class ServiceStatus
     /// <summary>
     /// 当前连接的客户端端点列表
     /// </summary>
-    public List<VideoEndpoint> ClientEndpoints { get; set; } = new();
+    public List<VideoStreamEndpoint> ClientEndpoints { get; set; } = new();
 
     /// <summary>
     /// 当前连接的客户端数量
@@ -106,36 +114,6 @@ public class HttpVideoStreamService : BackgroundService
         _userManager = userManager;
     }
 
-    /// <summary>
-    /// 初始化 HttpVideoStreamService
-    /// </summary>
-    public override async Task StartAsync(CancellationToken cancellationToken)
-    {
-        _httpListener = new HttpListener();
-        _httpListener.Prefixes.Add($"http://{Global.LocalHost}:{_serverPort}/");
-        _httpListener.Start();
-        logger.Info($"Video Stream Service started on port {_serverPort}");
-
-        await base.StartAsync(cancellationToken);
-    }
-
-    /// <summary>
-    /// 停止 HTTP 视频流服务
-    /// </summary>
-    public override async Task StopAsync(CancellationToken cancellationToken)
-    {
-        foreach (var clientKey in _clientDict.Keys)
-        {
-            var client = _clientDict[clientKey];
-            client.CTS.Cancel();
-            using (await client.Lock.AcquireWriteLockAsync(cancellationToken))
-            {
-                await client.Camera.EnableHardwareTrans(false);
-            }
-        }
-        _clientDict.Clear();
-        await base.StopAsync(cancellationToken);
-    }
 
     private Optional<VideoStreamClient> TryGetClient(string boardId)
     {
@@ -176,6 +154,36 @@ public class HttpVideoStreamService : BackgroundService
         return client;
     }
 
+    /// <summary>
+    /// 初始化 HttpVideoStreamService
+    /// </summary>
+    public override async Task StartAsync(CancellationToken cancellationToken)
+    {
+        _httpListener = new HttpListener();
+        _httpListener.Prefixes.Add($"http://{Global.LocalHost}:{_serverPort}/");
+        _httpListener.Start();
+        logger.Info($"Video Stream Service started on port {_serverPort}");
+
+        await base.StartAsync(cancellationToken);
+    }
+
+    /// <summary>
+    /// 停止 HTTP 视频流服务
+    /// </summary>
+    public override async Task StopAsync(CancellationToken cancellationToken)
+    {
+        foreach (var clientKey in _clientDict.Keys)
+        {
+            var client = _clientDict[clientKey];
+            client.CTS.Cancel();
+            using (await client.Lock.AcquireWriteLockAsync(cancellationToken))
+            {
+                await client.Camera.EnableHardwareTrans(false);
+            }
+        }
+        _clientDict.Clear();
+        await base.StopAsync(cancellationToken);
+    }
 
     /// <summary>
     /// 执行 HTTP 视频流服务
@@ -254,6 +262,11 @@ public class HttpVideoStreamService : BackgroundService
                 // 单帧图像请求
                 await HandleSnapshotRequestAsync(context.Response, client, cancellationToken);
             }
+            else if (path == "/html")
+            {
+                // HTML页面请求
+                await SendIndexHtmlPageAsync(context.Response);
+            }
             else
             {
                 // 默认返回简单的HTML页面，提供链接到视频页面
@@ -668,42 +681,12 @@ public class HttpVideoStreamService : BackgroundService
         }
     }
 
-    public VideoEndpoint GetVideoEndpoint(string boardId)
+    /// <summary>
-    {
+    /// 配置摄像头连接参数
-        var client = TryGetClient(boardId).OrThrow(() => new Exception($"无法获取摄像头客户端: {boardId}"));
+    /// </summary>
-
+    /// <param name="boardId">板卡ID</param>
-        return new VideoEndpoint
+    /// <returns>配置是否成功</returns>
-        {
+    public async Task<bool> ConfigureCameraAsync(string boardId)
-            BoardId = boardId,
-            MjpegUrl = $"http://{Global.LocalHost}:{_serverPort}/mjpeg?boardId={boardId}",
-            VideoUrl = $"http://{Global.LocalHost}:{_serverPort}/video?boardId={boardId}",
-            SnapshotUrl = $"http://{Global.LocalHost}:{_serverPort}/snapshot?boardId={boardId}",
-            Resolution = $"{client.FrameWidth}x{client.FrameHeight}",
-            FrameRate = client.FrameRate
-        };
-    }
-
-    public List<VideoEndpoint> GetAllVideoEndpoints()
-    {
-        var endpoints = new List<VideoEndpoint>();
-
-        foreach (var boardId in _clientDict.Keys)
-            endpoints.Add(GetVideoEndpoint(boardId));
-
-        return endpoints;
-    }
-
-    public ServiceStatus GetServiceStatus()
-    {
-        return new ServiceStatus
-        {
-            IsRunning = true,
-            ServerPort = _serverPort,
-            ClientEndpoints = GetAllVideoEndpoints()
-        };
-    }
-
-    public async Task DisableHdmiTransmissionAsync(string boardId)
     {
         try
         {
@@ -711,8 +694,67 @@ public class HttpVideoStreamService : BackgroundService
 
             using (await client.Lock.AcquireWriteLockAsync())
             {
+                var ret = await client.Camera.Init();
+                if (!ret.IsSuccessful)
+                {
+                    logger.Error(ret.Error);
+                    throw ret.Error;
+                }
+
+                if (!ret.Value)
+                {
+                    logger.Error($"Camera Init Failed!");
+                    throw new Exception($"Camera Init Failed!");
+                }
+            }
+
+            using (await client.Lock.AcquireWriteLockAsync())
+            {
+                var ret = await client.Camera.ChangeResolution(client.FrameWidth, client.FrameHeight);
+                if (!ret.IsSuccessful)
+                {
+                    logger.Error(ret.Error);
+                    throw ret.Error;
+                }
+
+                if (!ret.Value)
+                {
+                    logger.Error($"Camera Resolution Change Failed!");
+                    throw new Exception($"Camera Resolution Change Failed!");
+                }
+            }
+
+            return true;
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "配置摄像头连接时发生错误");
+            return false;
+        }
+    }
+
+    public async Task SetVideoStreamEnableAsync(string boardId, bool enable)
+    {
+        try
+        {
+            var client = TryGetClient(boardId).OrThrow(() => new Exception($"无法获取摄像头客户端: {boardId}"));
+
+            if (client.IsEnabled == enable)
+                return;
+
+            using (await client.Lock.AcquireWriteLockAsync())
+            {
+                if (enable)
+                {
+                    client.CTS = new CancellationTokenSource();
+                }
+                else
+                {
+                    client.CTS.Cancel();
+                }
+
                 var camera = client.Camera;
-                var disableResult = await camera.EnableHardwareTrans(false);
+                var disableResult = await camera.EnableHardwareTrans(enable);
                 if (disableResult.IsSuccessful && disableResult.Value)
                     logger.Info($"Successfully disabled camera {boardId} hardware transmission");
                 else
@@ -743,4 +785,41 @@ public class HttpVideoStreamService : BackgroundService
             return false;
         }
     }
+
+    public VideoStreamEndpoint GetVideoEndpoint(string boardId)
+    {
+        var client = TryGetClient(boardId).OrThrow(() => new Exception($"无法获取摄像头客户端: {boardId}"));
+
+        return new VideoStreamEndpoint
+        {
+            BoardId = boardId,
+            MjpegUrl = $"http://{Global.LocalHost}:{_serverPort}/mjpeg?boardId={boardId}",
+            VideoUrl = $"http://{Global.LocalHost}:{_serverPort}/video?boardId={boardId}",
+            SnapshotUrl = $"http://{Global.LocalHost}:{_serverPort}/snapshot?boardId={boardId}",
+            UsbCameraUrl = $"http://{Global.LocalHost}:{_serverPort}/usbCamera?boardId={boardId}",
+            HtmlUrl = $"http://{Global.LocalHost}:{_serverPort}/html?boardId={boardId}",
+            IsEnabled = client.IsEnabled,
+            FrameRate = client.FrameRate
+        };
+    }
+
+    public List<VideoStreamEndpoint> GetAllVideoEndpoints()
+    {
+        var endpoints = new List<VideoStreamEndpoint>();
+
+        foreach (var boardId in _clientDict.Keys)
+            endpoints.Add(GetVideoEndpoint(boardId));
+
+        return endpoints;
+    }
+
+    public VideoStreamServiceStatus GetServiceStatus()
+    {
+        return new VideoStreamServiceStatus
+        {
+            IsRunning = true,
+            ServerPort = _serverPort,
+            ClientEndpoints = GetAllVideoEndpoints()
+        };
+    }
 }

src/APIClient.ts

@@ -129,8 +129,8 @@ export class VideoStreamClient {
      * 获取 HTTP 视频流服务状态
      * @return 服务状态信息
      */
-    getStatus( cancelToken?: CancelToken): Promise<any> {
+    getServiceStatus( cancelToken?: CancelToken): Promise<VideoStreamServiceStatus> {
-        let url_ = this.baseUrl + "/api/VideoStream/Status";
+        let url_ = this.baseUrl + "/api/VideoStream/ServiceStatus";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: AxiosRequestConfig = {
@@ -149,11 +149,11 @@ export class VideoStreamClient {
                 throw _error;
             }
         }).then((_response: AxiosResponse) => {
-            return this.processGetStatus(_response);
+            return this.processGetServiceStatus(_response);
         });
     }
 
-    protected processGetStatus(response: AxiosResponse): Promise<any> {
+    protected processGetServiceStatus(response: AxiosResponse): Promise<VideoStreamServiceStatus> {
         const status = response.status;
         let _headers: any = {};
         if (response.headers && typeof response.headers === "object") {
@@ -167,9 +167,8 @@ export class VideoStreamClient {
             const _responseText = response.data;
             let result200: any = null;
             let resultData200  = _responseText;
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+            result200 = VideoStreamServiceStatus.fromJS(resultData200);
-    
+            return Promise.resolve<VideoStreamServiceStatus>(result200);
-            return Promise.resolve<any>(result200);
 
         } else if (status === 500) {
             const _responseText = response.data;
@@ -182,10 +181,10 @@ export class VideoStreamClient {
             const _responseText = response.data;
             return throwException("An unexpected server error occurred.", status, _responseText, _headers);
         }
-        return Promise.resolve<any>(null as any);
+        return Promise.resolve<VideoStreamServiceStatus>(null as any);
     }
 
-    myEndpoint( cancelToken?: CancelToken): Promise<any> {
+    myEndpoint( cancelToken?: CancelToken): Promise<VideoStreamEndpoint> {
         let url_ = this.baseUrl + "/api/VideoStream/MyEndpoint";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -209,7 +208,7 @@ export class VideoStreamClient {
         });
     }
 
-    protected processMyEndpoint(response: AxiosResponse): Promise<any> {
+    protected processMyEndpoint(response: AxiosResponse): Promise<VideoStreamEndpoint> {
         const status = response.status;
         let _headers: any = {};
         if (response.headers && typeof response.headers === "object") {
@@ -223,9 +222,8 @@ export class VideoStreamClient {
             const _responseText = response.data;
             let result200: any = null;
             let resultData200  = _responseText;
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+            result200 = VideoStreamEndpoint.fromJS(resultData200);
-    
+            return Promise.resolve<VideoStreamEndpoint>(result200);
-            return Promise.resolve<any>(result200);
 
         } else if (status === 500) {
             const _responseText = response.data;
@@ -238,7 +236,7 @@ export class VideoStreamClient {
             const _responseText = response.data;
             return throwException("An unexpected server error occurred.", status, _responseText, _headers);
         }
-        return Promise.resolve<any>(null as any);
+        return Promise.resolve<VideoStreamEndpoint>(null as any);
     }
 
     /**
@@ -301,8 +299,12 @@ export class VideoStreamClient {
         return Promise.resolve<boolean>(null as any);
     }
 
-    disableHdmiTransmission( cancelToken?: CancelToken): Promise<FileResponse | null> {
+    setVideoStreamEnable(enable: boolean | undefined, cancelToken?: CancelToken): Promise<FileResponse | null> {
-        let url_ = this.baseUrl + "/api/VideoStream/DisableTransmission";
+        let url_ = this.baseUrl + "/api/VideoStream/SetVideoStreamEnable?";
+        if (enable === null)
+            throw new Error("The parameter 'enable' cannot be null.");
+        else if (enable !== undefined)
+            url_ += "enable=" + encodeURIComponent("" + enable) + "&";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: AxiosRequestConfig = {
@@ -322,11 +324,11 @@ export class VideoStreamClient {
                 throw _error;
             }
         }).then((_response: AxiosResponse) => {
-            return this.processDisableHdmiTransmission(_response);
+            return this.processSetVideoStreamEnable(_response);
         });
     }
 
-    protected processDisableHdmiTransmission(response: AxiosResponse): Promise<FileResponse | null> {
+    protected processSetVideoStreamEnable(response: AxiosResponse): Promise<FileResponse | null> {
         const status = response.status;
         let _headers: any = {};
         if (response.headers && typeof response.headers === "object") {
@@ -432,7 +434,7 @@ export class VideoStreamClient {
      * 获取支持的分辨率列表
      * @return 支持的分辨率列表
      */
-    getSupportedResolutions( cancelToken?: CancelToken): Promise<any> {
+    getSupportedResolutions( cancelToken?: CancelToken): Promise<AvailableResolutionsResponse[]> {
         let url_ = this.baseUrl + "/api/VideoStream/SupportedResolutions";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -456,7 +458,7 @@ export class VideoStreamClient {
         });
     }
 
-    protected processGetSupportedResolutions(response: AxiosResponse): Promise<any> {
+    protected processGetSupportedResolutions(response: AxiosResponse): Promise<AvailableResolutionsResponse[]> {
         const status = response.status;
         let _headers: any = {};
         if (response.headers && typeof response.headers === "object") {
@@ -470,9 +472,15 @@ export class VideoStreamClient {
             const _responseText = response.data;
             let result200: any = null;
             let resultData200  = _responseText;
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+            if (Array.isArray(resultData200)) {
-    
+                result200 = [] as any;
-            return Promise.resolve<any>(result200);
+                for (let item of resultData200)
+                    result200!.push(AvailableResolutionsResponse.fromJS(item));
+            }
+            else {
+                result200 = <any>null;
+            }
+            return Promise.resolve<AvailableResolutionsResponse[]>(result200);
 
         } else if (status === 500) {
             const _responseText = response.data;
@@ -486,7 +494,7 @@ export class VideoStreamClient {
             const _responseText = response.data;
             return throwException("An unexpected server error occurred.", status, _responseText, _headers);
         }
-        return Promise.resolve<any>(null as any);
+        return Promise.resolve<AvailableResolutionsResponse[]>(null as any);
     }
 
     /**
@@ -626,6 +634,74 @@ export class VideoStreamClient {
         }
         return Promise.resolve<any>(null as any);
     }
+
+    /**
+     * 配置摄像头连接参数
+     * @return 配置结果
+     */
+    configureCamera( cancelToken?: CancelToken): Promise<any> {
+        let url_ = this.baseUrl + "/api/VideoStream/ConfigureCamera";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: AxiosRequestConfig = {
+            method: "POST",
+            url: url_,
+            headers: {
+                "Accept": "application/json"
+            },
+            cancelToken
+        };
+
+        return this.instance.request(options_).catch((_error: any) => {
+            if (isAxiosError(_error) && _error.response) {
+                return _error.response;
+            } else {
+                throw _error;
+            }
+        }).then((_response: AxiosResponse) => {
+            return this.processConfigureCamera(_response);
+        });
+    }
+
+    protected processConfigureCamera(response: AxiosResponse): Promise<any> {
+        const status = response.status;
+        let _headers: any = {};
+        if (response.headers && typeof response.headers === "object") {
+            for (const k in response.headers) {
+                if (response.headers.hasOwnProperty(k)) {
+                    _headers[k] = response.headers[k];
+                }
+            }
+        }
+        if (status === 200) {
+            const _responseText = response.data;
+            let result200: any = null;
+            let resultData200  = _responseText;
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return Promise.resolve<any>(result200);
+
+        } else if (status === 400) {
+            const _responseText = response.data;
+            let result400: any = null;
+            let resultData400  = _responseText;
+                result400 = resultData400 !== undefined ? resultData400 : <any>null;
+    
+            return throwException("A server side error occurred.", status, _responseText, _headers, result400);
+
+        } else if (status === 500) {
+            const _responseText = response.data;
+            let result500: any = null;
+            let resultData500  = _responseText;
+            result500 = Exception.fromJS(resultData500);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
+
+        } else if (status !== 200 && status !== 204) {
+            const _responseText = response.data;
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+        }
+        return Promise.resolve<any>(null as any);
+    }
 }
 
 export class BsdlParserClient {
@@ -6927,6 +7003,157 @@ export class UDPClient {
     }
 }
 
+/** 表示视频流服务的运行状态 */
+export class VideoStreamServiceStatus implements IVideoStreamServiceStatus {
+    /** 服务是否正在运行 */
+    isRunning!: boolean;
+    /** 服务监听的端口号 */
+    serverPort!: number;
+    /** 当前连接的客户端端点列表 */
+    clientEndpoints!: VideoStreamEndpoint[];
+    /** 当前连接的客户端数量 */
+    connectedClientsNum!: number;
+
+    constructor(data?: IVideoStreamServiceStatus) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+        if (!data) {
+            this.clientEndpoints = [];
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            this.isRunning = _data["isRunning"];
+            this.serverPort = _data["serverPort"];
+            if (Array.isArray(_data["clientEndpoints"])) {
+                this.clientEndpoints = [] as any;
+                for (let item of _data["clientEndpoints"])
+                    this.clientEndpoints!.push(VideoStreamEndpoint.fromJS(item));
+            }
+            this.connectedClientsNum = _data["connectedClientsNum"];
+        }
+    }
+
+    static fromJS(data: any): VideoStreamServiceStatus {
+        data = typeof data === 'object' ? data : {};
+        let result = new VideoStreamServiceStatus();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        data["isRunning"] = this.isRunning;
+        data["serverPort"] = this.serverPort;
+        if (Array.isArray(this.clientEndpoints)) {
+            data["clientEndpoints"] = [];
+            for (let item of this.clientEndpoints)
+                data["clientEndpoints"].push(item ? item.toJSON() : <any>undefined);
+        }
+        data["connectedClientsNum"] = this.connectedClientsNum;
+        return data;
+    }
+}
+
+/** 表示视频流服务的运行状态 */
+export interface IVideoStreamServiceStatus {
+    /** 服务是否正在运行 */
+    isRunning: boolean;
+    /** 服务监听的端口号 */
+    serverPort: number;
+    /** 当前连接的客户端端点列表 */
+    clientEndpoints: VideoStreamEndpoint[];
+    /** 当前连接的客户端数量 */
+    connectedClientsNum: number;
+}
+
+/** 表示摄像头连接状态信息 */
+export class VideoStreamEndpoint implements IVideoStreamEndpoint {
+    boardId!: string;
+    mjpegUrl!: string;
+    videoUrl!: string;
+    snapshotUrl!: string;
+    htmlUrl!: string;
+    usbCameraUrl!: string;
+    isEnabled!: boolean;
+    /** 视频流的帧率（FPS） */
+    frameRate!: number;
+    frameWidth!: number;
+    frameHeight!: number;
+    /** 视频分辨率（如 640x480） */
+    resolution!: string;
+
+    constructor(data?: IVideoStreamEndpoint) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            this.boardId = _data["boardId"];
+            this.mjpegUrl = _data["mjpegUrl"];
+            this.videoUrl = _data["videoUrl"];
+            this.snapshotUrl = _data["snapshotUrl"];
+            this.htmlUrl = _data["htmlUrl"];
+            this.usbCameraUrl = _data["usbCameraUrl"];
+            this.isEnabled = _data["isEnabled"];
+            this.frameRate = _data["frameRate"];
+            this.frameWidth = _data["frameWidth"];
+            this.frameHeight = _data["frameHeight"];
+            this.resolution = _data["resolution"];
+        }
+    }
+
+    static fromJS(data: any): VideoStreamEndpoint {
+        data = typeof data === 'object' ? data : {};
+        let result = new VideoStreamEndpoint();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        data["boardId"] = this.boardId;
+        data["mjpegUrl"] = this.mjpegUrl;
+        data["videoUrl"] = this.videoUrl;
+        data["snapshotUrl"] = this.snapshotUrl;
+        data["htmlUrl"] = this.htmlUrl;
+        data["usbCameraUrl"] = this.usbCameraUrl;
+        data["isEnabled"] = this.isEnabled;
+        data["frameRate"] = this.frameRate;
+        data["frameWidth"] = this.frameWidth;
+        data["frameHeight"] = this.frameHeight;
+        data["resolution"] = this.resolution;
+        return data;
+    }
+}
+
+/** 表示摄像头连接状态信息 */
+export interface IVideoStreamEndpoint {
+    boardId: string;
+    mjpegUrl: string;
+    videoUrl: string;
+    snapshotUrl: string;
+    htmlUrl: string;
+    usbCameraUrl: string;
+    isEnabled: boolean;
+    /** 视频流的帧率（FPS） */
+    frameRate: number;
+    frameWidth: number;
+    frameHeight: number;
+    /** 视频分辨率（如 640x480） */
+    resolution: string;
+}
+
 export class Exception implements IException {
     declare message: string;
     innerException?: Exception | undefined;
@@ -7021,6 +7248,54 @@ export interface IResolutionConfigRequest {
     height: number;
 }
 
+export class AvailableResolutionsResponse implements IAvailableResolutionsResponse {
+    width!: number;
+    height!: number;
+    name!: string;
+    value!: string;
+
+    constructor(data?: IAvailableResolutionsResponse) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            this.width = _data["width"];
+            this.height = _data["height"];
+            this.name = _data["name"];
+            this.value = _data["value"];
+        }
+    }
+
+    static fromJS(data: any): AvailableResolutionsResponse {
+        data = typeof data === 'object' ? data : {};
+        let result = new AvailableResolutionsResponse();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        data["width"] = this.width;
+        data["height"] = this.height;
+        data["name"] = this.name;
+        data["value"] = this.value;
+        return data;
+    }
+}
+
+export interface IAvailableResolutionsResponse {
+    width: number;
+    height: number;
+    name: string;
+    value: string;
+}
+
 export class ProblemDetails implements IProblemDetails {
     type?: string | undefined;
     title?: string | undefined;

src/components/UploadCard.vue

@@ -87,9 +87,12 @@ import type { HubConnection } from "@microsoft/signalr";
 import type {
   IProgressHub,
   IProgressReceiver,
-} from "@/TypedSignalR.Client/server.Hubs";
+} from "@/utils/signalR/TypedSignalR.Client/server.Hubs";
-import { getHubProxyFactory, getReceiverRegister } from "@/TypedSignalR.Client";
+import {
-import { ProgressStatus } from "@/server.Hubs";
+  getHubProxyFactory,
+  getReceiverRegister,
+} from "@/utils/signalR/TypedSignalR.Client";
+import { ProgressStatus } from "@/utils/signalR/server.Hubs";
 import { useRequiredInjection } from "@/utils/Common";
 import { useAlertStore } from "./Alert";
 

src/stores/equipments.ts

@@ -10,9 +10,12 @@ import { useDialogStore } from "./dialog";
 import { toFileParameterOrUndefined } from "@/utils/Common";
 import { AuthManager } from "@/utils/AuthManager";
 import { HubConnection, HubConnectionBuilder } from "@microsoft/signalr";
-import { getHubProxyFactory, getReceiverRegister } from "@/TypedSignalR.Client";
+import {
+  getHubProxyFactory,
+  getReceiverRegister,
+} from "@/utils/signalR/TypedSignalR.Client";
 import type { ResourceInfo } from "@/APIClient";
-import type { IJtagHub } from "@/TypedSignalR.Client/server.Hubs";
+import type { IJtagHub } from "@/utils/signalR/TypedSignalR.Client/server.Hubs";
 
 export const useEquipments = defineStore("equipments", () => {
   // Global Stores

src/views/Project/VideoStream.vue

@@ -8,20 +8,31 @@
           控制面板
         </h2>
 
-        <div class="grid grid-cols-1  gap-4"
+        <div
-          :class="{ 'md:grid-cols-3': streamType === 'usbCamera', 'md:grid-cols-4': streamType === 'videoStream' }">
+          class="grid grid-cols-1 gap-4"
+          :class="{
+            'md:grid-cols-3': streamType === 'usbCamera',
+            'md:grid-cols-4': streamType === 'videoStream',
+          }"
+        >
           <!-- 服务状态 -->
           <div class="stats shadow">
             <div class="stat bg-base-100">
               <div class="stat-figure text-primary">
-                <div class="badge" :class="statusInfo.isRunning ? 'badge-success' : 'badge-error'
+                <div
-                  ">
+                  class="badge"
-                  {{ statusInfo.isRunning ? "运行中" : "已停止" }}
+                  :class="
+                    videoStreamInfo.isRunning ? 'badge-success' : 'badge-error'
+                  "
+                >
+                  {{ videoStreamInfo.isRunning ? "运行中" : "已停止" }}
                 </div>
               </div>
               <div class="stat-title">服务状态</div>
               <div class="stat-value text-primary">HTTP</div>
-              <div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
+              <div class="stat-desc">
+                端口: {{ videoStreamInfo.serverPort }}
+              </div>
             </div>
           </div>
 
@@ -33,9 +44,11 @@
               </div>
               <div class="stat-title">视频规格</div>
               <div class="stat-value text-secondary">
-                {{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
+                {{ videoStreamInfo.frameWidth }}×{{
+                  videoStreamInfo.frameHeight
+                }}
               </div>
-              <div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
+              <div class="stat-desc">{{ videoStreamInfo.frameRate }} FPS</div>
             </div>
           </div>
 
@@ -47,17 +60,31 @@
               </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"
+                <select
-                  @change="changeResolution" :disabled="changingResolution">
+                  class="select select-sm select-bordered max-w-xs"
-                  <option v-for="res in supportedResolutions" :key="`${res.width}x${res.height}`" :value="res">
+                  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"
+                <button
-                  :disabled="loadingResolutions">
+                  class="btn btn-xs btn-outline btn-info mt-1"
-                  <RefreshCw v-if="loadingResolutions" class="animate-spin h-3 w-3" />
+                  @click="refreshResolutions"
+                  :disabled="loadingResolutions"
+                >
+                  <RefreshCw
+                    v-if="loadingResolutions"
+                    class="animate-spin h-3 w-3"
+                  />
                   {{ loadingResolutions ? "刷新中..." : "刷新" }}
                 </button>
               </div>
@@ -72,22 +99,34 @@
               </div>
               <div class="stat-title">连接数</div>
               <div class="stat-value text-accent">
-                {{ statusInfo.connectedClients }}
+                {{ videoStreamInfo.connectedClients }}
               </div>
               <div class="stat-desc">
                 <div class="dropdown dropdown-hover dropdown-top">
-                  <div tabindex="0" role="button" class="text-xs underline cursor-help">
+                  <div
+                    tabindex="0"
+                    role="button"
+                    class="text-xs underline cursor-help"
+                  >
                     查看客户端
                   </div>
-                  <ul tabindex="0"
+                  <ul
-                    class="dropdown-content z-20 menu p-2 shadow bg-base-200 rounded-box w-64 max-h-48 overflow-y-auto">
+                    tabindex="0"
-                    <li v-for="(client, index) in statusInfo.clientEndpoints" :key="index" class="text-xs">
+                    class="dropdown-content z-20 menu p-2 shadow bg-base-200 rounded-box w-64 max-h-48 overflow-y-auto"
+                  >
+                    <li
+                      v-for="(client, index) in videoStreamInfo.clientEndpoints"
+                      :key="index"
+                      class="text-xs"
+                    >
                       <a class="break-all">{{ client }}</a>
                     </li>
-                    <li v-if="
+                    <li
-                      !statusInfo.clientEndpoints ||
+                      v-if="
-                      statusInfo.clientEndpoints.length === 0
+                        !videoStreamInfo.clientEndpoints ||
-                    ">
+                        videoStreamInfo.clientEndpoints.length === 0
+                      "
+                    >
                       <a class="text-xs opacity-50">无活跃连接</a>
                     </li>
                   </ul>
@@ -99,21 +138,41 @@
 
         <!-- 操作按钮 -->
         <div class="card-actions justify-end mt-4">
-          <button class="btn btn-outline btn-warning mr-2" @click="toggleStreamType" :disabled="isSwitchingStreamType">
+          <button
+            class="btn btn-outline btn-warning mr-2"
+            @click="toggleStreamType"
+            :disabled="isSwitchingStreamType"
+          >
             <SwitchCamera class="h-4 w-4 mr-2" />
-            {{ streamType === 'usbCamera' ? '切换到视频流' : '切换到USB摄像头' }}
+            {{
+              streamType === "usbCamera" ? "切换到视频流" : "切换到USB摄像头"
+            }}
           </button>
-          <button v-show="streamType === 'videoStream'" class="btn btn-outline btn-primary" @click="configCamera" :disabled="configing">
+          <button
+            v-show="streamType === 'videoStream'"
+            class="btn btn-outline btn-primary"
+            @click="configCamera"
+            :disabled="configing"
+          >
             <RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
             <CogIcon v-else class="h-4 w-4 mr-2" />
             {{ configing ? "配置中..." : "配置摄像头" }}
           </button>
-          <button class="btn btn-outline btn-primary" @click="refreshStatus" :disabled="loading">
+          <button
+            class="btn btn-outline btn-primary"
+            @click="refreshStatus"
+            :disabled="loading"
+          >
             <RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
             <RefreshCw v-else class="h-4 w-4 mr-2" />
             {{ loading ? "刷新中..." : "刷新状态" }}
           </button>
-          <button v-show="streamType === 'videoStream'" class="btn btn-primary" @click="testConnection" :disabled="testing">
+          <button
+            v-show="streamType === 'videoStream'"
+            class="btn btn-primary"
+            @click="testConnection"
+            :disabled="testing"
+          >
             <RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
             <TestTube v-else class="h-4 w-4 mr-2" />
             {{ testing ? "测试中..." : "测试连接" }}
@@ -130,24 +189,42 @@
           视频预览
         </h2>
 
-        <div class="relative bg-black rounded-lg overflow-hidden cursor-pointer" :class="[
+        <div
+          class="relative bg-black rounded-lg overflow-hidden cursor-pointer"
+          :class="[
             focusAnimationClass,
-          { 'cursor-not-allowed': !isPlaying || hasVideoError }
+            { 'cursor-not-allowed': !isPlaying || hasVideoError },
-        ]" style="aspect-ratio: 4/3" @click="handleVideoClick">
+          ]"
+          style="aspect-ratio: 4/3"
+          @click="handleVideoClick"
+        >
           <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
-          <div v-show="isPlaying" class="w-full h-full flex items-center justify-center">
+          <div
-            <img :src="currentVideoSource" alt="视频流" class="max-w-full max-h-full object-contain"
+            v-show="isPlaying"
-              @error="handleVideoError" @load="handleVideoLoad" />
+            class="w-full h-full flex items-center justify-center"
+          >
+            <img
+              :src="currentVideoSource"
+              alt="视频流"
+              class="max-w-full max-h-full object-contain"
+              @error="handleVideoError"
+              @load="handleVideoLoad"
+            />
           </div>
 
           <!-- 对焦提示 -->
-          <div v-if="isPlaying && !hasVideoError"
+          <div
-            class="absolute top-4 right-4 text-white text-sm bg-black bg-opacity-50 px-2 py-1 rounded">
+            v-if="isPlaying && !hasVideoError"
-            {{ isFocusing ? '对焦中...' : '点击画面对焦' }}
+            class="absolute top-4 right-4 text-white text-sm bg-black bg-opacity-50 px-2 py-1 rounded"
+          >
+            {{ isFocusing ? "对焦中..." : "点击画面对焦" }}
           </div>
 
           <!-- 错误信息显示 -->
-          <div v-if="hasVideoError" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70">
+          <div
+            v-if="hasVideoError"
+            class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
+          >
             <div class="card bg-error text-white shadow-lg w-full max-w-lg">
               <div class="card-body">
                 <h3 class="card-title flex items-center gap-2">
@@ -158,10 +235,13 @@
                 <ul class="list-disc list-inside">
                   <li>视频流服务是否已启动</li>
                   <li>网络连接是否正常</li>
-                  <li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
+                  <li>端口 {{ videoStreamInfo.serverPort }} 是否可访问</li>
                 </ul>
                 <div class="card-actions justify-end mt-2">
-                  <button class="btn btn-sm btn-outline btn-primary" @click="tryReconnect">
+                  <button
+                    class="btn btn-sm btn-outline btn-primary"
+                    @click="tryReconnect"
+                  >
                     重试连接
                   </button>
                 </div>
@@ -170,8 +250,10 @@
           </div>
 
           <!-- 占位符 -->
-          <div v-show="!isPlaying && !hasVideoError"
+          <div
-            class="absolute inset-0 flex items-center justify-center text-white">
+            v-show="!isPlaying && !hasVideoError"
+            class="absolute inset-0 flex items-center justify-center text-white"
+          >
             <div class="text-center">
               <Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
               <p class="text-lg opacity-75">{{ videoStatus }}</p>
@@ -187,18 +269,25 @@
           <div class="text-sm text-base-content/70">
             流地址:
             <code class="bg-base-300 px-2 py-1 rounded">{{
-              streamInfo.mjpegUrl
+              videoStreamInfo.mjpegUrl
             }}</code>
           </div>
           <div class="space-x-2">
             <div class="dropdown dropdown-hover dropdown-top dropdown-end">
-              <div tabindex="0" role="button" class="btn btn-sm btn-outline btn-accent">
+              <div
+                tabindex="0"
+                role="button"
+                class="btn btn-sm btn-outline btn-accent"
+              >
                 <MoreHorizontal class="w-4 h-4 mr-1" />
                 更多功能
               </div>
-              <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
+              <ul
+                tabindex="0"
+                class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
+              >
                 <li>
-                  <a @click="openInNewTab(streamInfo.htmlUrl)">
+                  <a @click="openInNewTab(videoStreamInfo.htmlUrl)">
                     <ExternalLink class="w-4 h-4" />
                     在新标签打开视频页面
                   </a>
@@ -210,18 +299,26 @@
                   </a>
                 </li>
                 <li>
-                  <a @click="copyToClipboard(streamInfo.mjpegUrl)">
+                  <a @click="copyToClipboard(videoStreamInfo.mjpegUrl)">
                     <Copy class="w-4 h-4" />
                     复制MJPEG地址
                   </a>
                 </li>
               </ul>
             </div>
-            <button class="btn btn-success btn-sm" @click="startStream" :disabled="isPlaying">
+            <button
+              class="btn btn-success btn-sm"
+              @click="startStream"
+              :disabled="isPlaying"
+            >
               <Play class="w-4 h-4 mr-1" />
               播放视频流
             </button>
-            <button class="btn btn-error btn-sm" @click="stopStream" :disabled="!isPlaying">
+            <button
+              class="btn btn-error btn-sm"
+              @click="stopStream"
+              :disabled="!isPlaying"
+            >
               <Square class="w-4 h-4 mr-1" />
               停止视频流
             </button>
@@ -239,11 +336,20 @@
         </h2>
 
         <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
-          <div v-for="(log, index) in logs" :key="index" class="text-sm font-mono mb-1">
+          <div
-            <span class="text-base-content/50">[{{ formatTime(log.time) }}]</span>
+            v-for="(log, index) in logs"
+            :key="index"
+            class="text-sm font-mono mb-1"
+          >
+            <span class="text-base-content/50"
+              >[{{ formatTime(log.time) }}]</span
+            >
             <span :class="getLogClass(log.level)">{{ log.message }}</span>
           </div>
-          <div v-if="logs.length === 0" class="text-base-content/50 text-center py-8">
+          <div
+            v-if="logs.length === 0"
+            class="text-base-content/50 text-center py-8"
+          >
             暂无日志记录
           </div>
         </div>
@@ -277,8 +383,9 @@ import {
   MoreHorizontal,
   SwitchCamera,
 } from "lucide-vue-next";
-import { VideoStreamClient, CameraConfigRequest, ResolutionConfigRequest, StreamInfoResult } from "@/APIClient";
+import { VideoStreamClient, ResolutionConfigRequest } from "@/APIClient";
 import { useEquipments } from "@/stores/equipments";
+import { AuthManager } from "@/utils/AuthManager";
 
 const eqps = useEquipments();
 
@@ -291,12 +398,12 @@ const hasVideoError = ref(false);
 const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频');
 
 // 视频流类型切换相关
-const streamType = ref<'usbCamera' | 'videoStream'>('videoStream');
+const streamType = ref<"usbCamera" | "videoStream">("videoStream");
 const isSwitchingStreamType = ref(false);
 
 // 对焦相关状态
 const isFocusing = ref(false);
-const focusAnimationClass = ref('');
+const focusAnimationClass = ref("");
 
 // 分辨率相关状态
 const changingResolution = ref(false);
@@ -304,36 +411,29 @@ const loadingResolutions = ref(false);
 const selectedResolution = ref({ width: 640, height: 480 });
 const supportedResolutions = ref([
   { width: 640, height: 480 },
-  { width: 1280, height: 720 }
+  { width: 1280, height: 720 },
 ]);
 
 // 数据
-const statusInfo = ref({
+const videoStreamInfo = ref({
+  frameWidth: 640,
+  frameHeight: 480,
+  frameRate: 30,
   isRunning: false,
   serverPort: 8080,
-  streamUrl: "",
   mjpegUrl: "",
   snapshotUrl: "",
+  htmlUrl: "",
+  usbCameraUrl: "",
   connectedClients: 0,
   clientEndpoints: [] as string[],
 });
 
-const streamInfo = ref<StreamInfoResult>(new StreamInfoResult({
-  frameRate: 30,
-  frameWidth: 640,
-  frameHeight: 480,
-  format: "MJPEG",
-  htmlUrl: "",
-  mjpegUrl: "",
-  snapshotUrl: "",
-  usbCameraUrl: "",
-}));
-
 const currentVideoSource = ref("");
 const logs = ref<Array<{ time: Date; level: string; message: string }>>([]);
 
 // API 客户端
-const videoClient = new VideoStreamClient();
+const videoClient = AuthManager.createAuthenticatedVideoStreamClient();
 
 // 添加日志
 const addLog = (level: string, message: string) => {
@@ -397,16 +497,23 @@ const toggleStreamType = async () => {
   isSwitchingStreamType.value = true;
   try {
     // 这里假设后端有API: setStreamType(type: string)
-    addLog('info', `正在切换视频流类型到${streamType.value === 'usbCamera' ? '视频流' : 'USB摄像头'}...`);
+    addLog(
+      "info",
+      `正在切换视频流类型到${streamType.value === "usbCamera" ? "视频流" : "USB摄像头"}...`,
+    );
     refreshStatus();
 
     // 设置视频源
-    streamType.value = streamType.value === 'usbCamera' ? 'videoStream' : 'usbCamera';
+    streamType.value =
-    addLog('success', `已切换到${streamType.value === 'usbCamera' ? 'USB摄像头' : '视频流'}`);
+      streamType.value === "usbCamera" ? "videoStream" : "usbCamera";
+    addLog(
+      "success",
+      `已切换到${streamType.value === "usbCamera" ? "USB摄像头" : "视频流"}`,
+    );
     stopStream();
   } catch (error) {
-    addLog('error', `切换视频流类型失败: ${error}`);
+    addLog("error", `切换视频流类型失败: ${error}`);
-    console.error('切换视频流类型失败:', error);
+    console.error("切换视频流类型失败:", error);
   } finally {
     isSwitchingStreamType.value = false;
   }
@@ -418,7 +525,7 @@ const takeSnapshot = async () => {
     addLog("info", "正在获取快照...");
 
     // 使用当前的快照URL
-    const snapshotUrl = streamInfo.value.snapshotUrl;
+    const snapshotUrl = videoStreamInfo.value.snapshotUrl;
     if (!snapshotUrl) {
       addLog("error", "快照URL不可用");
       return;
@@ -446,17 +553,14 @@ async function configCamera() {
   configing.value = true;
   try {
     addLog("info", "正在配置并初始化摄像头...");
-    const boardconfig = new CameraConfigRequest({
+    await videoClient.configureCamera();
-      address: eqps.boardAddr,
-      port: eqps.boardPort,
-    });
-    await videoClient.configureCamera(boardconfig);
 
-    const status = await videoClient.getCameraConfig();
+    const ret = await videoClient.testConnection();
-    if (status.isConfigured) {
+
+    if (ret) {
       addLog("success", "摄像头已配置并初始化");
     } else {
-      addLog("error", "摄像头配置失败，请检查地址和端口");
+      addLog("error", "摄像头配置失败");
     }
   } catch (error) {
     addLog("error", `摄像头配置失败: ${error}`);
@@ -473,11 +577,23 @@ const refreshStatus = async () => {
     addLog("info", "正在获取服务状态...");
 
     // 使用新的API方法名称
-    const status = await videoClient.getStatus();
+    const serviceStatus = await videoClient.getServiceStatus();
-    statusInfo.value = status;
+    const endpointInfo = await videoClient.myEndpoint();
-
+    videoStreamInfo.value = {
-    const info = await videoClient.getStreamInfo();
+      frameWidth: endpointInfo.frameWidth,
-    streamInfo.value = info;
+      frameHeight: endpointInfo.frameHeight,
+      frameRate: endpointInfo.frameRate,
+      isRunning: serviceStatus.isRunning,
+      serverPort: serviceStatus.serverPort,
+      mjpegUrl: endpointInfo.mjpegUrl,
+      snapshotUrl: endpointInfo.snapshotUrl,
+      htmlUrl: endpointInfo.htmlUrl,
+      usbCameraUrl: endpointInfo.usbCameraUrl,
+      connectedClients: serviceStatus.connectedClientsNum,
+      clientEndpoints: serviceStatus.clientEndpoints.map(
+        (ep) => `${ep.boardId}`,
+      ),
+    };
 
     addLog("success", "服务状态获取成功");
   } catch (error) {
@@ -527,9 +643,6 @@ const handleVideoLoad = () => {
 const tryReconnect = () => {
   addLog("info", "尝试重新连接视频流...");
   hasVideoError.value = false;
-
-  // 重新设置视频源，添加时间戳避免缓存问题
-  currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`;
 };
 
 // 执行对焦
@@ -538,41 +651,41 @@ const performFocus = async () => {
 
   try {
     isFocusing.value = true;
-    focusAnimationClass.value = 'focus-starting';
+    focusAnimationClass.value = "focus-starting";
     addLog("info", "正在执行自动对焦...");
 
     // 调用对焦API
-    const response = await fetch('/api/VideoStream/Focus');
+    const response = await fetch("/api/VideoStream/Focus");
     const result = await response.json();
 
     if (result.success) {
       // 对焦成功动画
-      focusAnimationClass.value = 'focus-success';
+      focusAnimationClass.value = "focus-success";
       addLog("success", "自动对焦执行成功");
 
       // 2秒后消失
       setTimeout(() => {
-        focusAnimationClass.value = '';
+        focusAnimationClass.value = "";
       }, 2000);
     } else {
       // 对焦失败动画
-      focusAnimationClass.value = 'focus-error';
+      focusAnimationClass.value = "focus-error";
-      addLog("error", `自动对焦执行失败: ${result.message || '未知错误'}`);
+      addLog("error", `自动对焦执行失败: ${result.message || "未知错误"}`);
 
       // 2秒后消失
       setTimeout(() => {
-        focusAnimationClass.value = '';
+        focusAnimationClass.value = "";
       }, 2000);
     }
   } catch (error) {
     // 对焦失败动画
-    focusAnimationClass.value = 'focus-error';
+    focusAnimationClass.value = "focus-error";
     addLog("error", `自动对焦执行失败: ${error}`);
     console.error("自动对焦执行失败:", error);
 
     // 2秒后消失
     setTimeout(() => {
-      focusAnimationClass.value = '';
+      focusAnimationClass.value = "";
     }, 2000);
   } finally {
     // 1秒后重置对焦状态
@@ -598,13 +711,16 @@ const startStream = async () => {
   try {
     addLog("info", "正在启动视频流...");
     videoStatus.value = "正在连接视频流...";
-    videoClient.setEnabled(true);
+    videoClient.setVideoStreamEnable(true);
 
     // 刷新状态
     await refreshStatus();
 
     // 设置视频源
-    currentVideoSource.value = streamType.value === 'usbCamera' ? streamInfo.value.usbCameraUrl : streamInfo.value.mjpegUrl;
+    currentVideoSource.value =
+      streamType.value === "usbCamera"
+        ? videoStreamInfo.value.usbCameraUrl
+        : videoStreamInfo.value.mjpegUrl;
 
     // 设置播放状态
     isPlaying.value = true;
@@ -625,12 +741,18 @@ const refreshResolutions = async () => {
   try {
     addLog("info", "正在获取支持的分辨率列表...");
     const resolutions = await videoClient.getSupportedResolutions();
-    supportedResolutions.value = resolutions.resolutions;
+    supportedResolutions.value = resolutions.map((resolution) => ({
+      width: resolution.width,
+      height: resolution.height,
+    }));
     console.log("支持的分辨率列表:", supportedResolutions.value);
 
     // 获取当前分辨率
-    const currentRes = await videoClient.getCurrentResolution();
+    const endpointInfo = await videoClient.myEndpoint();
-    selectedResolution.value = currentRes;
+    selectedResolution.value = {
+      width: endpointInfo.frameWidth,
+      height: endpointInfo.frameHeight,
+    };
 
     addLog("success", "分辨率列表获取成功");
   } catch (error) {
@@ -649,18 +771,21 @@ const changeResolution = async () => {
   const wasPlaying = isPlaying.value;
 
   try {
-    addLog("info", `正在切换分辨率到 ${selectedResolution.value.width}×${selectedResolution.value.height}...`);
+    addLog(
+      "info",
+      `正在切换分辨率到 ${selectedResolution.value.width}×${selectedResolution.value.height}...`,
+    );
 
     // 如果正在播放，先停止视频流
     if (wasPlaying) {
       stopStream();
-      await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // 等待1秒
     }
 
     // 设置新分辨率
     const resolutionRequest = new ResolutionConfigRequest({
       width: selectedResolution.value.width,
-      height: selectedResolution.value.height
+      height: selectedResolution.value.height,
     });
     const success = await videoClient.setResolution(resolutionRequest);
 
@@ -670,11 +795,14 @@ const changeResolution = async () => {
 
       // 如果之前在播放，重新启动视频流
       if (wasPlaying) {
-        await new Promise(resolve => setTimeout(resolve, 500)); // 短暂延迟
+        await new Promise((resolve) => setTimeout(resolve, 500)); // 短暂延迟
         await startStream();
       }
 
-      addLog("success", `分辨率已切换到 ${selectedResolution.value.width}×${selectedResolution.value.height}`);
+      addLog(
+        "success",
+        `分辨率已切换到 ${selectedResolution.value.width}×${selectedResolution.value.height}`,
+      );
     } else {
       addLog("error", "分辨率切换失败");
     }
@@ -690,7 +818,7 @@ const changeResolution = async () => {
 const stopStream = () => {
   try {
     addLog("info", "正在停止视频流...");
-    videoClient.setEnabled(false);
+    videoClient.setVideoStreamEnable(false);
 
     // 清除视频源
     currentVideoSource.value = "";