897 lines
28 KiB
Vue
897 lines
28 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-base-100">
|
||
<div class="container mx-auto p-6 space-y-6">
|
||
<!-- 控制面板 -->
|
||
<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>
|
||
控制面板
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<!-- 服务状态 -->
|
||
<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>
|
||
</div>
|
||
<div class="stat-title">服务状态</div>
|
||
<div class="stat-value text-primary">HTTP</div>
|
||
<div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流信息 -->
|
||
<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>
|
||
</div>
|
||
<div class="stat-title">视频规格</div>
|
||
<div class="stat-value text-secondary">
|
||
{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
|
||
</div>
|
||
<div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 连接数 -->
|
||
<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>
|
||
</div>
|
||
<div class="stat-title">连接数</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"
|
||
>
|
||
<a>{{ client }}</a>
|
||
</li>
|
||
<li
|
||
v-if="
|
||
!statusInfo.clientEndpoints ||
|
||
statusInfo.clientEndpoints.length === 0
|
||
"
|
||
>
|
||
<a class="text-xs opacity-50">无活跃连接</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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
|
||
class="btn btn-outline btn-primary"
|
||
@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>
|
||
{{ 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>
|
||
{{ testing ? "测试中..." : "测试连接" }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频预览区域 -->
|
||
<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>
|
||
视频预览
|
||
</h2>
|
||
|
||
<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"
|
||
>
|
||
<img
|
||
:src="currentVideoSource"
|
||
alt="视频流"
|
||
class="max-w-full max-h-full object-contain"
|
||
@error="handleVideoError"
|
||
@load="handleVideoLoad"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 错误信息显示 -->
|
||
<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>
|
||
视频流加载失败
|
||
</h3>
|
||
<p>无法连接到视频服务器，请检查以下内容：</p>
|
||
<ul class="list-disc list-inside">
|
||
<li>视频流服务是否已启动</li>
|
||
<li>网络连接是否正常</li>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 占位符 -->
|
||
<div
|
||
v-show="!isPlaying && !hasVideoError"
|
||
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>
|
||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||
<p class="text-sm opacity-60 mt-2">
|
||
点击"播放视频流"按钮开始查看实时视频
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频控制 -->
|
||
<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>
|
||
</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"
|
||
/>
|
||
</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>
|
||
<li><a @click="takeSnapshot">获取并下载快照</a></li>
|
||
<li>
|
||
<a @click="copyToClipboard(streamInfo.mjpegUrl)"
|
||
>复制MJPEG地址</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<button
|
||
class="btn btn-success btn-sm"
|
||
@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>
|
||
播放视频流
|
||
</button>
|
||
<button
|
||
class="btn btn-error btn-sm"
|
||
@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>
|
||
停止视频流
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日志区域 -->
|
||
<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>
|
||
操作日志
|
||
</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
|
||
>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="card-actions justify-end mt-2">
|
||
<button class="btn btn-outline btn-sm" @click="clearLogs">
|
||
清空日志
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from "vue";
|
||
import { VideoStreamClient, CameraConfigRequest } from "@/APIClient";
|
||
|
||
// 状态管理
|
||
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: "",
|
||
connectedClients: 0,
|
||
clientEndpoints: [] as string[],
|
||
});
|
||
|
||
const streamInfo = ref({
|
||
frameRate: 30,
|
||
frameWidth: 640,
|
||
frameHeight: 480,
|
||
format: "MJPEG",
|
||
htmlUrl: "",
|
||
mjpegUrl: "",
|
||
snapshotUrl: "",
|
||
});
|
||
|
||
// 摄像头配置
|
||
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 addLog = (level: string, message: string) => {
|
||
logs.value.push({
|
||
time: new Date(),
|
||
level,
|
||
message,
|
||
});
|
||
// 限制日志数量
|
||
if (logs.value.length > 100) {
|
||
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();
|
||
};
|
||
|
||
// 获取日志样式
|
||
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";
|
||
}
|
||
};
|
||
|
||
// 清空日志
|
||
const clearLogs = () => {
|
||
logs.value = [];
|
||
addLog("info", "日志已清空");
|
||
};
|
||
|
||
// 复制到剪贴板
|
||
const copyToClipboard = (text: string) => {
|
||
navigator.clipboard
|
||
.writeText(text)
|
||
.then(() => {
|
||
addLog("success", "已复制到剪贴板");
|
||
})
|
||
.catch((err) => {
|
||
addLog("error", `复制失败: ${err}`);
|
||
});
|
||
};
|
||
|
||
// 在新标签中打开视频页面
|
||
const openInNewTab = (url: string) => {
|
||
window.open(url, "_blank");
|
||
addLog("info", `已在新标签打开视频页面: ${url}`);
|
||
};
|
||
|
||
// 获取并下载快照
|
||
const takeSnapshot = async () => {
|
||
try {
|
||
addLog("info", "正在获取快照...");
|
||
|
||
// 使用当前的快照URL
|
||
const snapshotUrl = streamInfo.value.snapshotUrl;
|
||
if (!snapshotUrl) {
|
||
addLog("error", "快照URL不可用");
|
||
return;
|
||
}
|
||
|
||
// 添加时间戳防止缓存
|
||
const urlWithTimestamp = `${snapshotUrl}?t=${new Date().getTime()}`;
|
||
|
||
// 创建一个临时链接下载图片
|
||
const a = document.createElement("a");
|
||
a.href = urlWithTimestamp;
|
||
a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, "-")}.jpg`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
|
||
addLog("success", "快照已下载");
|
||
} catch (error) {
|
||
addLog("error", `获取快照失败: ${error}`);
|
||
console.error("获取快照失败:", error);
|
||
}
|
||
};
|
||
|
||
// 刷新状态
|
||
const refreshStatus = async () => {
|
||
loading.value = true;
|
||
try {
|
||
addLog("info", "正在获取服务状态...");
|
||
|
||
// 使用新的API方法名称
|
||
const status = await videoClient.getStatus();
|
||
statusInfo.value = status;
|
||
|
||
const info = await videoClient.getStreamInfo();
|
||
streamInfo.value = info;
|
||
|
||
addLog("success", "服务状态获取成功");
|
||
} catch (error) {
|
||
addLog("error", `获取状态失败: ${error}`);
|
||
console.error("获取状态失败:", error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 测试连接
|
||
const testConnection = async () => {
|
||
testing.value = true;
|
||
try {
|
||
addLog("info", "正在测试视频流连接...");
|
||
|
||
const result = await videoClient.testConnection();
|
||
|
||
if (result) {
|
||
addLog("success", "视频流连接测试成功");
|
||
} else {
|
||
addLog("error", "视频流连接测试失败");
|
||
}
|
||
} catch (error) {
|
||
addLog("error", `连接测试失败: ${error}`);
|
||
console.error("连接测试失败:", error);
|
||
} finally {
|
||
testing.value = false;
|
||
}
|
||
};
|
||
|
||
// 视频错误处理
|
||
const handleVideoError = () => {
|
||
if (isPlaying.value) {
|
||
hasVideoError.value = true;
|
||
addLog("error", "视频流加载失败");
|
||
}
|
||
};
|
||
|
||
// 视频加载成功处理
|
||
const handleVideoLoad = () => {
|
||
hasVideoError.value = false;
|
||
addLog("success", "视频流加载成功");
|
||
};
|
||
|
||
// 尝试重新连接
|
||
const tryReconnect = () => {
|
||
addLog("info", "尝试重新连接视频流...");
|
||
hasVideoError.value = false;
|
||
|
||
// 重新设置视频源，添加时间戳避免缓存问题
|
||
currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`;
|
||
};
|
||
|
||
// 启动视频流
|
||
const startStream = async () => {
|
||
try {
|
||
addLog("info", "正在启动视频流...");
|
||
videoStatus.value = "正在连接视频流...";
|
||
|
||
// 刷新状态
|
||
await refreshStatus();
|
||
|
||
// 设置视频源
|
||
currentVideoSource.value = streamInfo.value.mjpegUrl;
|
||
|
||
// 设置播放状态
|
||
isPlaying.value = true;
|
||
hasVideoError.value = false;
|
||
|
||
addLog("success", "视频流已启动");
|
||
} catch (error) {
|
||
addLog("error", `启动视频流失败: ${error}`);
|
||
videoStatus.value = "启动视频流失败";
|
||
console.error("启动视频流失败:", error);
|
||
}
|
||
};
|
||
|
||
// 停止视频流
|
||
const stopStream = () => {
|
||
try {
|
||
addLog("info", "正在停止视频流...");
|
||
|
||
// 清除视频源
|
||
currentVideoSource.value = "";
|
||
|
||
// 更新状态
|
||
isPlaying.value = false;
|
||
hasVideoError.value = false;
|
||
videoStatus.value = '点击"播放视频流"按钮开始查看实时视频';
|
||
|
||
addLog("success", "视频流已停止");
|
||
} catch (error) {
|
||
addLog("error", `停止视频流失败: ${error}`);
|
||
console.error("停止视频流失败:", error);
|
||
}
|
||
};
|
||
|
||
// 生命周期
|
||
onMounted(async () => {
|
||
addLog("info", "HTTP 视频流页面已加载");
|
||
await loadCameraConfig();
|
||
await refreshStatus();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
stopStream();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
.stats {
|
||
background-color: var(--b1);
|
||
color: var(--bc); /* 添加适配文本颜色 */
|
||
}
|
||
|
||
code {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
img {
|
||
/* 确保视频流居中显示 */
|
||
margin: 0 auto;
|
||
}
|
||
|
||
* {
|
||
transition: all 500ms ease-in-out;
|
||
}
|
||
</style>
|