finalize video streaming issues

app/VIDEO.md

@@ -0,0 +1,96 @@
+Финальные требования и настройки у нас сейчас такие.
+
+## Финальный пресет чанкования ffmpeg (RTSP → MPEG‑TS → stdout)
+
+Мы остановились на сценарии, где ffmpeg:
+
+- тянет RTSP **по TCP** с камер,  
+- минимизирует внутреннюю буферизацию и время старта,  
+- не перекодирует видео (копирует H.264 как есть); если возникнут проблемы с нагрузкой на сеть, можно поискать варианты снизить; но на данном этапе важнее "накормить" видеобуфер воспроизведения хоть чем-нибудь;
+- выдаёт результат в **stdout (`pipe:1`)**, откуда его забирает mqtt транспорт.
+
+Финальный набор аргументов:
+
+```js
+[
+  '-hide_banner',
+  '-fflags', 'nobuffer',          // не буферировать при probe stream info
+  '-flags', 'low_delay',          // включить low-delay на уровне декодера
+  '-analyzeduration', '100000',   // ограничить анализ потока 100 ms (уменьшить стартовую задержку)
+  '-probesize', '32768',          // зондировать только 32 KB (быстрее старт, меньше буфера)
+  '-flush_packets', '1',          // сразу сбрасывать пакеты, не копить их внутри muxer'а
+
+  '-rtsp_transport', 'tcp',       // тянуть RTSP по TCP (надёжнее на плохой сети)
+  '-i', 'rtsp://admin:admin@192.168.0.11:554/live/sub', // sub-поток камеры
+
+  '-an',                          // отключить аудио — нужен только видеофрейм
+  '-c:v', 'copy',                 // не перекодировать видео, просто копировать кадры
+  '-f', 'mpegts',                 // контейнер MPEG-TS для дальнейшего трансмультиплексирования
+  '-mpegts_flags', 'resend_headers', // периодически повторять заголовки для надёжного декода
+  'pipe:1'                        // выводить поток в stdout (дальше забирает твой транспорт)
+]
+```
+
+Ключевые моменты:
+
+- `-c:v copy` сохраняет оригинальный кадр и GOP камеры — минимум задержки и вычислительной нагрузки.  
+- `-fflags nobuffer + -flags low_delay + -flush_packets 1` минимизируют буферизацию и увеличивают «прозрачность» для твоего транспорта.  
+- `-rtsp_transport tcp` это про **вход** (камера → ffmpeg), а `pipe:1` — про **выход** (ffmpeg → mqtt).
+
+***
+
+## Финальный пресет воспроизведения (mpegts.js + HTML5 video)
+
+На клиенте мы на данном этапе определяемся работать как с «live‑видео с буфером», а не как с чистым real‑time:
+
+- формат источника: **MPEG‑TS/H.264** по WebSocket;  
+- плеер: `mpegts.js`, режим `type: 'mpegts', isLive: true`;  
+- буфер: небольшой stash + несколько секунд latency для сглаживания провалов.
+
+Финальные параметры инициализации:
+
+```js
+const wsUrl = 'wss://...';
+
+const player = mpegts.createPlayer(
+  {
+    type: 'mpegts',         // MPEG-TS поток по WS
+    isLive: true,
+    url: wsUrl,
+    hasAudio: false,        // видео без аудио
+  },
+  {
+    enableWorker: true,
+
+    // Включаем stash, чтобы сглаживать редкий / рваный поток
+    enableStashBuffer: true,
+    stashInitialSize: 512,              // немного увеличенный stash для накопления
+
+    autoCleanupSourceBuffer: true,
+    autoCleanupMaxBackwardDuration: 10, // держим минимум истории
+    autoCleanupMinBackwardDuration: 5,
+
+    // Разрешаем latency-chasing с «комфортной» задержкой
+    liveBufferLatencyChasing: true,
+    liveBufferLatencyMaxLatency: 5.0,   // целевая задержка до ~5 секунд
+    liveBufferLatencyMinRemain: 2.0,    // оставляем ~2 секунды буфера после сброса
+
+    liveSync: false,                    // не пытаемся мягко догонять — приоритет стабильности
+    lazyLoad: false,
+    deferLoadAfterSourceOpen: false,
+  }
+);
+
+player.attachMediaElement(document.getElementById('v'));
+player.load();
+player.play();
+```
+
+Смысл этих настроек:
+
+- **Stash‑buffer включён**: mpegts.js может аккумулировать некоторое количество данных, прежде чем кормить MSE (браузеру), что хорошо при «дырявом» канале.  
+- **Latency‑chasing с MaxLatency ≈ 5 s**: браузер допускает несколько секунд отставания, но не позволяет задержке расти бесконечно; при накоплении лишнего буфера он «подпрыгивает» ближе к live‑позиции, сохраняя `MinRemain` ~2 секунды запаса.  
+- `liveSync: false` — мы не гонимся за минимально возможной задержкой любой ценой, а принимаем небольшой «запас» как разумный компромисс.  
+
+При улучшении канала или выполнениии работ по снижению нагрузки на сеть (уменьшения битрейта, fps) 
+нужно грамотно управлять буфером на стороне клиента (stash + latency).

app/public/index.html

@@ -17,22 +17,22 @@
     const player = mpegts.createPlayer(
       { type: 'mpegts', isLive: true, url: wsUrl, hasAudio: false },
       {
-        enableWorker: true,             // transmuxing в отдельном треде
+        enableWorker: true,
-        enableStashBuffer: true,        // включить stash
-        stashInitialSize: 384,
 
-        autoCleanupSourceBuffer: true,  // не копить старые буферы в MSE
+        // Включаем stash, чтобы сглаживать редкий / рваный поток
-        autoCleanupMaxBackwardDuration: 10,
+        enableStashBuffer: true,
+        stashInitialSize: 512,              // немного увеличенный stash для накопления
+
+        autoCleanupSourceBuffer: true,
+        autoCleanupMaxBackwardDuration: 10, // держим минимум истории
         autoCleanupMinBackwardDuration: 5,
 
-        // liveSync — плавное догоняние через playbackRate, а не жёсткий seek
+        // Разрешаем latency-chasing с «комфортной» задержкой
-        liveSync: true,
+        liveBufferLatencyChasing: true,
-        liveSyncTargetLatency: 4.0,    // target после выравнивания ← дать буферу вырасти
+        liveBufferLatencyMaxLatency: 5.0,   // целевая задержка до ~5 секунд
-        liveSyncMaxLatency: 10.0,      // при плохом интернете даём 10с ← не трогать буфер до 10s
+        liveBufferLatencyMinRemain: 2.0,    // оставляем ~2 секунды буфера после сброса
-        liveSyncPlaybackRate: 1.05,    // ускорение не более 1.2x ← очень мягкое догоняние
-
-        liveBufferLatencyChasing: false,  // включить stash ← убрать конфликтующий механизм
 
+        liveSync: false,                    // не пытаемся мягко догонять — приоритет стабильности
         lazyLoad: false,
         deferLoadAfterSourceOpen: false,
       }

app/src/index.ts

@@ -2,7 +2,6 @@ import './handlers/index.js'
 import './http/server.js'
 import './mqtt.js'
 import './stream/edge-chunk-relay.js'
-import './stream/ws-pipe-relay.js'
 
 import { log } from './helpers/log.js'
 

app/src/mqtt.ts

@@ -6,7 +6,12 @@ import { routeMessage } from './router.js'
 
 const mqttUrl = process.env.MQTT_URL as string
 
-export const mqttClient = mqtt.connect(mqttUrl)
+export const mqttClient = mqtt.connect(mqttUrl, {
+  clean: true,
+  queueQoSZero: false,
+  reconnectPeriod: 1000,
+  connectTimeout: 10000,
+});
 
 mqttClient.on('connect', () => {
   log('mqtt.connected', { url: mqttUrl })

app/src/stream/edge-chunk-relay.ts

@@ -21,6 +21,7 @@ function getClients(cameraId: string): Set<WebSocket> {
 
 wss.on('connection', (ws: WebSocket, req: IncomingMessage) => {
   log(`ws.connection ${req.url}`);
+  req.socket.setNoDelay(true)
   const cameraId = req.url ? lastTopicSegment(req.url) : 'v1';
 
   const clients = getClients(cameraId);

app/src/stream/ws-pipe-relay.ts

@@ -1,94 +0,0 @@
-import type { IncomingMessage } from 'http'
-import { WebSocket, WebSocketServer } from 'ws'
-
-import { log } from '../helpers/log.js'
-import { lastTopicSegment } from '../helpers/topic-match.js'
-
-const wsPipePort = Number(process.env.WS_PIPE_PORT)
-const LOG_INTERVAL_MS = 10_000
-
-const wss = new WebSocketServer({ port: wsPipePort, perMessageDeflate: false })
-
-const producersByChannel = new Map<string, WebSocket>()
-const viewersByChannel = new Map<string, Set<WebSocket>>()
-const lastLogByChannel = new Map<string, number>()
-
-function getViewers(channel: string): Set<WebSocket> {
-  let viewers = viewersByChannel.get(channel)
-  if (!viewers) {
-    viewers = new Set()
-    viewersByChannel.set(channel, viewers)
-  }
-  return viewers
-}
-
-function broadcast(channel: string, chunk: Buffer): void {
-  const clients = viewersByChannel.get(channel)
-  if (!clients) return
-  for (const client of clients) {
-    if (client.readyState === WebSocket.OPEN) {
-      client.send(chunk)
-    }
-  }
-}
-
-function logThroughput(channel: string, bytes: number): void {
-  const now = Date.now()
-  const lastLog = lastLogByChannel.get(channel) ?? 0
-  if (now - lastLog >= LOG_INTERVAL_MS) {
-    log(`pipe.in [${channel}] ↑ ${bytes}B`)
-    lastLogByChannel.set(channel, now)
-  }
-}
-
-function handleProducer(ws: WebSocket, channel: string): void {
-  const existing = producersByChannel.get(channel)
-  if (existing?.readyState === WebSocket.OPEN) {
-    existing.close(1000, 'replaced')
-  }
-  producersByChannel.set(channel, ws)
-
-  ws.on('message', (data, isBinary) => {
-    if (!isBinary) return
-    const chunk = Buffer.isBuffer(data) ? data : Buffer.from(data as ArrayBuffer)
-    logThroughput(channel, chunk.length)
-    broadcast(channel, chunk)
-  })
-
-  ws.on('close', () => {
-    if (producersByChannel.get(channel) === ws) {
-      producersByChannel.delete(channel)
-    }
-  })
-}
-
-function handleViewer(ws: WebSocket, channel: string, path: string): void {
-  log(`pipe.out.connection ${path}`)
-  const viewers = getViewers(channel)
-  viewers.add(ws)
-
-  ws.on('close', () => {
-    viewers.delete(ws)
-    if (viewers.size === 0) viewersByChannel.delete(channel)
-  })
-}
-
-wss.on('connection', (ws: WebSocket, req: IncomingMessage) => {
-  const path = req.url?.split('?')[0] ?? ''
-
-  if (path.startsWith('/in/')) {
-    handleProducer(ws, lastTopicSegment(path))
-    return
-  }
-
-  if (path.startsWith('/out/')) {
-    handleViewer(ws, lastTopicSegment(path), path)
-    return
-  }
-
-  ws.close(1008, 'unknown path')
-})
-
-wss.on('listening', () => {
-  log('pipe.server_started', { port: wsPipePort })
-})

docker-compose.yml

@@ -17,12 +17,10 @@ services:
     expose:
       - 80 
       - 9090 
-      - 9091
     environment:
       MQTT_URL: mqtt://mosquitto:1883
-      HTTP_PORT: 80 # http port for video previewiong page
+      HTTP_PORT: 80 # http port for video previewing page
       WS_PORT: 9090 # WebSocket port for video streaming
-      WS_PIPE_PORT: 9091 # WebSocket port for incoming and outgoing binary data
       CLOUD_INGEST_URL: ${CLOUD_INGEST_URL}
       CLOUD_INGEST_API_KEY: ${CLOUD_INGEST_API_KEY}
       DEMO_CLOUD_INGEST_URL: ${DEMO_CLOUD_INGEST_URL}

mosquitto/config/mosquitto.conf

@@ -1,6 +1,8 @@
 listener 1883
 allow_anonymous true
 
+set_tcp_nodelay true          # выключает Nagle на всех сокетах брокера
+
 persistence true
 persistence_location /mosquitto/data/