feat: 支持实际摄像头视频流
This commit is contained in:
parent
178ac0de67
commit
e84a784517
|
|
@ -1,8 +1,9 @@
|
|||
using Microsoft.AspNetCore.Cors;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using System.ComponentModel.DataAnnotations;
|
||||
|
||||
/// <summary>
|
||||
/// [TODO:description]
|
||||
/// 视频流控制器，支持动态配置摄像头连接
|
||||
/// </summary>
|
||||
[ApiController]
|
||||
[Route("api/[controller]")]
|
||||
|
|
@ -11,6 +12,20 @@ public class VideoStreamController : ControllerBase
|
|||
private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
|
||||
private readonly server.Services.HttpVideoStreamService _videoStreamService;
|
||||
|
||||
/// <summary>
|
||||
/// 摄像头配置请求模型
|
||||
/// </summary>
|
||||
public class CameraConfigRequest
|
||||
{
|
||||
[Required]
|
||||
[RegularExpression(@"^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$", ErrorMessage = "请输入有效的IP地址")]
|
||||
public string Address { get; set; } = "";
|
||||
|
||||
[Required]
|
||||
[Range(1, 65535, ErrorMessage = "端口必须在1-65535范围内")]
|
||||
public int Port { get; set; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 初始化HTTP视频流控制器
|
||||
/// </summary>
|
||||
|
|
@ -47,12 +62,14 @@ public class VideoStreamController : ControllerBase
|
|||
mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
|
||||
snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
|
||||
connectedClients = _videoStreamService.ConnectedClientsCount,
|
||||
clientEndpoints = _videoStreamService.GetConnectedClientEndpoints()
|
||||
clientEndpoints = _videoStreamService.GetConnectedClientEndpoints(),
|
||||
cameraStatus = _videoStreamService.GetCameraStatus()
|
||||
});
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "获取 HTTP 视频流服务状态失败"); return TypedResults.InternalServerError(ex.Message);
|
||||
logger.Error(ex, "获取 HTTP 视频流服务状态失败");
|
||||
return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,12 +94,123 @@ public class VideoStreamController : ControllerBase
|
|||
format = "MJPEG",
|
||||
htmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
|
||||
mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
|
||||
snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot"
|
||||
snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
|
||||
cameraAddress = _videoStreamService.CameraAddress,
|
||||
cameraPort = _videoStreamService.CameraPort
|
||||
});
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "获取 HTTP 视频流信息失败"); return TypedResults.InternalServerError(ex.Message);
|
||||
logger.Error(ex, "获取 HTTP 视频流信息失败");
|
||||
return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 配置摄像头连接参数
|
||||
/// </summary>
|
||||
/// <param name="config">摄像头配置</param>
|
||||
/// <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([FromBody] CameraConfigRequest config)
|
||||
{
|
||||
try
|
||||
{
|
||||
logger.Info("配置摄像头连接: {Address}:{Port}", config.Address, config.Port);
|
||||
|
||||
var success = await _videoStreamService.ConfigureCameraAsync(config.Address, config.Port);
|
||||
|
||||
if (success)
|
||||
{
|
||||
return TypedResults.Ok(new
|
||||
{
|
||||
success = true,
|
||||
message = "摄像头配置成功",
|
||||
cameraAddress = config.Address,
|
||||
cameraPort = config.Port
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
return TypedResults.BadRequest(new
|
||||
{
|
||||
success = false,
|
||||
message = "摄像头配置失败",
|
||||
cameraAddress = config.Address,
|
||||
cameraPort = config.Port
|
||||
});
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "配置摄像头连接失败");
|
||||
return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取当前摄像头配置
|
||||
/// </summary>
|
||||
/// <returns>摄像头配置信息</returns>
|
||||
[HttpGet("CameraConfig")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
|
||||
public IResult GetCameraConfig()
|
||||
{
|
||||
try
|
||||
{
|
||||
logger.Info("获取摄像头配置");
|
||||
var cameraStatus = _videoStreamService.GetCameraStatus();
|
||||
|
||||
return TypedResults.Ok(new
|
||||
{
|
||||
address = _videoStreamService.CameraAddress,
|
||||
port = _videoStreamService.CameraPort,
|
||||
isConfigured = cameraStatus.GetType().GetProperty("IsConfigured")?.GetValue(cameraStatus),
|
||||
connectionString = $"{_videoStreamService.CameraAddress}:{_videoStreamService.CameraPort}"
|
||||
});
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "获取摄像头配置失败");
|
||||
return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 测试摄像头连接
|
||||
/// </summary>
|
||||
/// <returns>连接测试结果</returns>
|
||||
[HttpPost("TestCameraConnection")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
|
||||
public async Task<IResult> TestCameraConnection()
|
||||
{
|
||||
try
|
||||
{
|
||||
logger.Info("测试摄像头连接");
|
||||
|
||||
var (isSuccess, message) = await _videoStreamService.TestCameraConnectionAsync();
|
||||
|
||||
return TypedResults.Ok(new
|
||||
{
|
||||
success = isSuccess,
|
||||
message = message,
|
||||
cameraAddress = _videoStreamService.CameraAddress,
|
||||
cameraPort = _videoStreamService.CameraPort,
|
||||
timestamp = DateTime.Now
|
||||
});
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "测试摄像头连接失败");
|
||||
return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
using System.Net;
|
||||
using System.Text;
|
||||
using SixLabors.ImageSharp;
|
||||
using SixLabors.ImageSharp.Formats.Jpeg;
|
||||
using SixLabors.ImageSharp.PixelFormats;
|
||||
using Peripherals.CameraClient; // 添加摄像头客户端引用
|
||||
|
||||
namespace server.Services;
|
||||
|
||||
/// <summary>
|
||||
/// HTTP 视频流服务，用于从 FPGA 获取图像数据并推送到前端网页
|
||||
/// 简化版本实现，先建立基础框架
|
||||
/// 支持动态配置摄像头地址和端口
|
||||
/// </summary>
|
||||
public class HttpVideoStreamService : BackgroundService
|
||||
{
|
||||
|
|
@ -22,8 +19,9 @@ public class HttpVideoStreamService : BackgroundService
|
|||
|
||||
// 摄像头客户端
|
||||
private Camera? _camera;
|
||||
private readonly string _cameraAddress = "192.168.1.100"; // 根据实际FPGA地址配置
|
||||
private readonly int _cameraPort = 8888; // 根据实际端口配置
|
||||
private string _cameraAddress = "192.168.1.100"; // 默认FPGA地址
|
||||
private int _cameraPort = 8888; // 默认端口
|
||||
private readonly object _cameraLock = new object();
|
||||
|
||||
// 模拟 FPGA 图像数据
|
||||
private int _frameCounter = 0;
|
||||
|
|
@ -33,16 +31,7 @@ public class HttpVideoStreamService : BackgroundService
|
|||
/// <summary>
|
||||
/// 获取当前连接的客户端数量
|
||||
/// </summary>
|
||||
public int ConnectedClientsCount
|
||||
{
|
||||
get
|
||||
{
|
||||
lock (_clientsLock)
|
||||
{
|
||||
return _activeClients.Count;
|
||||
}
|
||||
}
|
||||
}
|
||||
public int ConnectedClientsCount { get { return _activeClients.Count; } }
|
||||
|
||||
/// <summary>
|
||||
/// 获取服务端口
|
||||
|
|
@ -64,13 +53,141 @@ public class HttpVideoStreamService : BackgroundService
|
|||
/// </summary>
|
||||
public int FrameRate => _frameRate;
|
||||
|
||||
/// <summary>
|
||||
/// 获取当前摄像头地址
|
||||
/// </summary>
|
||||
public string CameraAddress { get { return _cameraAddress; } }
|
||||
|
||||
/// <summary>
|
||||
/// 获取当前摄像头端口
|
||||
/// </summary>
|
||||
public int CameraPort { get { return _cameraPort; } }
|
||||
|
||||
/// <summary>
|
||||
/// 初始化 HttpVideoStreamService
|
||||
/// </summary>
|
||||
public HttpVideoStreamService()
|
||||
{
|
||||
// 初始化摄像头客户端
|
||||
_camera = new Camera(_cameraAddress, _cameraPort);
|
||||
// 延迟初始化摄像头客户端，直到配置完成
|
||||
logger.Info("HttpVideoStreamService 初始化完成，默认摄像头地址: {Address}:{Port}", _cameraAddress, _cameraPort);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 配置摄像头连接参数
|
||||
/// </summary>
|
||||
/// <param name="address">摄像头IP地址</param>
|
||||
/// <param name="port">摄像头端口</param>
|
||||
/// <returns>配置是否成功</returns>
|
||||
public async Task<bool> ConfigureCameraAsync(string address, int port)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(address))
|
||||
{
|
||||
logger.Error("摄像头地址不能为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (port <= 0 || port > 65535)
|
||||
{
|
||||
logger.Error("摄像头端口必须在1-65535范围内");
|
||||
return false;
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
await Task.Run(() =>
|
||||
{
|
||||
lock (_cameraLock)
|
||||
{
|
||||
// 如果地址和端口没有变化，直接返回成功
|
||||
if (_cameraAddress == address && _cameraPort == port && _camera != null)
|
||||
{
|
||||
logger.Info("摄像头配置未变化，保持当前连接");
|
||||
return;
|
||||
}
|
||||
|
||||
// 关闭现有连接
|
||||
if (_camera != null)
|
||||
{
|
||||
logger.Info("关闭现有摄像头连接");
|
||||
// Camera doesn't have Dispose method, set to null
|
||||
_camera = null;
|
||||
}
|
||||
|
||||
// 更新配置
|
||||
_cameraAddress = address;
|
||||
_cameraPort = port;
|
||||
|
||||
// 创建新的摄像头客户端
|
||||
_camera = new Camera(_cameraAddress, _cameraPort);
|
||||
|
||||
logger.Info("摄像头配置已更新: {Address}:{Port}", _cameraAddress, _cameraPort);
|
||||
}
|
||||
});
|
||||
return true;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "配置摄像头连接时发生错误");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 测试摄像头连接
|
||||
/// </summary>
|
||||
/// <returns>连接测试结果</returns>
|
||||
public async Task<(bool IsSuccess, string Message)> TestCameraConnectionAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
Camera? testCamera = null;
|
||||
|
||||
lock (_cameraLock)
|
||||
{
|
||||
if (_camera == null)
|
||||
{
|
||||
return (false, "摄像头未配置");
|
||||
}
|
||||
testCamera = _camera;
|
||||
}
|
||||
|
||||
// 尝试读取一帧数据来测试连接
|
||||
var result = await testCamera.ReadFrame();
|
||||
|
||||
if (result.IsSuccessful)
|
||||
{
|
||||
logger.Info("摄像头连接测试成功: {Address}:{Port}", _cameraAddress, _cameraPort);
|
||||
return (true, "连接成功");
|
||||
}
|
||||
else
|
||||
{
|
||||
logger.Warn("摄像头连接测试失败: {Error}", result.Error);
|
||||
return (false, result.Error.ToString());
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "摄像头连接测试出错");
|
||||
return (false, ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取摄像头连接状态
|
||||
/// </summary>
|
||||
/// <returns>连接状态信息</returns>
|
||||
public object GetCameraStatus()
|
||||
{
|
||||
lock (_cameraLock)
|
||||
{
|
||||
return new
|
||||
{
|
||||
Address = _cameraAddress,
|
||||
Port = _cameraPort,
|
||||
IsConfigured = _camera != null,
|
||||
ConnectionString = $"{_cameraAddress}:{_cameraPort}"
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
|
@ -83,6 +200,10 @@ public class HttpVideoStreamService : BackgroundService
|
|||
try
|
||||
{
|
||||
logger.Info("启动 HTTP 视频流服务，端口: {Port}", _serverPort);
|
||||
|
||||
// 初始化默认摄像头连接
|
||||
await ConfigureCameraAsync(_cameraAddress, _cameraPort);
|
||||
|
||||
// 创建 HTTP 监听器
|
||||
_httpListener = new HttpListener();
|
||||
_httpListener.Prefixes.Add($"http://localhost:{_serverPort}/");
|
||||
|
|
@ -220,7 +341,18 @@ public class HttpVideoStreamService : BackgroundService
|
|||
{
|
||||
// 获取当前帧
|
||||
var imageData = await GetFPGAImageData();
|
||||
var jpegData = ConvertToJpeg(imageData);
|
||||
|
||||
// 直接使用Common.Image.ConvertRGB24ToJpeg进行转换
|
||||
var jpegResult = Common.Image.ConvertRGB24ToJpeg(imageData, _frameWidth, _frameHeight, 80);
|
||||
if (!jpegResult.IsSuccessful)
|
||||
{
|
||||
logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
|
||||
response.StatusCode = 500;
|
||||
response.Close();
|
||||
return;
|
||||
}
|
||||
|
||||
var jpegData = jpegResult.Value;
|
||||
|
||||
// 设置响应头
|
||||
response.ContentType = "image/jpeg";
|
||||
|
|
@ -338,11 +470,8 @@ public class HttpVideoStreamService : BackgroundService
|
|||
// 从 FPGA 获取图像数据（模拟）
|
||||
var imageData = await GetFPGAImageData();
|
||||
|
||||
// 将图像数据转换为 JPEG
|
||||
var jpegData = ConvertToJpeg(imageData);
|
||||
|
||||
// 向所有连接的客户端发送帧
|
||||
await BroadcastFrameAsync(jpegData, cancellationToken);
|
||||
await BroadcastFrameAsync(imageData, cancellationToken);
|
||||
|
||||
_frameCounter++;
|
||||
|
||||
|
|
@ -367,7 +496,14 @@ public class HttpVideoStreamService : BackgroundService
|
|||
/// </summary>
|
||||
private async Task<byte[]> GetFPGAImageData()
|
||||
{
|
||||
if (_camera == null)
|
||||
Camera? currentCamera = null;
|
||||
|
||||
lock (_cameraLock)
|
||||
{
|
||||
currentCamera = _camera;
|
||||
}
|
||||
|
||||
if (currentCamera == null)
|
||||
{
|
||||
logger.Error("摄像头客户端未初始化");
|
||||
return new byte[0];
|
||||
|
|
@ -376,7 +512,7 @@ public class HttpVideoStreamService : BackgroundService
|
|||
try
|
||||
{
|
||||
// 从摄像头读取帧数据
|
||||
var result = await _camera.ReadFrame();
|
||||
var result = await currentCamera.ReadFrame();
|
||||
|
||||
if (!result.IsSuccessful)
|
||||
{
|
||||
|
|
@ -416,18 +552,6 @@ public class HttpVideoStreamService : BackgroundService
|
|||
}
|
||||
}
|
||||
|
||||
private async Task<byte[]> ConvertToJpeg(byte[] rgbData)
|
||||
{
|
||||
var jpegResult = Common.Image.ConvertRGB24ToJpeg(rgbData, _frameWidth, _frameHeight, 80);
|
||||
if (!jpegResult.IsSuccessful)
|
||||
{
|
||||
logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
|
||||
return new byte[0];
|
||||
}
|
||||
|
||||
return jpegResult.Value;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 向所有连接的客户端广播帧数据
|
||||
/// </summary>
|
||||
|
|
@ -439,8 +563,18 @@ public class HttpVideoStreamService : BackgroundService
|
|||
return;
|
||||
}
|
||||
|
||||
// 直接使用Common.Image.ConvertRGB24ToJpeg进行转换
|
||||
var jpegResult = Common.Image.ConvertRGB24ToJpeg(frameData, _frameWidth, _frameHeight, 80);
|
||||
if (!jpegResult.IsSuccessful)
|
||||
{
|
||||
logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
|
||||
return;
|
||||
}
|
||||
|
||||
var jpegData = jpegResult.Value;
|
||||
|
||||
// 使用Common中的方法准备MJPEG帧数据
|
||||
var mjpegFrameHeader = Common.Image.CreateMjpegFrameHeader(frameData.Length);
|
||||
var mjpegFrameHeader = Common.Image.CreateMjpegFrameHeader(jpegData.Length);
|
||||
var mjpegFrameFooter = Common.Image.CreateMjpegFrameFooter();
|
||||
|
||||
var clientsToRemove = new List<HttpListenerResponse>();
|
||||
|
|
@ -466,7 +600,7 @@ public class HttpVideoStreamService : BackgroundService
|
|||
await client.OutputStream.WriteAsync(mjpegFrameHeader, 0, mjpegFrameHeader.Length, cancellationToken);
|
||||
|
||||
// 发送JPEG数据
|
||||
await client.OutputStream.WriteAsync(frameData, 0, frameData.Length, cancellationToken);
|
||||
await client.OutputStream.WriteAsync(jpegData, 0, jpegData.Length, cancellationToken);
|
||||
|
||||
// 发送结尾换行符
|
||||
await client.OutputStream.WriteAsync(mjpegFrameFooter, 0, mjpegFrameFooter.Length, cancellationToken);
|
||||
|
|
@ -477,7 +611,7 @@ public class HttpVideoStreamService : BackgroundService
|
|||
if (_frameCounter % 30 == 0) // 每秒记录一次日志
|
||||
{
|
||||
logger.Debug("已向客户端 {ClientId} 发送第 {FrameNumber} 帧，大小：{Size} 字节",
|
||||
client.OutputStream.GetHashCode(), _frameCounter, frameData.Length);
|
||||
client.OutputStream.GetHashCode(), _frameCounter, jpegData.Length);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
|
|
@ -528,6 +662,8 @@ public class HttpVideoStreamService : BackgroundService
|
|||
/// </summary>
|
||||
public object GetServiceStatus()
|
||||
{
|
||||
var cameraStatus = GetCameraStatus();
|
||||
|
||||
return new
|
||||
{
|
||||
IsRunning = _httpListener?.IsListening ?? false,
|
||||
|
|
@ -535,7 +671,8 @@ public class HttpVideoStreamService : BackgroundService
|
|||
FrameRate = _frameRate,
|
||||
Resolution = $"{_frameWidth}x{_frameHeight}",
|
||||
ConnectedClients = ConnectedClientsCount,
|
||||
ClientEndpoints = GetConnectedClientEndpoints()
|
||||
ClientEndpoints = GetConnectedClientEndpoints(),
|
||||
CameraStatus = cameraStatus
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -563,6 +700,12 @@ public class HttpVideoStreamService : BackgroundService
|
|||
_activeClients.Clear();
|
||||
}
|
||||
|
||||
// 关闭摄像头连接
|
||||
lock (_cameraLock)
|
||||
{
|
||||
_camera = null;
|
||||
}
|
||||
|
||||
await base.StopAsync(cancellationToken);
|
||||
|
||||
logger.Info("HTTP 视频流服务已停止");
|
||||
|
|
@ -592,6 +735,11 @@ public class HttpVideoStreamService : BackgroundService
|
|||
_activeClients.Clear();
|
||||
}
|
||||
|
||||
lock (_cameraLock)
|
||||
{
|
||||
_camera = null;
|
||||
}
|
||||
|
||||
base.Dispose();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
596
src/APIClient.ts
596
src/APIClient.ts
|
|
@ -8,6 +8,306 @@
|
|||
/* eslint-disable */
|
||||
// ReSharper disable InconsistentNaming
|
||||
|
||||
export class VideoStreamClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||
|
||||
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||
this.http = http ? http : window as any;
|
||||
this.baseUrl = baseUrl ?? "http://localhost:5000";
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 HTTP 视频流服务状态
|
||||
* @return 服务状态信息
|
||||
*/
|
||||
getStatus(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/Status";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processGetStatus(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processGetStatus(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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 HTTP 视频流信息
|
||||
* @return 流信息
|
||||
*/
|
||||
getStreamInfo(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/StreamInfo";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processGetStreamInfo(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processGetStreamInfo(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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 配置摄像头连接参数
|
||||
* @param config 摄像头配置
|
||||
* @return 配置结果
|
||||
*/
|
||||
configureCamera(config: CameraConfigRequest): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/ConfigureCamera";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
const content_ = JSON.stringify(config);
|
||||
|
||||
let options_: RequestInit = {
|
||||
body: content_,
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processConfigureCamera(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processConfigureCamera(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 === 400) {
|
||||
return response.text().then((_responseText) => {
|
||||
let result400: any = null;
|
||||
let resultData400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
result400 = resultData400 !== undefined ? resultData400 : <any>null;
|
||||
|
||||
return throwException("A server side error occurred.", status, _responseText, _headers, result400);
|
||||
});
|
||||
} 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 摄像头配置信息
|
||||
*/
|
||||
getCameraConfig(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/CameraConfig";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processGetCameraConfig(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processGetCameraConfig(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 连接测试结果
|
||||
*/
|
||||
testCameraConnection(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/TestCameraConnection";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processTestCameraConnection(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processTestCameraConnection(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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试 HTTP 视频流连接
|
||||
* @return 连接测试结果
|
||||
*/
|
||||
testConnection(): Promise<boolean> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/TestConnection";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processTestConnection(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processTestConnection(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);
|
||||
}
|
||||
}
|
||||
|
||||
export class BsdlParserClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
|
|
@ -1542,6 +1842,55 @@ export class RemoteUpdateClient {
|
|||
}
|
||||
}
|
||||
|
||||
export class TutorialClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||
|
||||
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||
this.http = http ? http : window as any;
|
||||
this.baseUrl = baseUrl ?? "http://localhost:5000";
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有可用的教程目录
|
||||
* @return 教程目录列表
|
||||
*/
|
||||
getTutorials(): Promise<void> {
|
||||
let url_ = this.baseUrl + "/api/Tutorial";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processGetTutorials(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processGetTutorials(response: Response): Promise<void> {
|
||||
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) => {
|
||||
return;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
return throwException("A server side error occurred.", status, _responseText, _headers);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<void>(null as any);
|
||||
}
|
||||
}
|
||||
|
||||
export class UDPClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
|
|
@ -1800,15 +2149,20 @@ export class UDPClient {
|
|||
}
|
||||
|
||||
/**
|
||||
* 获取指定IP地址接受的数据列表
|
||||
* 获取指定IP地址接收的数据列表
|
||||
* @param address (optional) IP地址
|
||||
* @param taskID (optional)
|
||||
*/
|
||||
getRecvDataArray(address: string | undefined): Promise<UDPData[]> {
|
||||
getRecvDataArray(address: string | undefined, taskID: number | undefined): Promise<UDPData[]> {
|
||||
let url_ = this.baseUrl + "/api/UDP/GetRecvDataArray?";
|
||||
if (address === null)
|
||||
throw new Error("The parameter 'address' cannot be null.");
|
||||
else if (address !== undefined)
|
||||
url_ += "address=" + encodeURIComponent("" + address) + "&";
|
||||
if (taskID === null)
|
||||
throw new Error("The parameter 'taskID' cannot be null.");
|
||||
else if (taskID !== undefined)
|
||||
url_ += "taskID=" + encodeURIComponent("" + taskID) + "&";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
|
|
@ -1853,55 +2207,6 @@ export class UDPClient {
|
|||
}
|
||||
}
|
||||
|
||||
export class TutorialClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||
|
||||
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||
this.http = http ? http : window as any;
|
||||
this.baseUrl = baseUrl ?? "http://localhost:5000";
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有可用的教程目录
|
||||
* @return 教程目录列表
|
||||
*/
|
||||
getTutorials(): Promise<void> {
|
||||
let url_ = this.baseUrl + "/api/Tutorial";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processGetTutorials(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processGetTutorials(response: Response): Promise<void> {
|
||||
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) => {
|
||||
return;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
return throwException("A server side error occurred.", status, _responseText, _headers);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<void>(null as any);
|
||||
}
|
||||
}
|
||||
|
||||
export class Exception implements IException {
|
||||
message?: string;
|
||||
innerException?: Exception | undefined;
|
||||
|
|
@ -1950,6 +2255,48 @@ export interface IException {
|
|||
stackTrace?: string | undefined;
|
||||
}
|
||||
|
||||
/** 摄像头配置请求模型 */
|
||||
export class CameraConfigRequest implements ICameraConfigRequest {
|
||||
address!: string;
|
||||
port!: number;
|
||||
|
||||
constructor(data?: ICameraConfigRequest) {
|
||||
if (data) {
|
||||
for (var property in data) {
|
||||
if (data.hasOwnProperty(property))
|
||||
(<any>this)[property] = (<any>data)[property];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
init(_data?: any) {
|
||||
if (_data) {
|
||||
this.address = _data["address"];
|
||||
this.port = _data["port"];
|
||||
}
|
||||
}
|
||||
|
||||
static fromJS(data: any): CameraConfigRequest {
|
||||
data = typeof data === 'object' ? data : {};
|
||||
let result = new CameraConfigRequest();
|
||||
result.init(data);
|
||||
return result;
|
||||
}
|
||||
|
||||
toJSON(data?: any) {
|
||||
data = typeof data === 'object' ? data : {};
|
||||
data["address"] = this.address;
|
||||
data["port"] = this.port;
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
/** 摄像头配置请求模型 */
|
||||
export interface ICameraConfigRequest {
|
||||
address: string;
|
||||
port: number;
|
||||
}
|
||||
|
||||
export class SystemException extends Exception implements ISystemException {
|
||||
|
||||
constructor(data?: ISystemException) {
|
||||
|
|
@ -2091,6 +2438,8 @@ export class UDPData implements IUDPData {
|
|||
address?: string;
|
||||
/** 发送来源的端口号 */
|
||||
port?: number;
|
||||
/** 任务ID */
|
||||
taskID?: number;
|
||||
/** 接受到的数据 */
|
||||
data?: string;
|
||||
/** 是否被读取过 */
|
||||
|
|
@ -2110,6 +2459,7 @@ export class UDPData implements IUDPData {
|
|||
this.dateTime = _data["dateTime"] ? new Date(_data["dateTime"].toString()) : <any>undefined;
|
||||
this.address = _data["address"];
|
||||
this.port = _data["port"];
|
||||
this.taskID = _data["taskID"];
|
||||
this.data = _data["data"];
|
||||
this.hasRead = _data["hasRead"];
|
||||
}
|
||||
|
|
@ -2127,6 +2477,7 @@ export class UDPData implements IUDPData {
|
|||
data["dateTime"] = this.dateTime ? this.dateTime.toISOString() : <any>undefined;
|
||||
data["address"] = this.address;
|
||||
data["port"] = this.port;
|
||||
data["taskID"] = this.taskID;
|
||||
data["data"] = this.data;
|
||||
data["hasRead"] = this.hasRead;
|
||||
return data;
|
||||
|
|
@ -2141,6 +2492,8 @@ export interface IUDPData {
|
|||
address?: string;
|
||||
/** 发送来源的端口号 */
|
||||
port?: number;
|
||||
/** 任务ID */
|
||||
taskID?: number;
|
||||
/** 接受到的数据 */
|
||||
data?: string;
|
||||
/** 是否被读取过 */
|
||||
|
|
@ -2189,144 +2542,3 @@ function throwException(message: string, status: number, response: string, heade
|
|||
else
|
||||
throw new ApiException(message, status, response, headers, null);
|
||||
}
|
||||
|
||||
// VideoStreamClient - 手动添加，用于HTTP视频流控制
|
||||
export class VideoStreamClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||
|
||||
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||
this.http = http ? http : window as any;
|
||||
this.baseUrl = baseUrl ?? "http://localhost:5000";
|
||||
} /**
|
||||
* 获取HTTP视频流服务状态
|
||||
* @return HTTP视频流服务状态信息
|
||||
*/
|
||||
status(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/Status";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processStatus(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processStatus(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;
|
||||
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error(_responseText);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<any>(null as any);
|
||||
} /**
|
||||
* 获取HTTP视频流信息
|
||||
* @return HTTP视频流信息
|
||||
*/
|
||||
streamInfo(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/StreamInfo";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processStreamInfo(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processStreamInfo(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;
|
||||
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error(_responseText);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<any>(null as any);
|
||||
} /**
|
||||
* 测试HTTP视频流连接
|
||||
* @return 测试结果
|
||||
*/
|
||||
testConnection(): Promise<boolean> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/TestConnection";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processTestConnection(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processTestConnection(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;
|
||||
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error(_responseText);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<boolean>(false);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,18 @@
|
|||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"/>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"
|
||||
/>
|
||||
</svg>
|
||||
控制面板
|
||||
</h2>
|
||||
|
|
@ -23,8 +32,13 @@
|
|||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<div class="badge" :class="statusInfo.isRunning ? 'badge-success' : 'badge-error'">
|
||||
{{ statusInfo.isRunning ? '运行中' : '已停止' }}
|
||||
<div
|
||||
class="badge"
|
||||
:class="
|
||||
statusInfo.isRunning ? 'badge-success' : 'badge-error'
|
||||
"
|
||||
>
|
||||
{{ statusInfo.isRunning ? "运行中" : "已停止" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-title">服务状态</div>
|
||||
|
|
@ -37,13 +51,24 @@
|
|||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">视频规格</div>
|
||||
<div class="stat-value text-secondary">{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}</div>
|
||||
<div class="stat-value text-secondary">
|
||||
{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
|
||||
</div>
|
||||
<div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,21 +77,50 @@
|
|||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">连接数</div>
|
||||
<div class="stat-value text-accent">{{ statusInfo.connectedClients }}</div>
|
||||
<div class="stat-value text-accent">
|
||||
{{ statusInfo.connectedClients }}
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
<div class="dropdown dropdown-hover">
|
||||
<div tabindex="0" role="button" class="text-xs underline cursor-help">查看客户端</div>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
|
||||
<li v-for="(client, index) in statusInfo.clientEndpoints" :key="index" class="text-xs">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="text-xs underline cursor-help"
|
||||
>
|
||||
查看客户端
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
|
||||
>
|
||||
<li
|
||||
v-for="(client, index) in statusInfo.clientEndpoints"
|
||||
:key="index"
|
||||
class="text-xs"
|
||||
>
|
||||
<a>{{ client }}</a>
|
||||
</li>
|
||||
<li v-if="!statusInfo.clientEndpoints || statusInfo.clientEndpoints.length === 0">
|
||||
<li
|
||||
v-if="
|
||||
!statusInfo.clientEndpoints ||
|
||||
statusInfo.clientEndpoints.length === 0
|
||||
"
|
||||
>
|
||||
<a class="text-xs opacity-50">无活跃连接</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -76,6 +130,99 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 摄像头配置 -->
|
||||
<div class="card bg-base-100 shadow-sm mt-4">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm text-info">
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
摄像头配置
|
||||
</h3>
|
||||
<div class="flex flex-row justify-between items-center gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">IP地址</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="cameraConfig.address"
|
||||
placeholder="例如: 192.168.1.100"
|
||||
class="input input-bordered input-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">端口号</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
v-model="cameraConfig.port"
|
||||
placeholder="例如: 8080"
|
||||
class="input input-bordered input-sm"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
@click="confirmCameraConfig"
|
||||
:disabled="configuring"
|
||||
>
|
||||
<svg
|
||||
v-if="configuring"
|
||||
class="animate-spin h-4 w-4 mr-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
class="w-4 h-4 mr-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
{{ configuring ? "配置中..." : "确认" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
|
|
@ -83,22 +230,54 @@
|
|||
@click="refreshStatus"
|
||||
:disabled="loading"
|
||||
>
|
||||
<svg v-if="loading" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="animate-spin h-4 w-4 mr-2"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{{ loading ? '刷新中...' : '刷新状态' }}
|
||||
{{ loading ? "刷新中..." : "刷新状态" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="testConnection"
|
||||
:disabled="testing"
|
||||
>
|
||||
<svg v-if="testing" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
<svg
|
||||
v-if="testing"
|
||||
class="animate-spin h-4 w-4 mr-2"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{{ testing ? '测试中...' : '测试连接' }}
|
||||
{{ testing ? "测试中..." : "测试连接" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,16 +287,31 @@
|
|||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
视频预览
|
||||
</h2>
|
||||
|
||||
<div class="relative bg-black rounded-lg overflow-hidden" style="aspect-ratio: 4/3;">
|
||||
<div
|
||||
class="relative bg-black rounded-lg overflow-hidden"
|
||||
style="aspect-ratio: 4/3"
|
||||
>
|
||||
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
|
||||
<div v-show="isPlaying" class="w-full h-full flex items-center justify-center">
|
||||
<div
|
||||
v-show="isPlaying"
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
:src="currentVideoSource"
|
||||
alt="视频流"
|
||||
|
|
@ -128,12 +322,26 @@
|
|||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
视频流加载失败
|
||||
</h3>
|
||||
|
|
@ -144,7 +352,12 @@
|
|||
<li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
|
||||
</ul>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button class="btn btn-sm btn-outline btn-primary" @click="tryReconnect">重试连接</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-primary"
|
||||
@click="tryReconnect"
|
||||
>
|
||||
重试连接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -156,12 +369,23 @@
|
|||
class="absolute inset-0 flex items-center justify-center text-white"
|
||||
>
|
||||
<div class="text-center">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
<svg
|
||||
class="w-16 h-16 mx-auto mb-4 opacity-50"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||||
<p class="text-sm opacity-60 mt-2">点击"播放视频流"按钮开始查看实时视频</p>
|
||||
<p class="text-sm opacity-60 mt-2">
|
||||
点击"播放视频流"按钮开始查看实时视频
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -169,20 +393,49 @@
|
|||
<!-- 视频控制 -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-base-content/70">
|
||||
流地址: <code class="bg-base-300 px-2 py-1 rounded">{{ streamInfo.mjpegUrl }}</code>
|
||||
流地址:
|
||||
<code class="bg-base-300 px-2 py-1 rounded">{{
|
||||
streamInfo.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">
|
||||
<svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-sm btn-outline btn-accent"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 mr-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
更多功能
|
||||
</div>
|
||||
<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></li>
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
<li><a @click="takeSnapshot">获取并下载快照</a></li>
|
||||
<li><a @click="copyToClipboard(streamInfo.mjpegUrl)">复制MJPEG地址</a></li>
|
||||
<li>
|
||||
<a @click="copyToClipboard(streamInfo.mjpegUrl)"
|
||||
>复制MJPEG地址</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -190,9 +443,24 @@
|
|||
@click="startStream"
|
||||
:disabled="isPlaying"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<svg
|
||||
class="w-4 h-4 mr-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
播放视频流
|
||||
</button>
|
||||
|
|
@ -201,9 +469,24 @@
|
|||
@click="stopStream"
|
||||
:disabled="!isPlaying"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
|
||||
<svg
|
||||
class="w-4 h-4 mr-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
|
||||
/>
|
||||
</svg>
|
||||
停止视频流
|
||||
</button>
|
||||
|
|
@ -216,19 +499,37 @@
|
|||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
操作日志
|
||||
</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">
|
||||
<span class="text-base-content/50">[{{ formatTime(log.time) }}]</span>
|
||||
<div
|
||||
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>
|
||||
|
|
@ -245,103 +546,197 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { VideoStreamClient } from '@/APIClient'
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { VideoStreamClient, CameraConfigRequest } from "@/APIClient";
|
||||
|
||||
// 状态管理
|
||||
const loading = ref(false)
|
||||
const testing = ref(false)
|
||||
const isPlaying = ref(false)
|
||||
const hasVideoError = ref(false)
|
||||
const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频')
|
||||
const loading = ref(false);
|
||||
const testing = ref(false);
|
||||
const configuring = ref(false);
|
||||
const testingCamera = ref(false);
|
||||
const isPlaying = ref(false);
|
||||
const hasVideoError = ref(false);
|
||||
const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频');
|
||||
|
||||
// 数据
|
||||
const statusInfo = ref({
|
||||
isRunning: false,
|
||||
serverPort: 8080,
|
||||
streamUrl: '',
|
||||
mjpegUrl: '',
|
||||
snapshotUrl: '',
|
||||
streamUrl: "",
|
||||
mjpegUrl: "",
|
||||
snapshotUrl: "",
|
||||
connectedClients: 0,
|
||||
clientEndpoints: [] as string[]
|
||||
})
|
||||
clientEndpoints: [] as string[],
|
||||
});
|
||||
|
||||
const streamInfo = ref({
|
||||
frameRate: 30,
|
||||
frameWidth: 640,
|
||||
frameHeight: 480,
|
||||
format: 'MJPEG',
|
||||
htmlUrl: '',
|
||||
mjpegUrl: '',
|
||||
snapshotUrl: ''
|
||||
})
|
||||
format: "MJPEG",
|
||||
htmlUrl: "",
|
||||
mjpegUrl: "",
|
||||
snapshotUrl: "",
|
||||
});
|
||||
|
||||
const currentVideoSource = ref('')
|
||||
const logs = ref<Array<{time: Date, level: string, message: string}>>([])
|
||||
// 摄像头配置
|
||||
const cameraConfig = ref({
|
||||
address: "192.168.1.100",
|
||||
port: 8080,
|
||||
});
|
||||
|
||||
const currentVideoSource = ref("");
|
||||
const logs = ref<Array<{ time: Date; level: string; message: string }>>([]);
|
||||
|
||||
// API 客户端
|
||||
const videoClient = new VideoStreamClient()
|
||||
const videoClient = new VideoStreamClient();
|
||||
|
||||
// 添加日志
|
||||
const addLog = (level: string, message: string) => {
|
||||
logs.value.push({
|
||||
time: new Date(),
|
||||
level,
|
||||
message
|
||||
})
|
||||
message,
|
||||
});
|
||||
// 限制日志数量
|
||||
if (logs.value.length > 100) {
|
||||
logs.value.shift()
|
||||
logs.value.shift();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 加载摄像头配置
|
||||
const loadCameraConfig = async () => {
|
||||
try {
|
||||
addLog("info", "正在加载摄像头配置...");
|
||||
|
||||
const config = await videoClient.getCameraConfig();
|
||||
if (config && config.address && config.port) {
|
||||
cameraConfig.value.address = config.address;
|
||||
cameraConfig.value.port = config.port;
|
||||
addLog("success", `摄像头配置加载成功: ${config.address}:${config.port}`);
|
||||
} else {
|
||||
addLog("warning", "未找到保存的摄像头配置，使用默认值");
|
||||
}
|
||||
} catch (error) {
|
||||
addLog("error", `加载摄像头配置失败: ${error}`);
|
||||
console.error("加载摄像头配置失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 确认摄像头配置
|
||||
const confirmCameraConfig = async () => {
|
||||
if (!cameraConfig.value.address || !cameraConfig.value.port) {
|
||||
addLog("error", "请填写完整的摄像头IP地址和端口号");
|
||||
return;
|
||||
}
|
||||
|
||||
configuring.value = true;
|
||||
try {
|
||||
addLog(
|
||||
"info",
|
||||
`正在配置摄像头: ${cameraConfig.value.address}:${cameraConfig.value.port}`,
|
||||
);
|
||||
|
||||
const result = await videoClient.configureCamera(
|
||||
CameraConfigRequest.fromJS(cameraConfig.value),
|
||||
);
|
||||
|
||||
if (result) {
|
||||
addLog("success", "摄像头配置保存成功");
|
||||
// 配置成功后刷新状态
|
||||
await refreshStatus();
|
||||
} else {
|
||||
addLog("error", "摄像头配置保存失败");
|
||||
}
|
||||
} catch (error) {
|
||||
addLog("error", `配置摄像头失败: ${error}`);
|
||||
console.error("配置摄像头失败:", error);
|
||||
} finally {
|
||||
configuring.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 测试摄像头连接
|
||||
const testCameraConnection = async () => {
|
||||
if (!cameraConfig.value.address || !cameraConfig.value.port) {
|
||||
addLog("error", "请先配置摄像头IP地址和端口号");
|
||||
return;
|
||||
}
|
||||
|
||||
testingCamera.value = true;
|
||||
try {
|
||||
addLog(
|
||||
"info",
|
||||
`正在测试摄像头连接: ${cameraConfig.value.address}:${cameraConfig.value.port}`,
|
||||
);
|
||||
|
||||
const result = await videoClient.testCameraConnection();
|
||||
|
||||
if (result && result.success) {
|
||||
addLog("success", "摄像头连接测试成功");
|
||||
} else {
|
||||
addLog("error", `摄像头连接测试失败: ${result?.message || "未知错误"}`);
|
||||
}
|
||||
} catch (error) {
|
||||
addLog("error", `摄像头连接测试失败: ${error}`);
|
||||
console.error("摄像头连接测试失败:", error);
|
||||
} finally {
|
||||
testingCamera.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: Date) => {
|
||||
return time.toLocaleTimeString()
|
||||
}
|
||||
return time.toLocaleTimeString();
|
||||
};
|
||||
|
||||
// 获取日志样式
|
||||
const getLogClass = (level: string) => {
|
||||
switch (level) {
|
||||
case 'error': return 'text-error'
|
||||
case 'warning': return 'text-warning'
|
||||
case 'success': return 'text-success'
|
||||
default: return 'text-base-content'
|
||||
case "error":
|
||||
return "text-error";
|
||||
case "warning":
|
||||
return "text-warning";
|
||||
case "success":
|
||||
return "text-success";
|
||||
default:
|
||||
return "text-base-content";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 清空日志
|
||||
const clearLogs = () => {
|
||||
logs.value = []
|
||||
addLog('info', '日志已清空')
|
||||
}
|
||||
logs.value = [];
|
||||
addLog("info", "日志已清空");
|
||||
};
|
||||
|
||||
// 复制到剪贴板
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text)
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
.then(() => {
|
||||
addLog('success', '已复制到剪贴板');
|
||||
addLog("success", "已复制到剪贴板");
|
||||
})
|
||||
.catch((err) => {
|
||||
addLog('error', `复制失败: ${err}`);
|
||||
addLog("error", `复制失败: ${err}`);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 在新标签中打开视频页面
|
||||
const openInNewTab = (url: string) => {
|
||||
window.open(url, '_blank');
|
||||
addLog('info', `已在新标签打开视频页面: ${url}`);
|
||||
}
|
||||
window.open(url, "_blank");
|
||||
addLog("info", `已在新标签打开视频页面: ${url}`);
|
||||
};
|
||||
|
||||
// 获取并下载快照
|
||||
const takeSnapshot = async () => {
|
||||
try {
|
||||
addLog('info', '正在获取快照...');
|
||||
addLog("info", "正在获取快照...");
|
||||
|
||||
// 使用当前的快照URL
|
||||
const snapshotUrl = streamInfo.value.snapshotUrl;
|
||||
if (!snapshotUrl) {
|
||||
addLog('error', '快照URL不可用');
|
||||
addLog("error", "快照URL不可用");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -349,138 +744,140 @@ const takeSnapshot = async () => {
|
|||
const urlWithTimestamp = `${snapshotUrl}?t=${new Date().getTime()}`;
|
||||
|
||||
// 创建一个临时链接下载图片
|
||||
const a = document.createElement('a');
|
||||
const a = document.createElement("a");
|
||||
a.href = urlWithTimestamp;
|
||||
a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, '-')}.jpg`;
|
||||
a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, "-")}.jpg`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
addLog('success', '快照已下载');
|
||||
addLog("success", "快照已下载");
|
||||
} catch (error) {
|
||||
addLog('error', `获取快照失败: ${error}`);
|
||||
console.error('获取快照失败:', error);
|
||||
addLog("error", `获取快照失败: ${error}`);
|
||||
console.error("获取快照失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新状态
|
||||
const refreshStatus = async () => {
|
||||
loading.value = true
|
||||
loading.value = true;
|
||||
try {
|
||||
addLog('info', '正在获取服务状态...')
|
||||
addLog("info", "正在获取服务状态...");
|
||||
|
||||
const status = await videoClient.status()
|
||||
statusInfo.value = status
|
||||
// 使用新的API方法名称
|
||||
const status = await videoClient.getStatus();
|
||||
statusInfo.value = status;
|
||||
|
||||
const info = await videoClient.streamInfo()
|
||||
streamInfo.value = info
|
||||
const info = await videoClient.getStreamInfo();
|
||||
streamInfo.value = info;
|
||||
|
||||
addLog('success', '服务状态获取成功')
|
||||
addLog("success", "服务状态获取成功");
|
||||
} catch (error) {
|
||||
addLog('error', `获取状态失败: ${error}`)
|
||||
console.error('获取状态失败:', error)
|
||||
addLog("error", `获取状态失败: ${error}`);
|
||||
console.error("获取状态失败:", error);
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 测试连接
|
||||
const testConnection = async () => {
|
||||
testing.value = true
|
||||
testing.value = true;
|
||||
try {
|
||||
addLog('info', '正在测试视频流连接...')
|
||||
addLog("info", "正在测试视频流连接...");
|
||||
|
||||
const result = await videoClient.testConnection()
|
||||
const result = await videoClient.testConnection();
|
||||
|
||||
if (result) {
|
||||
addLog('success', '视频流连接测试成功')
|
||||
addLog("success", "视频流连接测试成功");
|
||||
} else {
|
||||
addLog('error', '视频流连接测试失败')
|
||||
addLog("error", "视频流连接测试失败");
|
||||
}
|
||||
} catch (error) {
|
||||
addLog('error', `连接测试失败: ${error}`)
|
||||
console.error('连接测试失败:', error)
|
||||
addLog("error", `连接测试失败: ${error}`);
|
||||
console.error("连接测试失败:", error);
|
||||
} finally {
|
||||
testing.value = false
|
||||
testing.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 视频错误处理
|
||||
const handleVideoError = () => {
|
||||
if (isPlaying.value) {
|
||||
hasVideoError.value = true
|
||||
addLog('error', '视频流加载失败')
|
||||
hasVideoError.value = true;
|
||||
addLog("error", "视频流加载失败");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 视频加载成功处理
|
||||
const handleVideoLoad = () => {
|
||||
hasVideoError.value = false
|
||||
addLog('success', '视频流加载成功')
|
||||
}
|
||||
hasVideoError.value = false;
|
||||
addLog("success", "视频流加载成功");
|
||||
};
|
||||
|
||||
// 尝试重新连接
|
||||
const tryReconnect = () => {
|
||||
addLog('info', '尝试重新连接视频流...')
|
||||
hasVideoError.value = false
|
||||
addLog("info", "尝试重新连接视频流...");
|
||||
hasVideoError.value = false;
|
||||
|
||||
// 重新设置视频源，添加时间戳避免缓存问题
|
||||
currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`
|
||||
}
|
||||
currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`;
|
||||
};
|
||||
|
||||
// 启动视频流
|
||||
const startStream = async () => {
|
||||
try {
|
||||
addLog('info', '正在启动视频流...')
|
||||
videoStatus.value = '正在连接视频流...'
|
||||
addLog("info", "正在启动视频流...");
|
||||
videoStatus.value = "正在连接视频流...";
|
||||
|
||||
// 刷新状态
|
||||
await refreshStatus()
|
||||
await refreshStatus();
|
||||
|
||||
// 设置视频源
|
||||
currentVideoSource.value = streamInfo.value.mjpegUrl
|
||||
currentVideoSource.value = streamInfo.value.mjpegUrl;
|
||||
|
||||
// 设置播放状态
|
||||
isPlaying.value = true
|
||||
hasVideoError.value = false
|
||||
isPlaying.value = true;
|
||||
hasVideoError.value = false;
|
||||
|
||||
addLog('success', '视频流已启动')
|
||||
addLog("success", "视频流已启动");
|
||||
} catch (error) {
|
||||
addLog('error', `启动视频流失败: ${error}`)
|
||||
videoStatus.value = '启动视频流失败'
|
||||
console.error('启动视频流失败:', error)
|
||||
addLog("error", `启动视频流失败: ${error}`);
|
||||
videoStatus.value = "启动视频流失败";
|
||||
console.error("启动视频流失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 停止视频流
|
||||
const stopStream = () => {
|
||||
try {
|
||||
addLog('info', '正在停止视频流...')
|
||||
addLog("info", "正在停止视频流...");
|
||||
|
||||
// 清除视频源
|
||||
currentVideoSource.value = ''
|
||||
currentVideoSource.value = "";
|
||||
|
||||
// 更新状态
|
||||
isPlaying.value = false
|
||||
hasVideoError.value = false
|
||||
videoStatus.value = '点击"播放视频流"按钮开始查看实时视频'
|
||||
isPlaying.value = false;
|
||||
hasVideoError.value = false;
|
||||
videoStatus.value = '点击"播放视频流"按钮开始查看实时视频';
|
||||
|
||||
addLog('success', '视频流已停止')
|
||||
addLog("success", "视频流已停止");
|
||||
} catch (error) {
|
||||
addLog('error', `停止视频流失败: ${error}`)
|
||||
console.error('停止视频流失败:', error)
|
||||
addLog("error", `停止视频流失败: ${error}`);
|
||||
console.error("停止视频流失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(async () => {
|
||||
addLog('info', 'HTTP 视频流页面已加载')
|
||||
await refreshStatus()
|
||||
})
|
||||
addLog("info", "HTTP 视频流页面已加载");
|
||||
await loadCameraConfig();
|
||||
await refreshStatus();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopStream()
|
||||
})
|
||||
stopStream();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue