1316 lines
43 KiB
HTML
1316 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>低空数智实时目标检测系统</title>
|
||
<script src="{{ url_for('static', filename='socket.io.min.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='chart.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='flv.min.js') }}"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #1e1e2e;
|
||
color: #e0def4;
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
header {
|
||
background: linear-gradient(135deg, #312b7c 0%, #1a1a1a 100%);
|
||
padding: 20px 30px;
|
||
border-radius: 10px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||
border: 1px solid #4c4ca7;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
background: linear-gradient(90deg, #eb6ea5, #c3a5ff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
text-shadow: 0 0 10px rgba(146, 94, 255, 0.5);
|
||
}
|
||
|
||
.description {
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
color: #a6adc8;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.config-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.config-box {
|
||
background: rgba(40, 44, 82, 0.7);
|
||
padding: 12px 25px;
|
||
border-radius: 8px;
|
||
font-size: 1.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #5a61c5;
|
||
min-width: 300px;
|
||
}
|
||
|
||
.config-label {
|
||
margin-right: 10px;
|
||
color: #c3a5ff;
|
||
}
|
||
|
||
.config-select {
|
||
background: rgba(30, 30, 46, 0.8);
|
||
color: #e0def4;
|
||
border: 1px solid #5a61c5;
|
||
border-radius: 5px;
|
||
padding: 8px 12px;
|
||
flex: 1;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.status-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.status-box {
|
||
background: rgba(40, 44, 82, 0.7);
|
||
padding: 12px 25px;
|
||
border-radius: 8px;
|
||
font-size: 1.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #5a61c5;
|
||
}
|
||
|
||
.status-indicator {
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.active {
|
||
background-color: #9beb72;
|
||
box-shadow: 0 0 10px rgba(155, 235, 114, 0.5);
|
||
}
|
||
|
||
.inactive {
|
||
background-color: #f96060;
|
||
}
|
||
|
||
.fps-value {
|
||
font-weight: bold;
|
||
color: #9beb72;
|
||
}
|
||
|
||
.frame-count {
|
||
font-weight: bold;
|
||
color: #c3a5ff;
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 30px;
|
||
font-size: 1.1rem;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-weight: 600;
|
||
background: linear-gradient(135deg, #6a5af9, #d66efd);
|
||
color: white;
|
||
box-shadow: 0 5px 15px rgba(106, 90, 249, 0.4);
|
||
}
|
||
|
||
.btn:disabled {
|
||
background: #444444;
|
||
color: #777777;
|
||
cursor: not-allowed;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.btn:hover:not(:disabled) {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 20px rgba(106, 90, 249, 0.6);
|
||
}
|
||
|
||
.video-section {
|
||
display: flex;
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.video-container {
|
||
flex: 1;
|
||
background: rgba(30, 30, 46, 0.8);
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 1px solid #4c4ca7;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.video-container h2 {
|
||
background: linear-gradient(90deg, #312b7c, #4c4ca7);
|
||
padding: 15px;
|
||
margin: 0;
|
||
font-size: 1.4rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.video-content {
|
||
padding: 15px;
|
||
height: 500px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #0f0f1b;
|
||
}
|
||
|
||
.video-player {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #000;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.statistics {
|
||
background: rgba(30, 30, 46, 0.8);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
margin-bottom: 30px;
|
||
border: 1px solid #4c4ca7;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.statistics h2 {
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
font-size: 1.8rem;
|
||
color: #c3a5ff;
|
||
}
|
||
|
||
.chart-container {
|
||
height: 300px;
|
||
position: relative;
|
||
}
|
||
|
||
.detections {
|
||
background: rgba(30, 30, 46, 0.8);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
border: 1px solid #4c4ca7;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.detections h2 {
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
font-size: 1.8rem;
|
||
color: #c3a5ff;
|
||
}
|
||
|
||
#detection-list {
|
||
list-style: none;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
padding: 10px;
|
||
background: rgba(20, 20, 35, 0.5);
|
||
border-radius: 8px;
|
||
border: 1px solid #5a61c5;
|
||
}
|
||
|
||
#detection-list::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
#detection-list::-webkit-scrollbar-track {
|
||
background: rgba(20, 20, 35, 0.5);
|
||
}
|
||
|
||
#detection-list::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(to bottom, #6a5af9, #d66efd);
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.detection-item {
|
||
background: rgba(40, 44, 82, 0.7);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid #5a61c5;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.detection-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.detection-class {
|
||
color: #eb6ea5;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.detection-confidence {
|
||
color: #9beb72;
|
||
}
|
||
|
||
.detection-info {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.info-label {
|
||
color: #a6adc8;
|
||
}
|
||
|
||
.info-value {
|
||
color: #c3a5ff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 系统消息专用样式 */
|
||
.system-message .detection-header {
|
||
border-bottom: 1px solid #5a61c5;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.system-message .detection-title {
|
||
color: #42c8ff;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.system-message .detection-time {
|
||
color: #a6adc8;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.system-message .detection-content {
|
||
padding-top: 10px;
|
||
color: #e0def4;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #a6adc8;
|
||
margin-top: 30px;
|
||
border-top: 1px solid #5a61c5;
|
||
}
|
||
|
||
.floating-buttons {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.floating-btn {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #6a5af9, #d66efd);
|
||
color: white;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
box-shadow: 0 8px 20px rgba(106, 90, 249, 0.5);
|
||
transition: all 0.3s;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.floating-btn:hover {
|
||
transform: translateY(-5px) rotate(10deg);
|
||
box-shadow: 0 12px 25px rgba(106, 90, 249, 0.7);
|
||
}
|
||
|
||
.stream-controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.stream-btn {
|
||
padding: 8px 20px;
|
||
background: rgba(76, 76, 167, 0.5);
|
||
border: 1px solid #5a61c5;
|
||
color: #e0def4;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.stream-btn:hover {
|
||
background: rgba(106, 90, 249, 0.7);
|
||
}
|
||
|
||
.stream-url {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background: rgba(30, 30, 46, 0.5);
|
||
border-radius: 5px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.stream-url input {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
color: #e0def4;
|
||
padding: 5px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.stream-url button {
|
||
background: rgba(106, 90, 249, 0.5);
|
||
border: none;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.stream-url button:hover {
|
||
background: rgba(106, 90, 249, 0.8);
|
||
}
|
||
|
||
.url-label {
|
||
margin-right: 10px;
|
||
color: #a6adc8;
|
||
}
|
||
|
||
/* Toast通知系统 */
|
||
.toast-container {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 1000;
|
||
max-width: 350px;
|
||
}
|
||
|
||
.toast {
|
||
background: rgba(40, 44, 82, 0.95);
|
||
border-radius: 8px;
|
||
padding: 15px 20px;
|
||
margin-bottom: 15px;
|
||
border-left: 4px solid #6a5af9;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
animation: slideIn 0.3s, fadeOut 0.5s 4.5s;
|
||
transition: transform 0.3s, opacity 0.3s;
|
||
}
|
||
|
||
.toast-icon {
|
||
font-size: 1.5rem;
|
||
margin-right: 12px;
|
||
color: #6a5af9;
|
||
}
|
||
|
||
.toast-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.toast-title {
|
||
font-weight: bold;
|
||
color: #c3a5ff;
|
||
margin-bottom: 5px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.toast-message {
|
||
color: #e0def4;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.toast-close {
|
||
background: none;
|
||
border: none;
|
||
color: #a6adc8;
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
margin-left: 10px;
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.toast-close:hover {
|
||
color: #eb6ea5;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOut {
|
||
from {
|
||
opacity: 1;
|
||
}
|
||
|
||
to {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.video-section {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.video-container {
|
||
height: 450px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.video-content {
|
||
height: 350px;
|
||
}
|
||
|
||
.status-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.controls {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
}
|
||
|
||
.stream-controls {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.stream-url {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.stream-url input {
|
||
width: 100%;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.stream-url button {
|
||
width: 100%;
|
||
margin-top: 5px;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.config-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.config-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.toast-container {
|
||
left: 20px;
|
||
right: 20px;
|
||
max-width: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>低空数智实时目标检测系统</h1>
|
||
<p class="description">基于深度学习的目标检测系统，实时分析视频流并展示检测结果</p>
|
||
|
||
<div class="config-container">
|
||
<div class="config-box">
|
||
<span class="config-label">推流地址:</span>
|
||
<select id="stream-select" class="config-select">
|
||
<option value="rtmp://123.132.248.154:6009/live/14">测试车辆视频</option>
|
||
<option value="rtmp://box.wisestcity.com:1935/live/5">机场推流</option>
|
||
<option value="rtmp://box.wisestcity.com:1935/live/7">无人机推流</option>
|
||
<option value="rtmp://localhost:1935/live/14">测试火灾视频</option>
|
||
<option value="rtmp://box.wisestcity.com:1935/live/10">测试游泳视频</option>
|
||
|
||
</select>
|
||
</div>
|
||
<div class="config-box">
|
||
<span class="config-label">模型选择:</span>
|
||
<select id="model-select" class="config-select">
|
||
<option value="car.pt">车辆识别</option>
|
||
<option value="yolov8x.pt">YOLOv8 XLarge</option>
|
||
<option value="yolo11n.pt">YOLOv11 N</option>
|
||
<option value="yolo11x.pt">YOLOv11 X</option>
|
||
<option value="best.pt">火情识别</option>
|
||
<option value="20250901\\2025090109483695260039.pt">溺水识别</option>
|
||
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-container">
|
||
<div class="status-box">
|
||
<div class="status-indicator inactive" id="status-indicator"></div>
|
||
<span>状态: <span id="connection-status">未连接</span></span>
|
||
</div>
|
||
<div class="status-box">
|
||
<span>FPS: <span class="fps-value" id="fps-value">0</span></span>
|
||
</div>
|
||
<div class="status-box">
|
||
<span>总帧数: <span class="frame-count" id="frame-count">0</span></span>
|
||
</div>
|
||
<div class="status-box">
|
||
<span>检测目标数: <span class="frame-count" id="detections-count">0</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<button id="start-btn" class="btn">开始检测</button>
|
||
<button id="stop-btn" class="btn" disabled>停止检测</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="video-section">
|
||
<div class="video-container">
|
||
<h2>原始视频流</h2>
|
||
<div class="video-content">
|
||
<video id="original-stream" class="video-player" controls></video>
|
||
</div>
|
||
<div class="stream-controls">
|
||
<button id="play-original" class="stream-btn">播放</button>
|
||
<button id="pause-original" class="stream-btn">暂停</button>
|
||
<button id="mute-original" class="stream-btn">静音</button>
|
||
</div>
|
||
<div class="stream-url">
|
||
<span class="url-label">推流地址:</span>
|
||
<input type="text" id="original-url" value="http://123.132.248.154:8800/flv/live/14.flv">
|
||
<button id="update-original">更新</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="video-container">
|
||
<h2>检测后视频流 <span id="objects-count" style="font-size: 0.8rem; color: #eb6ea5;">(0个检测对象)</span>
|
||
</h2>
|
||
<div class="video-content">
|
||
<video id="annotated-stream" class="video-player" controls></video>
|
||
</div>
|
||
<div class="stream-controls">
|
||
<button id="play-annotated" class="stream-btn">播放</button>
|
||
<button id="pause-annotated" class="stream-btn">暂停</button>
|
||
<button id="mute-annotated" class="stream-btn">静音</button>
|
||
</div>
|
||
<div class="stream-url">
|
||
<span class="url-label">推流地址:</span>
|
||
<input type="text" id="annotated-url" value="http://123.132.248.154:8800/flv/live/11.flv">
|
||
<button id="update-annotated">更新</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="statistics">
|
||
<h2>目标检测统计</h2>
|
||
<div class="chart-container">
|
||
<canvas id="detection-chart"></canvas>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="detections">
|
||
<h2>实时检测结果</h2>
|
||
<ul id="detection-list">
|
||
<li class="detection-item system-message">
|
||
<div class="detection-header">
|
||
<span class="detection-title">系统信息</span>
|
||
<span class="detection-time">准备就绪</span>
|
||
</div>
|
||
<div class="detection-content">
|
||
点击"开始检测"按钮启动系统
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>YOLOv8 目标检测系统 © 2025 | 实时视频分析解决方案</p>
|
||
</footer>
|
||
|
||
<div class="floating-buttons">
|
||
<button class="floating-btn" id="snapshot-btn">📷</button>
|
||
<button class="floating-btn" id="toggle-btn">⬛</button>
|
||
</div>
|
||
|
||
<!-- Toast通知容器 -->
|
||
<div class="toast-container" id="toast-container"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 全局变量
|
||
let socket;
|
||
let chart;
|
||
let detectionActive = false;
|
||
let originalPlayer = null;
|
||
let annotatedPlayer = null;
|
||
let currentStream = null;
|
||
let currentModel = "yolov8m";
|
||
|
||
// DOM元素
|
||
const startBtn = document.getElementById('start-btn');
|
||
const stopBtn = document.getElementById('stop-btn');
|
||
const statusIndicator = document.getElementById('status-indicator');
|
||
const connectionStatus = document.getElementById('connection-status');
|
||
const fpsValue = document.getElementById('fps-value');
|
||
const frameCount = document.getElementById('frame-count');
|
||
const detectionsCount = document.getElementById('detections-count');
|
||
const objectsCount = document.getElementById('objects-count');
|
||
const originalStream = document.getElementById('original-stream');
|
||
const annotatedStream = document.getElementById('annotated-stream');
|
||
const detectionList = document.getElementById('detection-list');
|
||
const snapshotBtn = document.getElementById('snapshot-btn');
|
||
const toggleBtn = document.getElementById('toggle-btn');
|
||
const originalUrl = document.getElementById('original-url');
|
||
const annotatedUrl = document.getElementById('annotated-url');
|
||
const streamSelect = document.getElementById('stream-select');
|
||
const modelSelect = document.getElementById('model-select');
|
||
const playOriginalBtn = document.getElementById('play-original');
|
||
const pauseOriginalBtn = document.getElementById('pause-original');
|
||
const muteOriginalBtn = document.getElementById('mute-original');
|
||
const playAnnotatedBtn = document.getElementById('play-annotated');
|
||
const pauseAnnotatedBtn = document.getElementById('pause-annotated');
|
||
const muteAnnotatedBtn = document.getElementById('mute-annotated');
|
||
const updateOriginalBtn = document.getElementById('update-original');
|
||
const updateAnnotatedBtn = document.getElementById('update-annotated');
|
||
const toastContainer = document.getElementById('toast-container');
|
||
|
||
// 初始化页面
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 初始化检测图表
|
||
initializeChart();
|
||
|
||
// 设置按钮事件
|
||
startBtn.addEventListener('click', startDetection);
|
||
stopBtn.addEventListener('click', stopDetection);
|
||
snapshotBtn.addEventListener('click', takeSnapshot);
|
||
toggleBtn.addEventListener('click', toggleFullscreen);
|
||
|
||
// 视频控制事件
|
||
playOriginalBtn.addEventListener('click', () => playStream('original'));
|
||
pauseOriginalBtn.addEventListener('click', () => pauseStream('original'));
|
||
muteOriginalBtn.addEventListener('click', () => muteStream('original'));
|
||
playAnnotatedBtn.addEventListener('click', () => playStream('annotated'));
|
||
pauseAnnotatedBtn.addEventListener('click', () => pauseStream('annotated'));
|
||
muteAnnotatedBtn.addEventListener('click', () => muteStream('annotated'));
|
||
updateOriginalBtn.addEventListener('click', () => updateStream('original'));
|
||
updateAnnotatedBtn.addEventListener('click', () => updateStream('annotated'));
|
||
|
||
// 监听选择变化
|
||
streamSelect.addEventListener('change', updateStreamSelection);
|
||
modelSelect.addEventListener('change', updateModelSelection);
|
||
|
||
// 显示系统提示
|
||
showSystemMessage('欢迎使用YOLOv8目标检测系统，正在检查服务状态...');
|
||
|
||
// 检查服务状态并尝试恢复
|
||
checkServiceStatus();
|
||
});
|
||
|
||
// 初始化检测统计图表
|
||
function initializeChart() {
|
||
const ctx = document.getElementById('detection-chart').getContext('2d');
|
||
chart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: [],
|
||
datasets: [{
|
||
label: '检测目标数量',
|
||
data: [],
|
||
borderColor: '#eb6ea5',
|
||
backgroundColor: 'rgba(235, 110, 165, 0.2)',
|
||
tension: 0.4,
|
||
borderWidth: 3,
|
||
pointRadius: 3
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
labels: {
|
||
color: '#a6adc8',
|
||
font: {
|
||
size: 14
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
backgroundColor: 'rgba(30, 30, 46, 0.9)',
|
||
titleColor: '#c3a5ff',
|
||
bodyColor: '#e0def4',
|
||
borderColor: '#6a5af9',
|
||
borderWidth: 1
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
color: '#a6adc8'
|
||
},
|
||
grid: {
|
||
color: 'rgba(90, 95, 140, 0.2)'
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: '#a6adc8'
|
||
},
|
||
grid: {
|
||
color: 'rgba(90, 95, 140, 0.2)'
|
||
}
|
||
}
|
||
},
|
||
animation: {
|
||
duration: 300
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新检测统计图表
|
||
function updateChart(count, time_str) {
|
||
if (chart.data.datasets[0].data.length >= 20) {
|
||
chart.data.datasets[0].data.shift();
|
||
chart.data.labels.shift()
|
||
}
|
||
chart.data.datasets[0].data.push(count);
|
||
chart.data.labels.push(time_str);
|
||
chart.update();
|
||
}
|
||
|
||
// 初始化视频播放器
|
||
function initPlayer(type) {
|
||
const videoElement = type === 'original' ? originalStream : annotatedStream;
|
||
// let url = type === 'original' ? originalUrl.value : annotatedUrl.value;
|
||
// url = url.replace("rtmp","http").replace("1935","8081")
|
||
// url = url + ".flv"
|
||
url = originalUrl.value
|
||
if (flvjs.isSupported()) {
|
||
try {
|
||
if (type === 'original' && originalPlayer) {
|
||
originalPlayer.destroy();
|
||
originalPlayer = null;
|
||
}
|
||
if (type === 'annotated' && annotatedPlayer) {
|
||
annotatedPlayer.destroy();
|
||
annotatedPlayer = null;
|
||
}
|
||
|
||
const player = flvjs.createPlayer({
|
||
type: 'flv',
|
||
url: url,
|
||
isLive: true
|
||
});
|
||
|
||
player.attachMediaElement(videoElement);
|
||
player.load();
|
||
|
||
player.play().catch(e => {
|
||
console.log(`${type}播放器自动播放失败:`, e);
|
||
showSystemMessage(`${type}播放器自动播放失败: ${e.message}`);
|
||
});
|
||
|
||
if (type === 'original') {
|
||
originalPlayer = player;
|
||
} else {
|
||
annotatedPlayer = player;
|
||
}
|
||
|
||
return player;
|
||
} catch (error) {
|
||
console.error(`${type}播放器创建失败:`, error);
|
||
showSystemMessage(`${type}播放器创建失败: ${error.message}`);
|
||
return null;
|
||
}
|
||
} else {
|
||
showSystemMessage('当前浏览器不支持FLV播放');
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// 播放视频流
|
||
function playStream(type) {
|
||
const videoElement = type === 'original' ? originalStream : annotatedStream;
|
||
const player = type === 'original' ? originalPlayer : annotatedPlayer;
|
||
|
||
if (player) {
|
||
try {
|
||
player.play();
|
||
} catch (e) {
|
||
console.log('播放失败:', e);
|
||
showSystemMessage('播放失败: ' + e.message);
|
||
}
|
||
} else {
|
||
initPlayer(type);
|
||
}
|
||
}
|
||
|
||
// 暂停视频流
|
||
function pauseStream(type) {
|
||
const videoElement = type === 'original' ? originalStream : annotatedStream;
|
||
if (videoElement && !videoElement.paused) {
|
||
videoElement.pause();
|
||
}
|
||
}
|
||
|
||
// 静音视频流
|
||
function muteStream(type) {
|
||
const videoElement = type === 'original' ? originalStream : annotatedStream;
|
||
if (videoElement) {
|
||
videoElement.muted = !videoElement.muted;
|
||
}
|
||
}
|
||
|
||
// 更新视频流地址
|
||
function updateStream(type) {
|
||
// let url = type === 'original' ? originalUrl.value : annotatedUrl.value;
|
||
let url = annotatedUrl.value;
|
||
if (url) {
|
||
initPlayer(type);
|
||
}
|
||
}
|
||
|
||
// 显示系统消息（修复版）
|
||
function showSystemMessage(message) {
|
||
// 创建系统消息元素
|
||
const item = document.createElement('li');
|
||
item.className = 'detection-item system-message';
|
||
|
||
const now = new Date();
|
||
const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
|
||
|
||
item.innerHTML = `
|
||
<div class="detection-header">
|
||
<span class="detection-title">系统信息</span>
|
||
<span class="detection-time">${timeString}</span>
|
||
</div>
|
||
<div class="detection-content">
|
||
${message}
|
||
</div>
|
||
`;
|
||
|
||
// 添加到列表顶部
|
||
detectionList.insertBefore(item, detectionList.firstChild);
|
||
|
||
// 限制消息数量
|
||
if (detectionList.children.length > 20) {
|
||
detectionList.removeChild(detectionList.lastChild);
|
||
}
|
||
|
||
// 自动滚动到最新消息
|
||
detectionList.scrollTop = 0;
|
||
|
||
// 同时显示Toast通知
|
||
showToast('系统通知', message);
|
||
}
|
||
|
||
// 显示Toast通知
|
||
function showToast(title, message) {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
|
||
toast.innerHTML = `
|
||
<div class="toast-icon">ℹ️</div>
|
||
<div class="toast-content">
|
||
<div class="toast-title">${title}</div>
|
||
<div class="toast-message">${message}</div>
|
||
</div>
|
||
<button class="toast-close">×</button>
|
||
`;
|
||
|
||
toastContainer.appendChild(toast);
|
||
|
||
// 添加关闭事件
|
||
const closeBtn = toast.querySelector('.toast-close');
|
||
closeBtn.addEventListener('click', () => {
|
||
toast.style.transform = 'translateX(100%)';
|
||
toast.style.opacity = '0';
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
}, 300);
|
||
});
|
||
|
||
// 自动移除
|
||
setTimeout(() => {
|
||
toast.style.opacity = '0';
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
}, 500);
|
||
}, 5000);
|
||
}
|
||
|
||
// 更新检测结果列表
|
||
function updateDetectionList(detections) {
|
||
// 移除所有系统消息
|
||
const systemMessages = detectionList.querySelectorAll('.system-message');
|
||
systemMessages.forEach(msg => msg.remove());
|
||
|
||
// 清空检测结果
|
||
const detectionItems = detectionList.querySelectorAll('.detection-item:not(.system-message)');
|
||
detectionItems.forEach(item => item.remove());
|
||
|
||
if (detections.length === 0) {
|
||
const item = document.createElement('li');
|
||
item.className = 'detection-item';
|
||
item.innerHTML = `
|
||
<div class="detection-header">
|
||
<span class="detection-class">未检测到目标</span>
|
||
<span class="detection-confidence">${new Date().toLocaleTimeString()}</span>
|
||
</div>
|
||
`;
|
||
detectionList.appendChild(item);
|
||
return;
|
||
}
|
||
|
||
// 按置信度排序
|
||
const sortedDetections = [...detections].sort((a, b) => b.confidence - a.confidence);
|
||
|
||
// 创建检测项
|
||
sortedDetections.forEach(det => {
|
||
const item = document.createElement('li');
|
||
item.className = 'detection-item';
|
||
|
||
const box = det.box.map(num => Math.round(num));
|
||
|
||
item.innerHTML = `
|
||
<div class="detection-header">
|
||
<span class="detection-class">${det.class_name}</span>
|
||
<span class="detection-confidence">置信度: ${det.confidence.toFixed(2)}</span>
|
||
</div>
|
||
<div class="detection-info">
|
||
<div class="info-label">位置:</div>
|
||
<div class="info-value">[${box.join(', ')}]</div>
|
||
|
||
<div class="info-label">类别ID:</div>
|
||
<div class="info-value">${det.class_id}</div>
|
||
|
||
<div class="info-label">检测时间:</div>
|
||
<div class="info-value">${new Date().toLocaleTimeString()}</div>
|
||
</div>
|
||
`;
|
||
|
||
detectionList.appendChild(item);
|
||
});
|
||
}
|
||
|
||
// 检查服务状态
|
||
function checkServiceStatus() {
|
||
fetch('/status')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.active) {
|
||
// 服务正在运行，恢复UI状态
|
||
restoreUIState(data);
|
||
showSystemMessage('检测服务正在运行中，正在恢复连接...');
|
||
|
||
// 自动连接WebSocket
|
||
connectWebSocket();
|
||
|
||
// 尝试初始化视频播放器
|
||
setTimeout(() => {
|
||
initPlayer('original');
|
||
initPlayer('annotated');
|
||
}, 1000);
|
||
} else {
|
||
showSystemMessage('检测服务当前未运行，点击"开始检测"按钮启动系统');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取服务状态失败:', error);
|
||
showSystemMessage('无法获取服务状态');
|
||
});
|
||
}
|
||
|
||
// 恢复UI状态
|
||
function restoreUIState(status) {
|
||
startBtn.disabled = true;
|
||
stopBtn.disabled = false;
|
||
connectionStatus.textContent = '已连接';
|
||
connectionStatus.style.color = '#9beb72';
|
||
statusIndicator.className = 'status-indicator active';
|
||
|
||
// 更新统计信息
|
||
fpsValue.textContent = status.fps.toFixed(1);
|
||
frameCount.textContent = status.frame_count;
|
||
detectionsCount.textContent = status.detections_count;
|
||
objectsCount.textContent = `(${status.detections_count}个检测对象)`;
|
||
|
||
// 更新图表
|
||
updateChart(status.detections_count);
|
||
|
||
detectionActive = true;
|
||
}
|
||
|
||
// 连接WebSocket
|
||
function connectWebSocket() {
|
||
// 初始化Socket连接
|
||
socket = io("http://192.168.10.131:9025");
|
||
|
||
// 连接事件
|
||
socket.on('connect', () => {
|
||
connectionStatus.textContent = '已连接';
|
||
connectionStatus.style.color = '#9beb72';
|
||
statusIndicator.className = 'status-indicator active';
|
||
showSystemMessage('已成功连接到实时检测服务');
|
||
});
|
||
|
||
socket.on('disconnect', () => {
|
||
connectionStatus.textContent = '已断开';
|
||
connectionStatus.style.color = '#f96060';
|
||
statusIndicator.className = 'status-indicator inactive';
|
||
resetUI();
|
||
showSystemMessage('服务器连接已断开');
|
||
});
|
||
|
||
// 接收检测结果
|
||
socket.on('detection_results', (data) => {
|
||
console.log('data----------------', data)
|
||
// 更新统计信息
|
||
fpsValue.textContent = data.fps.toFixed(1);
|
||
frameCount.textContent = data.frame_count;
|
||
detectionsCount.textContent = data.detections.length;
|
||
objectsCount.textContent = `(${data.detections.length}个检测对象)`;
|
||
|
||
// 更新图表
|
||
updateChart(data.detections.length, data.time_str);
|
||
|
||
// 更新检测结果列表
|
||
updateDetectionList(data.detections);
|
||
});
|
||
|
||
// 错误处理
|
||
socket.on('error', (error) => {
|
||
connectionStatus.textContent = '错误';
|
||
connectionStatus.style.color = '#f96060';
|
||
statusIndicator.className = 'status-indicator inactive';
|
||
resetUI();
|
||
showSystemMessage('连接错误: ' + error.message);
|
||
});
|
||
}
|
||
|
||
// 开始检测
|
||
function startDetection() {
|
||
if (detectionActive) {
|
||
showSystemMessage('检测已在运行中');
|
||
return;
|
||
}
|
||
|
||
// 获取当前选择的推流地址和模型
|
||
const selectedStream = streamSelect.value;
|
||
const selectedModel = modelSelect.value;
|
||
|
||
// 更新UI状态
|
||
startBtn.disabled = true;
|
||
stopBtn.disabled = false;
|
||
connectionStatus.textContent = '连接中...';
|
||
connectionStatus.style.color = '#f9c862';
|
||
statusIndicator.className = 'status-indicator';
|
||
|
||
showSystemMessage('正在连接到检测服务器...');
|
||
|
||
// 向服务端发送开始检测的命令
|
||
fetch('/start_detection', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
rtmp_url: selectedStream,
|
||
model_name: selectedModel
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
detectionActive = true;
|
||
showSystemMessage('目标检测已启动，正在接收实时视频数据...');
|
||
|
||
// 连接WebSocket
|
||
connectWebSocket();
|
||
|
||
// 初始化视频播放器
|
||
initPlayer('original');
|
||
initPlayer('annotated');
|
||
} else {
|
||
showSystemMessage('启动检测失败: ' + data.message);
|
||
resetUI();
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showSystemMessage('启动检测请求失败: ' + error.message);
|
||
resetUI();
|
||
});
|
||
}
|
||
|
||
// 停止检测
|
||
function stopDetection() {
|
||
if (!detectionActive) {
|
||
showSystemMessage('检测未运行');
|
||
return;
|
||
}
|
||
|
||
fetch('/stop_detection', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
detectionActive = false;
|
||
showSystemMessage('目标检测已停止');
|
||
resetUI();
|
||
|
||
// 断开Socket连接
|
||
if (socket) {
|
||
socket.disconnect();
|
||
}
|
||
|
||
// 停止视频播放
|
||
pauseStream('original');
|
||
pauseStream('annotated');
|
||
|
||
// 销毁播放器
|
||
if (originalPlayer) {
|
||
originalPlayer.destroy();
|
||
originalPlayer = null;
|
||
}
|
||
if (annotatedPlayer) {
|
||
annotatedPlayer.destroy();
|
||
annotatedPlayer = null;
|
||
}
|
||
} else {
|
||
showSystemMessage('停止检测失败: ' + data.message);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showSystemMessage('停止检测请求失败: ' + error.message);
|
||
});
|
||
}
|
||
|
||
// 重置UI状态
|
||
function resetUI() {
|
||
startBtn.disabled = false;
|
||
stopBtn.disabled = true;
|
||
connectionStatus.textContent = '未连接';
|
||
connectionStatus.style.color = '#f96060';
|
||
statusIndicator.className = 'status-indicator inactive';
|
||
}
|
||
|
||
// 截图功能
|
||
function takeSnapshot() {
|
||
if (!annotatedStream || !annotatedStream.videoWidth) {
|
||
showSystemMessage('当前无检测画面可保存');
|
||
return;
|
||
}
|
||
|
||
// 创建canvas捕获当前帧
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = annotatedStream.videoWidth;
|
||
canvas.height = annotatedStream.videoHeight;
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.drawImage(annotatedStream, 0, 0, canvas.width, canvas.height);
|
||
|
||
// 创建下载链接
|
||
const link = document.createElement('a');
|
||
link.download = `检测截图_${new Date().toISOString().replace(/[:.]/g, '-')}.png`;
|
||
link.href = canvas.toDataURL('image/png');
|
||
link.click();
|
||
|
||
showSystemMessage('检测截图已保存');
|
||
}
|
||
|
||
// 全屏切换
|
||
function toggleFullscreen() {
|
||
if (!document.fullscreenElement) {
|
||
document.documentElement.requestFullscreen();
|
||
toggleBtn.textContent = '⬜';
|
||
} else {
|
||
document.exitFullscreen();
|
||
toggleBtn.textContent = '⬛';
|
||
}
|
||
}
|
||
|
||
// 更新推流地址选择
|
||
function updateStreamSelection() {
|
||
const selectedStream = streamSelect.value;
|
||
originalUrl.value = selectedStream;
|
||
showSystemMessage(`已选择推流地址: ${selectedStream}`);
|
||
}
|
||
|
||
// 更新模型选择
|
||
function updateModelSelection() {
|
||
const selectedModel = modelSelect.value;
|
||
showSystemMessage(`已选择模型: ${modelSelect.options[modelSelect.selectedIndex].text}`);
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |