491 lines
16 KiB
Vue
491 lines
16 KiB
Vue
<template>
|
||
<div class="bg-base-100 flex flex-col gap-7">
|
||
<!-- 控制面板 -->
|
||
<div class="card bg-base-200 shadow-xl mx-5">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-primary">
|
||
<Settings class="w-6 h-6" />
|
||
HDMI视频流控制面板
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<!-- 板卡信息 -->
|
||
<div class="stats shadow">
|
||
<div class="stat bg-base-100">
|
||
<div class="stat-figure text-primary">
|
||
<div class="badge" :class="endpoint ? 'badge-success' : 'badge-warning'">
|
||
{{ endpoint ? "已连接" : "未配置" }}
|
||
</div>
|
||
</div>
|
||
<div class="stat-title">板卡状态</div>
|
||
<div class="stat-value text-primary">HDMI</div>
|
||
<div class="stat-desc">{{ endpoint ? `板卡: ${endpoint.boardId.substring(0, 8)}...` : "请先连接板卡" }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 连接状态 -->
|
||
<div class="stats shadow">
|
||
<div class="stat bg-base-100">
|
||
<div class="stat-figure text-secondary">
|
||
<Video class="w-8 h-8" />
|
||
</div>
|
||
<div class="stat-title">视频状态</div>
|
||
<div class="stat-value text-secondary">
|
||
{{ isPlaying ? "播放中" : "未播放" }}
|
||
</div>
|
||
<div class="stat-desc">{{ videoStatus }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="card-actions justify-end mt-4">
|
||
<button class="btn btn-outline btn-primary" @click="refreshEndpoint" :disabled="loading">
|
||
<RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
|
||
<RefreshCw v-else class="h-4 w-4 mr-2" />
|
||
{{ loading ? "刷新中..." : "刷新连接" }}
|
||
</button>
|
||
<button class="btn btn-primary" @click="testConnection" :disabled="testing || !endpoint">
|
||
<RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
|
||
<TestTube v-else class="h-4 w-4 mr-2" />
|
||
{{ testing ? "测试中..." : "测试连接" }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频预览区域 -->
|
||
<div class="card bg-base-200 shadow-xl mx-5">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-primary">
|
||
<Video class="w-6 h-6" />
|
||
HDMI视频预览
|
||
</h2>
|
||
|
||
<div class="relative bg-black rounded-lg overflow-hidden cursor-pointer" :class="[
|
||
{ 'cursor-not-allowed': !isPlaying || hasVideoError || !endpoint }
|
||
]" style="aspect-ratio: 16/9" @click="handleVideoClick">
|
||
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
|
||
<div v-show="isPlaying && endpoint" class="w-full h-full flex items-center justify-center">
|
||
<img :src="currentVideoSource" alt="HDMI视频流" 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">
|
||
<AlertTriangle class="h-6 w-6" />
|
||
HDMI视频流加载失败
|
||
</h3>
|
||
<p>无法连接到HDMI视频服务器，请检查以下内容：</p>
|
||
<ul class="list-disc list-inside">
|
||
<li>HDMI输入设备是否已连接</li>
|
||
<li>板卡是否正常工作</li>
|
||
<li>网络连接是否正常</li>
|
||
<li>HDMI视频流服务是否已启动</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) || !endpoint"
|
||
class="absolute inset-0 flex items-center justify-center text-white">
|
||
<div class="text-center">
|
||
<Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
|
||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||
<p class="text-sm opacity-60 mt-2">
|
||
{{ endpoint ? '点击"播放HDMI视频流"按钮开始查看实时视频' : '请先刷新连接以获取板卡信息' }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频控制 -->
|
||
<div class="flex justify-between items-center mt-4" v-if="endpoint">
|
||
<div class="text-sm text-base-content/70">
|
||
MJPEG地址:
|
||
<code class="bg-base-300 px-2 py-1 rounded text-xs">{{
|
||
endpoint.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">
|
||
<MoreHorizontal class="w-4 h-4 mr-1" />
|
||
更多功能
|
||
</div>
|
||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
|
||
<li>
|
||
<a @click="openInNewTab(endpoint.videoUrl)">
|
||
<ExternalLink class="w-4 h-4" />
|
||
在新标签打开视频页面
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a @click="takeSnapshot">
|
||
<Camera class="w-4 h-4" />
|
||
获取并下载快照
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a @click="copyToClipboard(endpoint.mjpegUrl)">
|
||
<Copy class="w-4 h-4" />
|
||
复制MJPEG地址
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<button class="btn btn-success btn-sm" @click="startStream" :disabled="isPlaying || !endpoint">
|
||
<Play class="w-4 h-4 mr-1" />
|
||
播放HDMI视频流
|
||
</button>
|
||
<button class="btn btn-error btn-sm" @click="stopStream" :disabled="!isPlaying">
|
||
<Square class="w-4 h-4 mr-1" />
|
||
停止视频流
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日志区域 -->
|
||
<div class="card bg-base-200 shadow-xl mx-5">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-primary">
|
||
<FileText class="w-6 h-6" />
|
||
操作日志
|
||
</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>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from "vue";
|
||
import {
|
||
Settings,
|
||
Video,
|
||
RefreshCw,
|
||
TestTube,
|
||
Play,
|
||
Square,
|
||
ExternalLink,
|
||
Camera,
|
||
Copy,
|
||
FileText,
|
||
AlertTriangle,
|
||
MoreHorizontal,
|
||
} from "lucide-vue-next";
|
||
import { HdmiVideoStreamClient, type HdmiVideoStreamEndpoint } from "@/APIClient";
|
||
import { AuthManager } from "@/utils/AuthManager";
|
||
import { useAlertStore } from "@/components/Alert";
|
||
|
||
// Alert系统
|
||
const alert = useAlertStore();
|
||
|
||
// 状态管理
|
||
const loading = ref(false);
|
||
const testing = ref(false);
|
||
const isPlaying = ref(false);
|
||
const hasVideoError = ref(false);
|
||
const videoStatus = ref('未连接');
|
||
|
||
// HDMI视频流数据
|
||
const endpoint = ref<HdmiVideoStreamEndpoint | null>(null);
|
||
const currentVideoSource = ref('');
|
||
|
||
// 日志系统
|
||
interface LogEntry {
|
||
time: Date;
|
||
level: 'info' | 'success' | 'warning' | 'error';
|
||
message: string;
|
||
}
|
||
|
||
const logs = ref<LogEntry[]>([]);
|
||
|
||
// 添加日志
|
||
function addLog(level: LogEntry['level'], message: string) {
|
||
logs.value.unshift({
|
||
time: new Date(),
|
||
level,
|
||
message
|
||
});
|
||
|
||
// 保持最近100条日志
|
||
if (logs.value.length > 100) {
|
||
logs.value = logs.value.slice(0, 100);
|
||
}
|
||
}
|
||
|
||
// 格式化时间
|
||
function formatTime(date: Date): string {
|
||
return date.toLocaleTimeString();
|
||
}
|
||
|
||
// 获取日志样式类
|
||
function getLogClass(level: LogEntry['level']): string {
|
||
switch (level) {
|
||
case 'success':
|
||
return 'text-success';
|
||
case 'warning':
|
||
return 'text-warning';
|
||
case 'error':
|
||
return 'text-error';
|
||
default:
|
||
return 'text-base-content';
|
||
}
|
||
}
|
||
|
||
// 清空日志
|
||
function clearLogs() {
|
||
logs.value = [];
|
||
addLog('info', '日志已清空');
|
||
}
|
||
|
||
// 刷新HDMI视频流端点
|
||
async function refreshEndpoint() {
|
||
loading.value = true;
|
||
try {
|
||
addLog('info', '正在获取HDMI视频流端点...');
|
||
|
||
const client = AuthManager.createAuthenticatedHdmiVideoStreamClient();
|
||
const result = await client.getMyEndpoint();
|
||
|
||
if (result) {
|
||
endpoint.value = result;
|
||
videoStatus.value = '已连接板卡，可以播放视频流';
|
||
addLog('success', `成功获取HDMI视频流端点，板卡ID: ${result.boardId.substring(0, 8)}...`);
|
||
alert?.success('HDMI视频流连接成功');
|
||
} else {
|
||
endpoint.value = null;
|
||
videoStatus.value = '无法获取板卡信息';
|
||
addLog('error', '未找到绑定的板卡或板卡未配置HDMI输入');
|
||
alert?.error('未找到绑定的板卡');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取HDMI视频流端点失败:', error);
|
||
endpoint.value = null;
|
||
videoStatus.value = '连接失败';
|
||
addLog('error', `获取HDMI视频流端点失败: ${error}`);
|
||
alert?.error('获取HDMI视频流信息失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 测试连接
|
||
async function testConnection() {
|
||
if (!endpoint.value) {
|
||
alert?.warn('请先刷新连接获取板卡信息');
|
||
return;
|
||
}
|
||
|
||
testing.value = true;
|
||
try {
|
||
addLog('info', '正在测试HDMI视频流连接...');
|
||
|
||
// 尝试获取快照来测试连接
|
||
const response = await fetch(endpoint.value.snapshotUrl, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Cache-Control': 'no-cache'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
addLog('success', 'HDMI视频流连接测试成功');
|
||
alert?.success('HDMI连接测试成功');
|
||
videoStatus.value = '连接正常，可以播放视频流';
|
||
} else {
|
||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('HDMI视频流连接测试失败:', error);
|
||
addLog('error', `连接测试失败: ${error}`);
|
||
alert?.error('HDMI连接测试失败');
|
||
videoStatus.value = '连接测试失败';
|
||
} finally {
|
||
testing.value = false;
|
||
}
|
||
}
|
||
|
||
// 开始播放视频流
|
||
function startStream() {
|
||
if (!endpoint.value) {
|
||
alert?.warn('请先刷新连接获取板卡信息');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 添加时间戳防止缓存
|
||
const timestamp = new Date().getTime();
|
||
currentVideoSource.value = `${endpoint.value.mjpegUrl}&t=${timestamp}`;
|
||
isPlaying.value = true;
|
||
hasVideoError.value = false;
|
||
videoStatus.value = '正在加载视频流...';
|
||
|
||
addLog('info', '开始播放HDMI视频流');
|
||
alert?.success('开始播放HDMI视频流');
|
||
} catch (error) {
|
||
console.error('启动HDMI视频流失败:', error);
|
||
addLog('error', `启动视频流失败: ${error}`);
|
||
alert?.error('启动HDMI视频流失败');
|
||
}
|
||
}
|
||
|
||
// 停止播放视频流
|
||
function stopStream() {
|
||
isPlaying.value = false;
|
||
currentVideoSource.value = '';
|
||
videoStatus.value = '已停止播放';
|
||
|
||
const client = AuthManager.createAuthenticatedHdmiVideoStreamClient();
|
||
client.disableHdmiTransmission();
|
||
|
||
addLog('info', '停止播放HDMI视频流');
|
||
alert?.info('已停止播放HDMI视频流');
|
||
}
|
||
|
||
// 处理视频加载错误
|
||
function handleVideoError() {
|
||
hasVideoError.value = true;
|
||
videoStatus.value = '视频流加载失败';
|
||
addLog('error', 'HDMI视频流加载失败');
|
||
}
|
||
|
||
// 处理视频加载成功
|
||
function handleVideoLoad() {
|
||
hasVideoError.value = false;
|
||
videoStatus.value = '视频流播放中';
|
||
addLog('success', 'HDMI视频流加载成功');
|
||
}
|
||
|
||
// 处理视频点击
|
||
function handleVideoClick() {
|
||
if (!isPlaying.value || hasVideoError.value || !endpoint.value) {
|
||
return;
|
||
}
|
||
|
||
// 可以在这里添加点击视频的交互逻辑
|
||
addLog('info', '视频画面被点击');
|
||
}
|
||
|
||
// 重试连接
|
||
function tryReconnect() {
|
||
hasVideoError.value = false;
|
||
if (endpoint.value) {
|
||
startStream();
|
||
}
|
||
}
|
||
|
||
// 在新标签页打开视频
|
||
function openInNewTab(url: string) {
|
||
window.open(url, '_blank');
|
||
addLog('info', '在新标签页打开HDMI视频页面');
|
||
}
|
||
|
||
// 获取快照
|
||
async function takeSnapshot() {
|
||
if (!endpoint.value) {
|
||
alert?.warn('请先刷新连接获取板卡信息');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
addLog('info', '正在获取HDMI视频快照...');
|
||
|
||
const response = await fetch(endpoint.value.snapshotUrl, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Cache-Control': 'no-cache'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const blob = await response.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `hdmi_snapshot_${new Date().toISOString().replace(/:/g, '-')}.jpg`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
addLog('success', '快照下载成功');
|
||
alert?.success('HDMI快照下载成功');
|
||
} else {
|
||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取HDMI快照失败:', error);
|
||
addLog('error', `获取快照失败: ${error}`);
|
||
alert?.error('获取HDMI快照失败');
|
||
}
|
||
}
|
||
|
||
// 复制到剪贴板
|
||
async function copyToClipboard(text: string) {
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
addLog('success', '地址已复制到剪贴板');
|
||
alert?.success('地址已复制到剪贴板');
|
||
} catch (error) {
|
||
console.error('复制到剪贴板失败:', error);
|
||
addLog('error', '复制到剪贴板失败');
|
||
alert?.error('复制到剪贴板失败');
|
||
}
|
||
}
|
||
|
||
// 组件挂载时初始化
|
||
onMounted(() => {
|
||
addLog('info', 'HDMI视频流界面已初始化');
|
||
refreshEndpoint();
|
||
});
|
||
|
||
// 组件卸载时清理
|
||
onUnmounted(() => {
|
||
stopStream();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 对焦动画效果 */
|
||
@keyframes focus-pulse {
|
||
0%, 100% {
|
||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
||
}
|
||
}
|
||
|
||
.focus-animation {
|
||
animation: focus-pulse 1s ease-out;
|
||
}
|
||
</style>
|