wenhongquan
/
JTJAI_Media


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTSP视频流管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-bottom: 30px;
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .subtitle {
            color: #666;
            font-size: 14px;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .stat-card h3 {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .stat-card .value {
            color: #333;
            font-size: 32px;
            font-weight: bold;
        }

        .content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid #eee;
        }

        .tab {
            padding: 10px 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #666;
            transition: all 0.3s;
        }

        .tab.active {
            color: #667eea;
            border-bottom: 2px solid #667eea;
            margin-bottom: -2px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .timestamp-list {
            display: grid;
            gap: 15px;
        }

        .timestamp-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .timestamp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .timestamp-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .timestamp-info {
            color: #666;
            font-size: 14px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background: #5568d3;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background: #c82333;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn-success:hover {
            background: #218838;
        }

        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }

        .video-card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            transition: all 0.3s;
        }

        .video-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .video-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .video-info {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .success {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .refresh-btn {
            float: right;
            margin-bottom: 20px;
        }

        /* 视频播放器样式 */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .video-modal.active {
            display: flex;
        }

        .video-modal-content {
            background: white;
            border-radius: 10px;
            padding: 20px;
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }

        .video-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .video-modal-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .close-btn {
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            transition: all 0.3s;
        }

        .close-btn:hover {
            background: #c82333;
            transform: rotate(90deg);
        }

        .video-player {
            width: 100%;
            max-width: 1200px;
            max-height: 70vh;
            background: #000;
            border-radius: 5px;
        }

        .video-info-panel {
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
        }

        .video-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .video-info-label {
            color: #666;
            font-weight: bold;
        }

        .video-info-value {
            color: #333;
        }

        .btn-play {
            background: #28a745;
            color: white;
            margin-right: 5px;
        }

        .btn-play:hover {
            background: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎥 RTSP视频流管理系统</h1>
            <p class="subtitle">查看和管理您的视频流录制文件</p>
        </div>

        <div class="stats" id="stats">
            <div class="stat-card">
                <h3>时间戳目录</h3>
                <div class="value" id="timestamp-count">-</div>
            </div>
            <div class="stat-card">
                <h3>视频总数</h3>
                <div class="value" id="video-count">-</div>
            </div>
            <div class="stat-card">
                <h3>总大小</h3>
                <div class="value" id="total-size">-</div>
            </div>
        </div>

        <div class="content">
            <div id="message"></div>
            
            <button class="btn btn-success refresh-btn" onclick="loadData()">🔄 刷新</button>
            
            <div class="tabs">
                <button class="tab active" onclick="switchTab('timestamps')">时间戳目录</button>
                <button class="tab" onclick="switchTab('videos')">所有视频</button>
            </div>

            <div id="timestamps-tab" class="tab-content active">
                <div class="loading">加载中...</div>
            </div>

            <div id="videos-tab" class="tab-content">
                <div class="loading">加载中...</div>
            </div>
        </div>
    </div>

    <!-- 视频播放器模态框 -->
    <div id="video-modal" class="video-modal">
        <div class="video-modal-content">
            <div class="video-modal-header">
                <div class="video-modal-title" id="video-title">视频播放</div>
                <button class="close-btn" onclick="closeVideoPlayer()">×</button>
            </div>
            <video id="video-player" class="video-player" controls>
                您的浏览器不支持视频播放。
            </video>
            <div class="video-info-panel" id="video-details">
                <!-- 视频详细信息将在这里显示 -->
            </div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080';

        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            
            event.target.classList.add('active');
            document.getElementById(tab + '-tab').classList.add('active');
        }

        function formatBytes(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
        }

        function showMessage(message, type = 'success') {
            const messageDiv = document.getElementById('message');
            messageDiv.innerHTML = `<div class="${type}">${message}</div>`;
            setTimeout(() => {
                messageDiv.innerHTML = '';
            }, 3000);
        }

        function playVideo(videoPath, filename, fileSize, createdTime, timestampDir, streamIndex) {
            const modal = document.getElementById('video-modal');
            const player = document.getElementById('video-player');
            const title = document.getElementById('video-title');
            const details = document.getElementById('video-details');

            // 设置视频标题
            title.textContent = `▶ ${filename}`;

            // 设置视频源 - 使用相对路径
            const relativePath = `${timestampDir}/${filename}`;
            const videoUrl = `${API_BASE}/videos/${encodeURIComponent(relativePath)}`;
            console.log('设置视频源:', videoUrl);
            
            player.src = videoUrl;
            player.load();

            // 显示视频详细信息
            details.innerHTML = `
                <div class="video-info-item">
                    <span class="video-info-label">📁 文件名：</span>
                    <span class="video-info-value">${filename}</span>
                </div>
                <div class="video-info-item">
                    <span class="video-info-label">📊 文件大小：</span>
                    <span class="video-info-value">${formatBytes(fileSize)}</span>
                </div>
                <div class="video-info-item">
                    <span class="video-info-label">🕒 创建时间：</span>
                    <span class="video-info-value">${createdTime}</span>
                </div>
                <div class="video-info-item">
                    <span class="video-info-label">📂 时间戳目录：</span>
                    <span class="video-info-value">${timestampDir}</span>
                </div>
                <div class="video-info-item">
                    <span class="video-info-label">📍 流索引：</span>
                    <span class="video-info-value">${streamIndex}</span>
                </div>
                <div class="video-info-item">
                    <span class="video-info-label">📍 完整路径：</span>
                    <span class="video-info-value">${videoPath}</span>
                </div>
            `;

            // 显示模态框
            modal.classList.add('active');

            // 尝试自动播放
            player.play().catch(err => {
                console.log('自动播放失败，需要用户交互:', err);
            });
        }

        function closeVideoPlayer() {
            const modal = document.getElementById('video-modal');
            const player = document.getElementById('video-player');

            // 暂停播放
            player.pause();
            player.src = '';

            // 隐藏模态框
            modal.classList.remove('active');
        }

        // 点击模态框背景关闭
        document.getElementById('video-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeVideoPlayer();
            }
        });

        // ESC键关闭
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeVideoPlayer();
            }
        });

        async function loadStats() {
            try {
                const [timestampsRes, videosRes] = await Promise.all([
                    fetch(`${API_BASE}/api/timestamps`),
                    fetch(`${API_BASE}/api/videos`)
                ]);

                const timestamps = await timestampsRes.json();
                const videos = await videosRes.json();

                document.getElementById('timestamp-count').textContent = timestamps.count;
                document.getElementById('video-count').textContent = videos.count;

                const totalSize = videos.videos.reduce((sum, video) => sum + video.file_size, 0);
                document.getElementById('total-size').textContent = formatBytes(totalSize);
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        async function loadTimestamps() {
            const container = document.getElementById('timestamps-tab');
            container.innerHTML = '<div class="loading">加载中...</div>';

            try {
                const response = await fetch(`${API_BASE}/api/timestamps`);
                const data = await response.json();

                if (data.count === 0) {
                    container.innerHTML = '<div class="loading">暂无时间戳目录</div>';
                    return;
                }

                let html = '<div class="timestamp-list">';
                for (const ts of data.timestamps) {
                    html += `
                        <div class="timestamp-item">
                            <div class="timestamp-header">
                                <div>
                                    <div class="timestamp-name">📁 ${ts.timestamp}</div>
                                    <div class="timestamp-info">
                                        ${ts.video_count} 个视频 | ${formatBytes(ts.total_size)}
                                    </div>
                                </div>
                                <div>
                                    <button class="btn btn-primary" onclick="viewTimestamp('${ts.timestamp}')">查看</button>
                                    <button class="btn btn-danger" onclick="deleteTimestamp('${ts.timestamp}')">删除</button>
                                </div>
                            </div>
                            <div id="videos-${ts.timestamp}"></div>
                        </div>
                    `;
                }
                html += '</div>';
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = `<div class="error">加载失败: ${error.message}</div>`;
            }
        }

        async function viewTimestamp(timestamp) {
            const container = document.getElementById(`videos-${timestamp}`);
            
            if (container.innerHTML) {
                container.innerHTML = '';
                return;
            }

            container.innerHTML = '<div class="loading">加载中...</div>';

            try {
                const response = await fetch(`${API_BASE}/api/videos/${timestamp}`);
                const data = await response.json();

                let html = '<div class="video-grid">';
                for (const video of data.videos) {
                    html += `
                        <div class="video-card">
                            <div class="video-name">🎬 ${video.filename}</div>
                            <div class="video-info">📊 大小: ${formatBytes(video.file_size)}</div>
                            <div class="video-info">🕒 创建时间: ${video.created_time}</div>
                            <div class="video-info">📍 流索引: ${video.stream_index}</div>
                            <div style="margin-top: 10px; display: flex; gap: 5px;">
                                <button class="btn btn-play" style="flex: 1;" 
                                        onclick="playVideo('${video.full_path}', '${video.filename}', ${video.file_size}, '${video.created_time}', '${video.timestamp_dir}', '${video.stream_index}')">▶ 播放</button>
                                <button class="btn btn-danger" style="flex: 1;" 
                                        onclick="deleteVideo('${video.full_path}')">删除</button>
                            </div>
                        </div>
                    `;
                }
                html += '</div>';
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = `<div class="error">加载失败: ${error.message}</div>`;
            }
        }

        async function loadAllVideos() {
            const container = document.getElementById('videos-tab');
            container.innerHTML = '<div class="loading">加载中...</div>';

            try {
                const response = await fetch(`${API_BASE}/api/videos`);
                const data = await response.json();

                if (data.count === 0) {
                    container.innerHTML = '<div class="loading">暂无视频文件</div>';
                    return;
                }

                let html = '<div class="video-grid">';
                for (const video of data.videos) {
                    html += `
                        <div class="video-card">
                            <div class="video-name">🎬 ${video.filename}</div>
                            <div class="video-info">📁 目录: ${video.timestamp_dir}</div>
                            <div class="video-info">📊 大小: ${formatBytes(video.file_size)}</div>
                            <div class="video-info">🕒 创建时间: ${video.created_time}</div>
                            <div class="video-info">📍 流索引: ${video.stream_index}</div>
                            <div style="margin-top: 10px; display: flex; gap: 5px;">
                                <button class="btn btn-play" style="flex: 1;" 
                                        onclick="playVideo('${video.full_path}', '${video.filename}', ${video.file_size}, '${video.created_time}', '${video.timestamp_dir}', '${video.stream_index}')">▶ 播放</button>
                                <button class="btn btn-danger" style="flex: 1;" 
                                        onclick="deleteVideo('${video.full_path}')">删除</button>
                            </div>
                        </div>
                    `;
                }
                html += '</div>';
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = `<div class="error">加载失败: ${error.message}</div>`;
            }
        }

        async function deleteVideo(path) {
            if (!confirm(`确定要删除视频文件吗？\n${path}`)) {
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/api/video?path=${encodeURIComponent(path)}`, {
                    method: 'DELETE'
                });
                const data = await response.json();

                if (data.success) {
                    showMessage('视频删除成功', 'success');
                    loadData();
                } else {
                    showMessage('视频删除失败: ' + data.message, 'error');
                }
            } catch (error) {
                showMessage('删除失败: ' + error.message, 'error');
            }
        }

        async function deleteTimestamp(timestamp) {
            if (!confirm(`确定要删除整个时间戳目录吗？\n${timestamp}\n\n这将删除该目录下的所有文件！`)) {
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/api/timestamp/${timestamp}`, {
                    method: 'DELETE'
                });
                const data = await response.json();

                if (data.success) {
                    showMessage('目录删除成功', 'success');
                    loadData();
                } else {
                    showMessage('目录删除失败: ' + data.message, 'error');
                }
            } catch (error) {
                showMessage('删除失败: ' + error.message, 'error');
            }
        }

        function loadData() {
            loadStats();
            loadTimestamps();
            loadAllVideos();
        }

        // 页面加载时初始化
        window.onload = loadData;
    </script>
</body>
</html>