multi_camera/static/js/app.js

// 多摄像头监控系统前端逻辑

function refreshCamera(cameraId) {
    const frame = document.getElementById(`frame-${cameraId}`);
    const status = document.getElementById(`status-${cameraId}`);
    
    status.textContent = '🔄 刷新中...';
    
    // 添加时间戳避免缓存
    const originalSrc = frame.src.split('?')[0];
    frame.src = originalSrc + `?t=${Date.now()}`;
    
    setTimeout(() => {
        status.textContent = '✅ 在线';
    }, 2000);
}

function refreshAllCameras() {
    document.querySelectorAll('.camera-status').forEach(status => {
        status.textContent = '🔄 刷新中...';
    });
    
    for (let i = 1; i <= 6; i++) {
        refreshCamera(i);
    }
}

function toggleFullscreen(cameraId) {
    const cameraItem = document.getElementById(`camera-${cameraId}`);
    
    if (!document.fullscreenElement) {
        // 全屏相机容器而不是iframe
        if (cameraItem.requestFullscreen) {
            cameraItem.requestFullscreen();
        } else if (cameraItem.webkitRequestFullscreen) {
            cameraItem.webkitRequestFullscreen();
        } else if (cameraItem.msRequestFullscreen) {
            cameraItem.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

// 监听全屏变化事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
    // 获取所有相机
    for (let i = 1; i <= 6; i++) {
        const fullscreenBtn = document.getElementById(`fullscreen-btn-${i}`);
        const exitFullscreenBtn = document.getElementById(`exit-fullscreen-btn-${i}`);
        
        if (fullscreenBtn && exitFullscreenBtn) {
            if (document.fullscreenElement) {
                // 进入全屏时，隐藏全屏按钮，显示退出按钮
                fullscreenBtn.style.display = 'none';
                exitFullscreenBtn.style.display = 'inline-block';
            } else {
                // 退出全屏时，显示全屏按钮，隐藏退出按钮
                fullscreenBtn.style.display = 'inline-block';
                exitFullscreenBtn.style.display = 'none';
            }
        }
    }
}

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

function switchCameraNumber(event, cameraId, cameraNumber) {
    const frame = document.getElementById(`frame-${cameraId}`);
    const controls = document.getElementById(`controls-${cameraId}`);
    const buttons = controls.querySelectorAll('.selector-btn');
    
    // 更新按钮状态
    buttons.forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
    
    // 更新摄像头URL
    const currentUrl = frame.src;
    const baseUrl = currentUrl.split('?')[0];
    const params = new URLSearchParams(currentUrl.split('?')[1]);
    const room = params.get('room');
    
    // 构建新的URL
    let newUrl;
    if (cameraNumber === 'mixed') {
        newUrl = `${baseUrl}?room=${room}&camera=mixed&t=${Date.now()}`;
    } else {
        newUrl = `${baseUrl}?room=${room}&camera=camera-${cameraNumber}&t=${Date.now()}`;
    }
    frame.src = newUrl;
    
    // 更新状态显示
    const status = document.getElementById(`status-${cameraId}`);
    status.textContent = '🔄 切换中...';
    
    setTimeout(() => {
        status.textContent = '✅ 在线';
    }, 1000);
}

function updateCurrentTime() {
    const now = new Date();
    const timeString = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    });
    document.getElementById('currentTime').textContent = timeString;
}

// 每秒更新当前时间
setInterval(updateCurrentTime, 1000);

// 页面加载时更新时间
window.onload = function() {
    updateCurrentTime();
};