From 5433a036aabfc159836a2764e3c8f172d8147904 Mon Sep 17 00:00:00 2001 From: Tot Maxim Date: Mon, 11 May 2026 14:02:05 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=B0=D0=BC=D0=B5=D1=80=D0=B0=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BB=D0=BE=D0=BA=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=BC?= =?UTF-8?q?=20=D1=85=D0=BE=D1=81=D1=82=D0=B5=20=D1=82=D0=B5=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cmd/server/main.go | 83 ++++++++++++++++++++-- cmd/server/web/css/style.css | 130 ++++++++++++++++------------------- cmd/server/web/js/app.js | 2 +- cmd/server/web/js/camera.js | 70 ++++++++++--------- cmd/server/web/js/layout.js | 58 ++++++++++------ 5 files changed, 215 insertions(+), 128 deletions(-) diff --git a/cmd/server/main.go b/cmd/server/main.go index 43b55d8..f3b0a7e 100644 --- a/cmd/server/main.go +++ b/cmd/server/main.go @@ -6,6 +6,8 @@ import ( "embed" "encoding/json" "flag" + "fmt" + "io" "io/fs" "log" "net/http" @@ -77,13 +79,75 @@ func (a *API) HandleHistory(w http.ResponseWriter, r *http.Request) { } func (a *API) HandleStream(w http.ResponseWriter, r *http.Request) { - writeJSON(w, map[string]string{ - "cam": "http://192.168.77.1:1984/stream.html?src=cam", + // Проверяем доступность go2rtc + resp, err := http.Get("http://localhost:1984/api/streams?src=cam") + camAvailable := err == nil && resp.StatusCode == 200 + if resp != nil { + resp.Body.Close() + } + + writeJSON(w, map[string]interface{}{ + "cam": "/api/cam", + "available": camAvailable, + "source": fmt.Sprintf("http://%s:1984/api/stream.mjpeg?src=cam", r.Host), }) } -// ===== PIPE READER ===== +// Прокси для MJPEG потока с go2rtc +func handleCamProxy(w http.ResponseWriter, r *http.Request) { + log.Printf("[cam] proxy request from %s", r.RemoteAddr) + resp, err := http.Get( + "http://127.0.0.1:1984/api/stream.mjpeg?src=cam", + ) + if err != nil { + log.Printf("[cam] go2rtc unavailable: %v", err) + http.Error(w, "camera unavailable", 503) + return + } + defer resp.Body.Close() + + for k, vv := range resp.Header { + for _, v := range vv { + w.Header().Add(k, v) + } + } + + w.Header().Set("Access-Control-Allow-Origin", "*") + + w.WriteHeader(resp.StatusCode) + + flusher, ok := w.(http.Flusher) + if !ok { + http.Error(w, "stream unsupported", 500) + return + } + + buf := make([]byte, 32*1024) + + for { + n, err := resp.Body.Read(buf) + + if n > 0 { + _, err = w.Write(buf[:n]) + if err != nil { + log.Printf("[cam] client disconnected") + return + } + + flusher.Flush() + } + + if err != nil { + if err != io.EOF { + log.Printf("[cam] stream ended: %v", err) + } + return + } + } +} + +// ===== PIPE READER ===== func startPipeReader(ctx context.Context, buf *adapter.RingBuffer, path string) { go func() { buffer := make([]byte, 64) @@ -123,6 +187,14 @@ func startPipeReader(ctx context.Context, buf *adapter.RingBuffer, path string) func cors(next http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") + w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS") + w.Header().Set("Access-Control-Allow-Headers", "Content-Type") + + if r.Method == "OPTIONS" { + w.WriteHeader(200) + return + } + next(w, r) } } @@ -153,6 +225,8 @@ func main() { cors(api.HandleHealth)(w, r) case "/stream": cors(api.HandleStream)(w, r) + case "/cam": + handleCamProxy(w, r) default: http.Error(w, "not found", 404) } @@ -166,6 +240,7 @@ func main() { http.Handle("/", http.FileServer(http.FS(webFS))) - log.Println("server :8080") + log.Println("Server started on :8080") + log.Println("Camera proxy available at /api/cam") log.Fatal(http.ListenAndServe(":8080", nil)) } diff --git a/cmd/server/web/css/style.css b/cmd/server/web/css/style.css index 37331c6..06f0da8 100644 --- a/cmd/server/web/css/style.css +++ b/cmd/server/web/css/style.css @@ -53,7 +53,6 @@ h1 { margin-bottom: 8px; } -/* СТАТУСЫ - ЦВЕТА */ .status-ok { color: #00ff88 !important; } @@ -113,7 +112,6 @@ h1 { margin-right: 10px; } -/* ЗАЛИВКА ПРОГРЕСС-БАРА */ .fill { height: 100%; width: 0%; @@ -124,7 +122,6 @@ h1 { transition: width 0.25s linear; } -/* Заливка при потере связи */ .fill.no-connection { background: #555555 !important; box-shadow: none !important; @@ -154,13 +151,11 @@ h1 { .sig-bar-2 { height: 66%; } .sig-bar-3 { height: 100%; } -/* Неактивные сигнальные бары */ .sig-bar.dim { background-color: transparent; border-color: #1a3a1a; } -/* Активные сигнальные бары */ .sig-bar.active-1, .sig-bar.active-2, .sig-bar.active-3 { @@ -168,7 +163,6 @@ h1 { border-color: #c46b1f; } -/* Нет связи - сигнальные бары */ .sig-bar.no-connection { background-color: #555555 !important; border-color: #555555 !important; @@ -224,99 +218,90 @@ h1 { opacity: 0; } - -/* ОТКРЫТОЕ СОСТОЯНИЕ */ -.cam-modal.open { - transform: translateX(0); -} - -.cam-header { - display: flex; - justify-content: space-between; - padding: 8px; - color: white; - background: #222; -} - -.cam-frame { - flex: 1; - width: 100%; - border: none; - object-fit: contain; - background: #000; - min-height: 200px; -} - -.cam-loading { - display: flex; - align-items: center; - justify-content: center; - color: #00ff88; - font-size: 18px; -} - -.hidden { - display: none; -} - /* ===== SPLIT LAYOUT ===== */ - .layout { display: flex; - height: 100vh; - width: 100vw; - overflow: hidden; + height: calc(100vh - 60px); + width: 100%; + margin: 0; + padding: 0; } .panel { height: 100%; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; } .left { - flex: 1; + flex: 1 1 auto; min-width: 300px; - transition: all 0.3s ease; + padding: 10px; + transition: flex 0.3s ease; } .right { flex: 0 0 40%; - min-width: 300px; - transition: all 0.3s ease; + min-width: 0; + background: black; + position: relative; + transition: flex 0.3s ease, min-width 0.3s ease, opacity 0.3s ease; + overflow: hidden; } .right.hidden { flex: 0 0 0 !important; min-width: 0 !important; width: 0 !important; - overflow: hidden; opacity: 0; + pointer-events: none; } /* DRAG BAR */ .resizer { - width: 6px; + width: 8px; + min-width: 8px; cursor: col-resize; background: #00ff88; - opacity: 0.25; - transition: opacity 0.2s; + opacity: 0.3; + transition: opacity 0.2s, width 0.3s ease, min-width 0.3s ease; + flex-shrink: 0; + z-index: 10; } .resizer:hover { + opacity: 0.8; +} + +.resizer:active { opacity: 1; } .resizer.hidden { - display: none; + width: 0 !important; + min-width: 0 !important; + opacity: 0; + pointer-events: none; +} + +/* Когда камера скрыта, левая панель занимает всё пространство */ +.layout:has(.right.hidden) .left { + flex: 1 1 100% !important; } /* ===== CAMERA ===== */ - .cam-modal { height: 100%; display: flex; flex-direction: column; background: black; + opacity: 1; + transition: opacity 0.2s ease; +} + +.right.hidden .cam-modal { + opacity: 0; + transition: opacity 0.2s ease; } .cam-header { @@ -341,6 +326,7 @@ h1 { color: #00ff88; } +/* ===== CAMERA BUTTON ===== */ .cam-btn { position: fixed; top: 20px; @@ -369,20 +355,6 @@ h1 { font-size: 18px; } -/* Панель камеры скрыта */ -.panel.right[style*="display: none"] { - display: none !important; -} - -/* Когда камера скрыта, левая панель на весь экран */ -.layout:has(.panel.right[style*="display: none"]) .left { - flex: 1; -} - -.layout:has(.panel.right[style*="display: none"]) .resizer { - display: none; -} - /* ===== MOBILE ===== */ @media (max-width: 500px) { h1 { @@ -407,4 +379,22 @@ h1 { line-height: 1.5; max-height: 55vh; } + + .layout { + flex-direction: column; + height: auto; + } + + .left { + min-height: 50vh; + } + + .right { + flex: 0 0 50vh !important; + min-width: 100% !important; + } + + .resizer { + display: none; + } } \ No newline at end of file diff --git a/cmd/server/web/js/app.js b/cmd/server/web/js/app.js index 92d040b..b379801 100644 --- a/cmd/server/web/js/app.js +++ b/cmd/server/web/js/app.js @@ -25,8 +25,8 @@ let pollTimer = null; window.addEventListener("DOMContentLoaded", () => { initDOM(); initAccordion(); - initCamera(); initResize(); + initCamera(); }); document.addEventListener("keydown", (e) => { diff --git a/cmd/server/web/js/camera.js b/cmd/server/web/js/camera.js index 01db9f3..212af5d 100644 --- a/cmd/server/web/js/camera.js +++ b/cmd/server/web/js/camera.js @@ -1,29 +1,36 @@ -//camera.js -let rightPanel, camImage, camClose; +// camera.js +import { updateResizerVisibility } from './layout.js'; + +let rightPanel; +let camImage; +let camClose; + let isOpen = false; -let streamUrl; export function initCamera() { rightPanel = document.getElementById("rightPanel"); camImage = document.getElementById("camImage"); camClose = document.getElementById("camClose"); + const btn = document.getElementById("camToggle"); - streamUrl = "http://192.168.77.1:1984/api/stream.mjpeg?src=cam"; + const streamUrl = "/api/cam"; function open() { if (isOpen) return; isOpen = true; + rightPanel.classList.remove("hidden"); - camImage.src = streamUrl + "&t=" + Date.now(); - - // Обновляем текст кнопки + + camImage.src = streamUrl; + if (btn) { btn.querySelector('.cam-btn-text').textContent = 'Скрыть'; } - - console.log("[camera] Камера открыта"); + + console.log("[camera] opened"); + updateResizerVisibility(); } @@ -31,43 +38,40 @@ export function initCamera() { if (!isOpen) return; isOpen = false; - camImage.src = "about:blank"; - - setTimeout(() => { - camImage.src = ""; - }, 50); + + // остановка stream + camImage.src = ""; rightPanel.classList.add("hidden"); - - // Обновляем текст кнопки + if (btn) { btn.querySelector('.cam-btn-text').textContent = 'Камера'; } - - console.log("[camera] Камера закрыта"); + + console.log("[camera] closed"); + updateResizerVisibility(); } function toggle() { - isOpen ? close() : open(); + if (isOpen) { + close(); + } else { + open(); + } } - // Обработчики событий + camImage.onload = () => { + console.log("[camera] stream started"); + }; + + camImage.onerror = (e) => { + console.error("[camera] stream error", e); + }; + btn?.addEventListener("click", toggle); camClose?.addEventListener("click", close); - // Горячие клавиши - document.addEventListener("keydown", (e) => { - if (e.key === 'c' || e.key === 'C') { - toggle(); - } - if (e.key === 'Escape' && isOpen) { - close(); - } - }); - - // Автозапуск камеры + // автозапуск open(); - - console.log("[camera] Модуль камеры инициализирован"); } \ No newline at end of file diff --git a/cmd/server/web/js/layout.js b/cmd/server/web/js/layout.js index f276f06..632c8df 100644 --- a/cmd/server/web/js/layout.js +++ b/cmd/server/web/js/layout.js @@ -7,7 +7,12 @@ export function initResize() { rightPanel = document.getElementById("rightPanel"); dragBar = document.getElementById("dragBar"); - if (!leftPanel || !rightPanel || !dragBar) return; + if (!leftPanel || !rightPanel || !dragBar) { + console.warn("[layout] Элементы не найдены"); + return; + } + + console.log("[layout] Инициализация ресайза"); // Загрузка сохранённых пропорций const savedRatio = localStorage.getItem('layoutRatio'); @@ -17,48 +22,52 @@ export function initResize() { } dragBar.addEventListener("mousedown", (e) => { + if (rightPanel.classList.contains("hidden")) return; + + console.log("[layout] mousedown на resizer"); isDragging = true; document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none"; e.preventDefault(); + e.stopPropagation(); }); document.addEventListener("mouseup", () => { if (isDragging) { + console.log("[layout] mouseup - конец перетаскивания"); isDragging = false; document.body.style.cursor = "default"; document.body.style.userSelect = ""; - // Сохраняем пропорции - const total = window.innerWidth; - const leftWidth = leftPanel.getBoundingClientRect().width; - const ratio = leftWidth / total; - localStorage.setItem('layoutRatio', ratio.toString()); + // Сохраняем пропорции только если камера открыта + if (!rightPanel.classList.contains("hidden")) { + const total = window.innerWidth; + const leftWidth = leftPanel.getBoundingClientRect().width; + const ratio = leftWidth / total; + localStorage.setItem('layoutRatio', ratio.toString()); + } } }); - // ЕДИНСТВЕННЫЙ обработчик mousemove document.addEventListener("mousemove", (e) => { if (!isDragging) return; - if (rightPanel.classList.contains("hidden")) return; // Не ресайзим если камера скрыта + if (rightPanel.classList.contains("hidden")) return; const total = window.innerWidth; let leftWidth = e.clientX; - // Минимальные размеры const minWidth = 300; if (leftWidth < minWidth) leftWidth = minWidth; if (leftWidth > total - minWidth) leftWidth = total - minWidth; const rightWidth = total - leftWidth - dragBar.offsetWidth; - leftPanel.style.flex = "none"; - rightPanel.style.flex = "none"; - leftPanel.style.width = leftWidth + "px"; - rightPanel.style.width = rightWidth + "px"; + leftPanel.style.flex = `0 0 ${leftWidth}px`; + leftPanel.style.width = `${leftWidth}px`; + rightPanel.style.flex = `0 0 ${rightWidth}px`; + rightPanel.style.width = `${rightWidth}px`; }); - // Адаптация при ресайзе окна window.addEventListener("resize", () => { if (rightPanel.classList.contains("hidden")) return; @@ -76,17 +85,26 @@ function applyRatio(ratio) { const leftWidth = Math.floor(total * ratio); const rightWidth = total - leftWidth - dragBar.offsetWidth; - leftPanel.style.flex = "none"; - rightPanel.style.flex = "none"; - leftPanel.style.width = leftWidth + "px"; - rightPanel.style.width = rightWidth + "px"; + leftPanel.style.flex = `0 0 ${leftWidth}px`; + leftPanel.style.width = `${leftWidth}px`; + rightPanel.style.flex = `0 0 ${rightWidth}px`; + rightPanel.style.width = `${rightWidth}px`; } export function updateResizerVisibility() { - if (!dragBar) return; - if (rightPanel?.classList.contains("hidden")) { + if (!dragBar || !rightPanel) return; + + if (rightPanel.classList.contains("hidden")) { dragBar.classList.add("hidden"); + // Сбрасываем инлайн-стили левой панели, чтобы CSS flex заработал + leftPanel.style.flex = ""; + leftPanel.style.width = ""; } else { dragBar.classList.remove("hidden"); + // Восстанавливаем сохранённые пропорции + const savedRatio = localStorage.getItem('layoutRatio'); + if (savedRatio) { + applyRatio(parseFloat(savedRatio)); + } } } \ No newline at end of file