SikongJueluo
/
FPGA_WebLab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 前端添加切换摄像头功能

This commit is contained in:
SikongJueluo 2025-07-21 17:24:22 +08:00
parent d1c9710afe
commit e872f24936
3 changed files with 246 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
server/src/Controllers/VideoStreamController.cs
View File

@ -13,6 +13,45 @@ public class VideoStreamController : ControllerBase
private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger(); private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
private readonly server.Services.HttpVideoStreamService _videoStreamService; private readonly server.Services.HttpVideoStreamService _videoStreamService;
/// <summary>
/// 视频流信息结构体
/// </summary>
public class StreamInfoResult
{
/// <summary>
/// TODO:
/// </summary>
public int FrameRate { get; set; }
/// <summary>
/// TODO:
/// </summary>
public int FrameWidth { get; set; }
/// <summary>
/// TODO:
/// </summary>
public int FrameHeight { get; set; }
/// <summary>
/// TODO:
/// </summary>
public string Format { get; set; } = "MJPEG";
/// <summary>
/// TODO:
/// </summary>
public string HtmlUrl { get; set; } = "";
/// <summary>
/// TODO:
/// </summary>
public string MjpegUrl { get; set; } = "";
/// <summary>
/// TODO:
/// </summary>
public string SnapshotUrl { get; set; } = "";
/// <summary>
/// TODO:
/// </summary>
public string UsbCameraUrl { get; set; } = "";
}
/// <summary> /// <summary>
/// 摄像头配置请求模型 /// 摄像头配置请求模型
/// </summary> /// </summary>
@ -96,23 +135,25 @@ public class VideoStreamController : ControllerBase
/// <returns>流信息</returns> /// <returns>流信息</returns>
[HttpGet("StreamInfo")] [HttpGet("StreamInfo")]
[EnableCors("Users")] [EnableCors("Users")]
[ProducesResponseType(typeof(object), StatusCodes.Status200OK)] [ProducesResponseType(typeof(StreamInfoResult), StatusCodes.Status200OK)]
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)] [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
public IResult GetStreamInfo() public IResult GetStreamInfo()
{ {
try try
{ {
logger.Info("获取 HTTP 视频流信息"); logger.Info("获取 HTTP 视频流信息");
return TypedResults.Ok(new var result = new StreamInfoResult
{ {
frameRate = _videoStreamService.FrameRate, FrameRate = _videoStreamService.FrameRate,
frameWidth = _videoStreamService.FrameWidth, FrameWidth = _videoStreamService.FrameWidth,
frameHeight = _videoStreamService.FrameHeight, FrameHeight = _videoStreamService.FrameHeight,
format = "MJPEG", Format = "MJPEG",
htmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html", HtmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream", MjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot", SnapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
}); UsbCameraUrl = $"http://localhost:{_videoStreamService.ServerPort}/usb-camera"
};
return TypedResults.Ok(result);
} }
catch (Exception ex) catch (Exception ex)
{ {
@ -382,7 +423,7 @@ public class VideoStreamController : ControllerBase
logger.Info("收到初始化自动对焦请求"); logger.Info("收到初始化自动对焦请求");
var result = await _videoStreamService.InitAutoFocusAsync(); var result = await _videoStreamService.InitAutoFocusAsync();
if (result) if (result)
{ {
logger.Info("自动对焦初始化成功"); logger.Info("自动对焦初始化成功");
@ -427,7 +468,7 @@ public class VideoStreamController : ControllerBase
logger.Info("收到执行自动对焦请求"); logger.Info("收到执行自动对焦请求");
var result = await _videoStreamService.PerformAutoFocusAsync(); var result = await _videoStreamService.PerformAutoFocusAsync();
if (result) if (result)
{ {
logger.Info("自动对焦执行成功"); logger.Info("自动对焦执行成功");
@ -484,7 +525,7 @@ public class VideoStreamController : ControllerBase
} }
var result = await _videoStreamService.PerformAutoFocusAsync(); var result = await _videoStreamService.PerformAutoFocusAsync();
if (result) if (result)
{ {
logger.Info("对焦执行成功"); logger.Info("对焦执行成功");

91
src/APIClient.ts
View File

@ -68,7 +68,7 @@ export class VideoStreamClient {
* 获取 HTTP 视频流信息 * 获取 HTTP 视频流信息
* @return 流信息 * @return 流信息
*/ */
getStreamInfo(): Promise<any> { getStreamInfo(): Promise<StreamInfoResult> {
let url_ = this.baseUrl + "/api/VideoStream/StreamInfo"; let url_ = this.baseUrl + "/api/VideoStream/StreamInfo";
url_ = url_.replace(/[?&]$/, ""); url_ = url_.replace(/[?&]$/, "");
@ -84,15 +84,14 @@ export class VideoStreamClient {
}); });
} }
protected processGetStreamInfo(response: Response): Promise<any> { protected processGetStreamInfo(response: Response): Promise<StreamInfoResult> {
const status = response.status; const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); }; let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) { if (status === 200) {
return response.text().then((_responseText) => { return response.text().then((_responseText) => {
let result200: any = null; let result200: any = null;
let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver); let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
result200 = resultData200 !== undefined ? resultData200 : <any>null; result200 = StreamInfoResult.fromJS(resultData200);
return result200; return result200;
}); });
} else if (status === 500) { } else if (status === 500) {
@ -107,7 +106,7 @@ export class VideoStreamClient {
return throwException("An unexpected server error occurred.", status, _responseText, _headers); return throwException("An unexpected server error occurred.", status, _responseText, _headers);
}); });
} }
return Promise.resolve<any>(null as any); return Promise.resolve<StreamInfoResult>(null as any);
} }
/** /**
@ -4673,6 +4672,88 @@ export interface IException {
stackTrace?: string | undefined; stackTrace?: string | undefined;
} }
/** 视频流信息结构体 */
export class StreamInfoResult implements IStreamInfoResult {
/** TODO: */
frameRate!: number;
/** TODO: */
frameWidth!: number;
/** TODO: */
frameHeight!: number;
/** TODO: */
format!: string;
/** TODO: */
htmlUrl!: string;
/** TODO: */
mjpegUrl!: string;
/** TODO: */
snapshotUrl!: string;
/** TODO: */
usbCameraUrl!: string;
constructor(data?: IStreamInfoResult) {
if (data) {
for (var property in data) {
if (data.hasOwnProperty(property))
(<any>this)[property] = (<any>data)[property];
}
}
}
init(_data?: any) {
if (_data) {
this.frameRate = _data["frameRate"];
this.frameWidth = _data["frameWidth"];
this.frameHeight = _data["frameHeight"];
this.format = _data["format"];
this.htmlUrl = _data["htmlUrl"];
this.mjpegUrl = _data["mjpegUrl"];
this.snapshotUrl = _data["snapshotUrl"];
this.usbCameraUrl = _data["usbCameraUrl"];
}
}
static fromJS(data: any): StreamInfoResult {
data = typeof data === 'object' ? data : {};
let result = new StreamInfoResult();
result.init(data);
return result;
}
toJSON(data?: any) {
data = typeof data === 'object' ? data : {};
data["frameRate"] = this.frameRate;
data["frameWidth"] = this.frameWidth;
data["frameHeight"] = this.frameHeight;
data["format"] = this.format;
data["htmlUrl"] = this.htmlUrl;
data["mjpegUrl"] = this.mjpegUrl;
data["snapshotUrl"] = this.snapshotUrl;
data["usbCameraUrl"] = this.usbCameraUrl;
return data;
}
}
/** 视频流信息结构体 */
export interface IStreamInfoResult {
/** TODO: */
frameRate: number;
/** TODO: */
frameWidth: number;
/** TODO: */
frameHeight: number;
/** TODO: */
format: string;
/** TODO: */
htmlUrl: string;
/** TODO: */
mjpegUrl: string;
/** TODO: */
snapshotUrl: string;
/** TODO: */
usbCameraUrl: string;
}
/** 摄像头配置请求模型 */ /** 摄像头配置请求模型 */
export class CameraConfigRequest implements ICameraConfigRequest { export class CameraConfigRequest implements ICameraConfigRequest {
/** 摄像头地址 */ /** 摄像头地址 */

252
src/views/Project/VideoStream.vue
View File

@ -8,17 +8,14 @@
控制面板 控制面板
</h2> </h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div 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="stats shadow">
<div class="stat bg-base-100"> <div class="stat bg-base-100">
<div class="stat-figure text-primary"> <div class="stat-figure text-primary">
<div <div class="badge" :class="statusInfo.isRunning ? 'badge-success' : 'badge-error'
class="badge" ">
:class="
statusInfo.isRunning ? 'badge-success' : 'badge-error'
"
>
{{ statusInfo.isRunning ? "运行中" : "已停止" }} {{ statusInfo.isRunning ? "运行中" : "已停止" }}
</div> </div>
</div> </div>
@ -43,30 +40,23 @@
</div> </div>
<!-- 分辨率控制 --> <!-- 分辨率控制 -->
<div class="stats shadow"> <div v-show="streamType === 'videoStream'" class="stats shadow">
<div class="stat bg-base-100"> <div class="stat bg-base-100">
<div class="stat-figure text-info"> <div class="stat-figure text-info">
<Settings class="w-8 h-8" /> <Settings class="w-8 h-8" />
</div> </div>
<div class="stat-title">分辨率设置</div> <div class="stat-title">分辨率设置</div>
<div class="stat-value text-sm"> <div class="stat-value text-sm">
<select <select class="select select-sm select-bordered max-w-xs" v-model="selectedResolution"
class="select select-sm select-bordered max-w-xs" @change="changeResolution" :disabled="changingResolution">
v-model="selectedResolution"
@change="changeResolution"
:disabled="changingResolution"
>
<option v-for="res in supportedResolutions" :key="`${res.width}x${res.height}`" :value="res"> <option v-for="res in supportedResolutions" :key="`${res.width}x${res.height}`" :value="res">
{{ res.width }}×{{ res.height }} {{ res.width }}×{{ res.height }}
</option> </option>
</select> </select>
</div> </div>
<div class="stat-desc"> <div class="stat-desc">
<button <button class="btn btn-xs btn-outline btn-info mt-1" @click="refreshResolutions"
class="btn btn-xs btn-outline btn-info mt-1" :disabled="loadingResolutions">
@click="refreshResolutions"
:disabled="loadingResolutions"
>
<RefreshCw v-if="loadingResolutions" class="animate-spin h-3 w-3" /> <RefreshCw v-if="loadingResolutions" class="animate-spin h-3 w-3" />
{{ loadingResolutions ? "刷新中..." : "刷新" }} {{ loadingResolutions ? "刷新中..." : "刷新" }}
</button> </button>
@ -86,30 +76,18 @@
</div> </div>
<div class="stat-desc"> <div class="stat-desc">
<div class="dropdown dropdown-hover dropdown-top"> <div class="dropdown dropdown-hover dropdown-top">
<div <div tabindex="0" role="button" class="text-xs underline cursor-help">
tabindex="0"
role="button"
class="text-xs underline cursor-help"
>
查看客户端 查看客户端
</div> </div>
<ul <ul tabindex="0"
tabindex="0" class="dropdown-content z-20 menu p-2 shadow bg-base-200 rounded-box w-64 max-h-48 overflow-y-auto">
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 statusInfo.clientEndpoints" :key="index" class="text-xs">
>
<li
v-for="(client, index) in statusInfo.clientEndpoints"
:key="index"
class="text-xs"
>
<a class="break-all">{{ client }}</a> <a class="break-all">{{ client }}</a>
</li> </li>
<li <li v-if="
v-if=" !statusInfo.clientEndpoints ||
!statusInfo.clientEndpoints || statusInfo.clientEndpoints.length === 0
statusInfo.clientEndpoints.length === 0 ">
"
>
<a class="text-xs opacity-50">无活跃连接</a> <a class="text-xs opacity-50">无活跃连接</a>
</li> </li>
</ul> </ul>
@ -121,29 +99,21 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="card-actions justify-end mt-4"> <div class="card-actions justify-end mt-4">
<button <button class="btn btn-outline btn-warning mr-2" @click="toggleStreamType" :disabled="isSwitchingStreamType">
class="btn btn-outline btn-primary" <SwitchCamera class="h-4 w-4 mr-2" />
@click="configCamera" {{ streamType === 'usbCamera' ? '切换到视频流' : '切换到USB摄像头' }}
:dsiabled="configing" </button>
> <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" /> <RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
<CogIcon v-else class="h-4 w-4 mr-2" /> <CogIcon v-else class="h-4 w-4 mr-2" />
{{ configing ? "配置中..." : "配置摄像头" }} {{ configing ? "配置中..." : "配置摄像头" }}
</button> </button>
<button <button class="btn btn-outline btn-primary" @click="refreshStatus" :disabled="loading">
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-if="loading" class="animate-spin h-4 w-4 mr-2" />
<RefreshCw v-else class="h-4 w-4 mr-2" /> <RefreshCw v-else class="h-4 w-4 mr-2" />
{{ loading ? "刷新中..." : "刷新状态" }} {{ loading ? "刷新中..." : "刷新状态" }}
</button> </button>
<button <button v-show="streamType === 'videoStream'" class="btn btn-primary" @click="testConnection" :disabled="testing">
class="btn btn-primary"
@click="testConnection"
:disabled="testing"
>
<RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" /> <RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
<TestTube v-else class="h-4 w-4 mr-2" /> <TestTube v-else class="h-4 w-4 mr-2" />
{{ testing ? "测试中..." : "测试连接" }} {{ testing ? "测试中..." : "测试连接" }}
@ -160,42 +130,24 @@
视频预览 视频预览
</h2> </h2>
<div <div class="relative bg-black rounded-lg overflow-hidden cursor-pointer" :class="[
class="relative bg-black rounded-lg overflow-hidden cursor-pointer" focusAnimationClass,
:class="[ { 'cursor-not-allowed': !isPlaying || hasVideoError }
focusAnimationClass, ]" style="aspect-ratio: 4/3" @click="handleVideoClick">
{ 'cursor-not-allowed': !isPlaying || hasVideoError }
]"
style="aspect-ratio: 4/3"
@click="handleVideoClick"
>
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 --> <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
<div <div v-show="isPlaying" class="w-full h-full flex items-center justify-center">
v-show="isPlaying" <img :src="currentVideoSource" alt="视频流" class="max-w-full max-h-full object-contain"
class="w-full h-full flex items-center justify-center" @error="handleVideoError" @load="handleVideoLoad" />
>
<img
:src="currentVideoSource"
alt="视频流"
class="max-w-full max-h-full object-contain"
@error="handleVideoError"
@load="handleVideoLoad"
/>
</div> </div>
<!-- 对焦提示 --> <!-- 对焦提示 -->
<div <div v-if="isPlaying && !hasVideoError"
v-if="isPlaying && !hasVideoError" class="absolute top-4 right-4 text-white text-sm bg-black bg-opacity-50 px-2 py-1 rounded">
class="absolute top-4 right-4 text-white text-sm bg-black bg-opacity-50 px-2 py-1 rounded"
>
{{ isFocusing ? '对焦中...' : '点击画面对焦' }} {{ isFocusing ? '对焦中...' : '点击画面对焦' }}
</div> </div>
<!-- 错误信息显示 --> <!-- 错误信息显示 -->
<div <div v-if="hasVideoError" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70">
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 bg-error text-white shadow-lg w-full max-w-lg">
<div class="card-body"> <div class="card-body">
<h3 class="card-title flex items-center gap-2"> <h3 class="card-title flex items-center gap-2">
@ -209,10 +161,7 @@
<li>端口 {{ statusInfo.serverPort }} 是否可访问</li> <li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
</ul> </ul>
<div class="card-actions justify-end mt-2"> <div class="card-actions justify-end mt-2">
<button <button class="btn btn-sm btn-outline btn-primary" @click="tryReconnect">
class="btn btn-sm btn-outline btn-primary"
@click="tryReconnect"
>
重试连接 重试连接
</button> </button>
</div> </div>
@ -221,10 +170,8 @@
</div> </div>
<!-- 占位符 --> <!-- 占位符 -->
<div <div v-show="!isPlaying && !hasVideoError"
v-show="!isPlaying && !hasVideoError" class="absolute inset-0 flex items-center justify-center text-white">
class="absolute inset-0 flex items-center justify-center text-white"
>
<div class="text-center"> <div class="text-center">
<Video class="w-16 h-16 mx-auto mb-4 opacity-50" /> <Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
<p class="text-lg opacity-75">{{ videoStatus }}</p> <p class="text-lg opacity-75">{{ videoStatus }}</p>
@ -245,18 +192,11 @@
</div> </div>
<div class="space-x-2"> <div class="space-x-2">
<div class="dropdown dropdown-hover dropdown-top dropdown-end"> <div class="dropdown dropdown-hover dropdown-top dropdown-end">
<div <div tabindex="0" role="button" class="btn btn-sm btn-outline btn-accent">
tabindex="0"
role="button"
class="btn btn-sm btn-outline btn-accent"
>
<MoreHorizontal class="w-4 h-4 mr-1" /> <MoreHorizontal class="w-4 h-4 mr-1" />
更多功能 更多功能
</div> </div>
<ul <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
>
<li> <li>
<a @click="openInNewTab(streamInfo.htmlUrl)"> <a @click="openInNewTab(streamInfo.htmlUrl)">
<ExternalLink class="w-4 h-4" /> <ExternalLink class="w-4 h-4" />
@ -277,19 +217,11 @@
</li> </li>
</ul> </ul>
</div> </div>
<button <button class="btn btn-success btn-sm" @click="startStream" :disabled="isPlaying">
class="btn btn-success btn-sm"
@click="startStream"
:disabled="isPlaying"
>
<Play class="w-4 h-4 mr-1" /> <Play class="w-4 h-4 mr-1" />
播放视频流 播放视频流
</button> </button>
<button <button class="btn btn-error btn-sm" @click="stopStream" :disabled="!isPlaying">
class="btn btn-error btn-sm"
@click="stopStream"
:disabled="!isPlaying"
>
<Square class="w-4 h-4 mr-1" /> <Square class="w-4 h-4 mr-1" />
停止视频流 停止视频流
</button> </button>
@ -299,7 +231,7 @@
</div> </div>
<!-- 日志区域 --> <!-- 日志区域 -->
<div class="card bg-base-200 shadow-xl mx-5"> <div class="card bg-base-200 shadow-xl mx-5">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-primary"> <h2 class="card-title text-primary">
<FileText class="w-6 h-6" /> <FileText class="w-6 h-6" />
@ -307,20 +239,11 @@
</h2> </h2>
<div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto"> <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
<div <div v-for="(log, index) in logs" :key="index" class="text-sm font-mono mb-1">
v-for="(log, index) in logs" <span class="text-base-content/50">[{{ formatTime(log.time) }}]</span>
: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> <span :class="getLogClass(log.level)">{{ log.message }}</span>
</div> </div>
<div <div v-if="logs.length === 0" class="text-base-content/50 text-center py-8">
v-if="logs.length === 0"
class="text-base-content/50 text-center py-8"
>
暂无日志记录 暂无日志记录
</div> </div>
</div> </div>
@ -352,8 +275,9 @@ import {
FileText, FileText,
AlertTriangle, AlertTriangle,
MoreHorizontal, MoreHorizontal,
SwitchCamera,
} from "lucide-vue-next"; } from "lucide-vue-next";
import { VideoStreamClient, CameraConfigRequest, ResolutionConfigRequest } from "@/APIClient"; import { VideoStreamClient, CameraConfigRequest, ResolutionConfigRequest, StreamInfoResult } from "@/APIClient";
import { useEquipments } from "@/stores/equipments"; import { useEquipments } from "@/stores/equipments";
const eqps = useEquipments(); const eqps = useEquipments();
@ -366,6 +290,10 @@ const isPlaying = ref(false);
const hasVideoError = ref(false); const hasVideoError = ref(false);
const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频'); const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频');
// 视频流类型切换相关
const streamType = ref<'usbCamera' | 'videoStream'>('videoStream');
const isSwitchingStreamType = ref(false);
// 对焦相关状态 // 对焦相关状态
const isFocusing = ref(false); const isFocusing = ref(false);
const focusAnimationClass = ref(''); const focusAnimationClass = ref('');
@ -390,7 +318,7 @@ const statusInfo = ref({
clientEndpoints: [] as string[], clientEndpoints: [] as string[],
}); });
const streamInfo = ref({ const streamInfo = ref<StreamInfoResult>(new StreamInfoResult({
frameRate: 30, frameRate: 30,
frameWidth: 640, frameWidth: 640,
frameHeight: 480, frameHeight: 480,
@ -398,7 +326,8 @@ const streamInfo = ref({
htmlUrl: "", htmlUrl: "",
mjpegUrl: "", mjpegUrl: "",
snapshotUrl: "", snapshotUrl: "",
}); usbCameraUrl: "",
}));
const currentVideoSource = ref(""); const currentVideoSource = ref("");
const logs = ref<Array<{ time: Date; level: string; message: string }>>([]); const logs = ref<Array<{ time: Date; level: string; message: string }>>([]);
@ -462,6 +391,27 @@ const openInNewTab = (url: string) => {
addLog("info", `已在新标签打开视频页面: ${url}`); addLog("info", `已在新标签打开视频页面: ${url}`);
}; };
// 切换视频流类型
const toggleStreamType = async () => {
if (isSwitchingStreamType.value) return;
isSwitchingStreamType.value = true;
try {
// 这里假设后端有API: setStreamType(type: string)
addLog('info', `正在切换视频流类型到${streamType.value === 'usbCamera' ? '视频流' : 'USB摄像头'}...`);
refreshStatus();
// 设置视频源
streamType.value = streamType.value === 'usbCamera' ? 'videoStream' : 'usbCamera';
addLog('success', `已切换到${streamType.value === 'usbCamera' ? 'USB摄像头' : '视频流'}`);
stopStream();
} catch (error) {
addLog('error', `切换视频流类型失败: ${error}`);
console.error('切换视频流类型失败:', error);
} finally {
isSwitchingStreamType.value = false;
}
};
// 获取并下载快照 // 获取并下载快照
const takeSnapshot = async () => { const takeSnapshot = async () => {
try { try {
@ -585,7 +535,7 @@ const tryReconnect = () => {
// 执行对焦 // 执行对焦
const performFocus = async () => { const performFocus = async () => {
if (isFocusing.value || !isPlaying.value) return; if (isFocusing.value || !isPlaying.value) return;
try { try {
isFocusing.value = true; isFocusing.value = true;
focusAnimationClass.value = 'focus-starting'; focusAnimationClass.value = 'focus-starting';
@ -599,7 +549,7 @@ const performFocus = async () => {
// 对焦成功动画 // 对焦成功动画
focusAnimationClass.value = 'focus-success'; focusAnimationClass.value = 'focus-success';
addLog("success", "自动对焦执行成功"); addLog("success", "自动对焦执行成功");
// 2秒后消失 // 2秒后消失
setTimeout(() => { setTimeout(() => {
focusAnimationClass.value = ''; focusAnimationClass.value = '';
@ -608,7 +558,7 @@ const performFocus = async () => {
// 对焦失败动画 // 对焦失败动画
focusAnimationClass.value = 'focus-error'; focusAnimationClass.value = 'focus-error';
addLog("error", `自动对焦执行失败: ${result.message || '未知错误'}`); addLog("error", `自动对焦执行失败: ${result.message || '未知错误'}`);
// 2秒后消失 // 2秒后消失
setTimeout(() => { setTimeout(() => {
focusAnimationClass.value = ''; focusAnimationClass.value = '';
@ -619,7 +569,7 @@ const performFocus = async () => {
focusAnimationClass.value = 'focus-error'; focusAnimationClass.value = 'focus-error';
addLog("error", `自动对焦执行失败: ${error}`); addLog("error", `自动对焦执行失败: ${error}`);
console.error("自动对焦执行失败:", error); console.error("自动对焦执行失败:", error);
// 2秒后消失 // 2秒后消失
setTimeout(() => { setTimeout(() => {
focusAnimationClass.value = ''; focusAnimationClass.value = '';
@ -636,10 +586,10 @@ const performFocus = async () => {
const handleVideoClick = (event: MouseEvent) => { const handleVideoClick = (event: MouseEvent) => {
// 只在播放状态下才允许对焦 // 只在播放状态下才允许对焦
if (!isPlaying.value || hasVideoError.value) return; if (!isPlaying.value || hasVideoError.value) return;
// 防止重复点击 // 防止重复点击
if (isFocusing.value) return; if (isFocusing.value) return;
performFocus(); performFocus();
}; };
@ -654,7 +604,7 @@ const startStream = async () => {
await refreshStatus(); await refreshStatus();
// 设置视频源 // 设置视频源
currentVideoSource.value = streamInfo.value.mjpegUrl; currentVideoSource.value = streamType.value === 'usbCamera' ? streamInfo.value.usbCameraUrl : streamInfo.value.mjpegUrl;
// 设置播放状态 // 设置播放状态
isPlaying.value = true; isPlaying.value = true;
@ -677,11 +627,11 @@ const refreshResolutions = async () => {
const resolutions = await videoClient.getSupportedResolutions(); const resolutions = await videoClient.getSupportedResolutions();
supportedResolutions.value = resolutions.resolutions; supportedResolutions.value = resolutions.resolutions;
console.log("支持的分辨率列表:", supportedResolutions.value); console.log("支持的分辨率列表:", supportedResolutions.value);
// 获取当前分辨率 // 获取当前分辨率
const currentRes = await videoClient.getCurrentResolution(); const currentRes = await videoClient.getCurrentResolution();
selectedResolution.value = currentRes; selectedResolution.value = currentRes;
addLog("success", "分辨率列表获取成功"); addLog("success", "分辨率列表获取成功");
} catch (error) { } catch (error) {
addLog("error", `获取分辨率列表失败: ${error}`); addLog("error", `获取分辨率列表失败: ${error}`);
@ -694,36 +644,36 @@ const refreshResolutions = async () => {
// 切换分辨率 // 切换分辨率
const changeResolution = async () => { const changeResolution = async () => {
if (!selectedResolution.value) return; if (!selectedResolution.value) return;
changingResolution.value = true; changingResolution.value = true;
const wasPlaying = isPlaying.value; const wasPlaying = isPlaying.value;
try { try {
addLog("info", `正在切换分辨率到 ${selectedResolution.value.width}×${selectedResolution.value.height}...`); addLog("info", `正在切换分辨率到 ${selectedResolution.value.width}×${selectedResolution.value.height}...`);
// 如果正在播放，先停止视频流 // 如果正在播放，先停止视频流
if (wasPlaying) { if (wasPlaying) {
stopStream(); stopStream();
await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒 await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒
} }
// 设置新分辨率 // 设置新分辨率
const resolutionRequest = new ResolutionConfigRequest({ const resolutionRequest = new ResolutionConfigRequest({
width: selectedResolution.value.width, width: selectedResolution.value.width,
height: selectedResolution.value.height height: selectedResolution.value.height
}); });
const success = await videoClient.setResolution(resolutionRequest); const success = await videoClient.setResolution(resolutionRequest);
if (success) { if (success) {
// 刷新流信息 // 刷新流信息
await refreshStatus(); await refreshStatus();
// 如果之前在播放，重新启动视频流 // 如果之前在播放，重新启动视频流
if (wasPlaying) { if (wasPlaying) {
await new Promise(resolve => setTimeout(resolve, 500)); // 短暂延迟 await new Promise(resolve => setTimeout(resolve, 500)); // 短暂延迟
await startStream(); await startStream();
} }
addLog("success", `分辨率已切换到 ${selectedResolution.value.width}×${selectedResolution.value.height}`); addLog("success", `分辨率已切换到 ${selectedResolution.value.width}×${selectedResolution.value.height}`);
} else { } else {
addLog("error", "分辨率切换失败"); addLog("error", "分辨率切换失败");
@ -810,21 +760,27 @@ img {
0% { 0% {
border-color: transparent; border-color: transparent;
} }
100% { 100% {
border-color: #fbbf24; /* 黄色 */ border-color: #fbbf24;
/* 黄色 */
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
} }
} }
@keyframes focus-success-animation { @keyframes focus-success-animation {
0% { 0% {
border-color: #fbbf24; /* 黄色 */ border-color: #fbbf24;
/* 黄色 */
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
} }
50% { 50% {
border-color: #10b981; /* 绿色 */ border-color: #10b981;
/* 绿色 */
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
} }
100% { 100% {
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;
@ -833,13 +789,17 @@ img {
@keyframes focus-error-animation { @keyframes focus-error-animation {
0% { 0% {
border-color: #fbbf24; /* 黄色 */ border-color: #fbbf24;
/* 黄色 */
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
} }
50% { 50% {
border-color: #ef4444; /* 红色 */ border-color: #ef4444;
/* 红色 */
box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
} }
100% { 100% {
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;