BUR-58 Добавлена поддержка работы с камерой #4 #12

APervov · 2026-07-05T04:07:44Z

APervov commented

2026-07-05 04:07:44 +00:00

Задача

Бэкенд

Таблица camera:

edge — буровая
protocol — например wss
source — хост/путь, например beta.video.drill.greact.ru/ws

Вместе protocol + source = полный адрес потока (как раньше был один url).

GET /api/camera — отдаёт камеры текущей буровой:

SELECT protocol, source FROM camera WHERE edge = ${currentEdge}

Фронтенд

В сайдбаре (рядом с Обзор / Архив / Показатели) — пункт Видео.

Компоненты по аналогии с метриками:

CameraView — одна камера, проп wsUrl (собирается из protocol + source на фронте)
CameraViewsContainer — flex: 2 камеры в ряд, 4 — сетка 2×2 на экран
(по аналогии с MetricWidget в контейнере MetricWidgetsContainer)

Данные с /api/camera → набор CameraView в контейнере.

Образец как показывать данные с такого источника

12345678910111213141516171819202122232425


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>edge5 video relay</title>
  <script src="https://cdn.jsdelivr.net/npm/mpegts.js/dist/mpegts.js"></script>
  <style>
    body { margin: 0; background: #000; }
    #v { display: block; width: 100vw; height: 100vh; object-fit: contain; }
  </style>
</head>
<body>
  <video id="v" controls autoplay muted></video>
  <script>
    const wsUrl = 'wss://где-то.там.ru';
    const player = mpegts.createPlayer(
      { type: 'mpegts', isLive: true, url: wsUrl },
      { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 }
    )
    player.attachMediaElement(document.getElementById('v'))
    player.load()
    player.play()
  </script>
</body>
</html>

Воспроизведение — на React (не vanilla). Референс: https://beta.video.drill.greact.ru/, тестовый поток wss://beta.video.drill.greact.ru/ws.

Что сделано

Добавлен новый пункт меню "Видео" для просмотра камер видеонаблюдения, использован mpegts плеер, для поддержки WebSocket трансляции
Приложил видео с тестированием в PR APervov/cloud-v3#4

# Задача **Бэкенд** Таблица `camera`: - `edge` — буровая - `protocol` — например `wss` - `source` — хост/путь, например `beta.video.drill.greact.ru/ws` Вместе `protocol` + `source` = полный адрес потока (как раньше был один `url`). `GET /api/camera` — отдаёт камеры текущей буровой: `SELECT protocol, source FROM camera WHERE edge = ${currentEdge}` --- **Фронтенд** В сайдбаре (рядом с Обзор / Архив / Показатели) — пункт **Видео**. Компоненты по аналогии с метриками: - `CameraView` — одна камера, проп `wsUrl` (собирается из `protocol` + `source` на фронте) - `CameraViewsContainer` — flex: 2 камеры в ряд, 4 — сетка 2×2 на экран (по аналогии с MetricWidget в контейнере MetricWidgetsContainer) Данные с `/api/camera` → набор `CameraView` в контейнере. Образец как показывать данные с такого источника 12345678910111213141516171819202122232425 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>edge5 video relay</title> <script src="https://cdn.jsdelivr.net/npm/mpegts.js/dist/mpegts.js"></script> <style> body { margin: 0; background: #000; } #v { display: block; width: 100vw; height: 100vh; object-fit: contain; } </style> </head> <body> <video id="v" controls autoplay muted></video> <script> const wsUrl = 'wss://где-то.там.ru'; const player = mpegts.createPlayer( { type: 'mpegts', isLive: true, url: wsUrl }, { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 } ) player.attachMediaElement(document.getElementById('v')) player.load() player.play() </script> </body> </html> ``` Воспроизведение — на React (не vanilla). Референс: [https://beta.video.drill.greact.ru/](https://beta.video.drill.greact.ru/), тестовый поток `wss://beta.video.drill.greact.ru/ws`. # Что сделано - Добавлен новый пункт меню "Видео" для просмотра камер видеонаблюдения, использован mpegts плеер, для поддержки WebSocket трансляции - Приложил видео с тестированием в PR https://git.greact.ru/APervov/cloud-v3/pulls/4

APervov added 2 commits 2026-07-05 04:07:44 +00:00

BUR-58 добавлен видео-блок 6dac1ed2bd

BUR-58 сдвинул плашку информации по камере ниже, чтобы она не перекрывала кнопки плеера 4d31b6d3be

APervov merged commit 5a81a9b78b into dev

2026-07-05 04:07:53 +00:00

APervov referenced this issue from a commit

2026-07-05 04:07:55 +00:00

Merge pull request 'BUR-58 Добавлена поддержка работы с камерой #4' (#12) from bur-58 into dev

NBizyaev reviewed 2026-07-05 08:42:23 +00:00

src/components/CameraView.tsx

						
				@@ -0,0 +11,4 @@

				  useEffect(() => {

				    const video = videoRef.current;

				    let player: import('mpegts.js').default.Player | null = null;

NBizyaev commented

2026-07-05 08:42:23 +00:00

это надо прям через npm install установить в проект

это надо прям через npm install <dependecy> установить в проект

NBizyaev reviewed 2026-07-05 08:46:56 +00:00

src/components/CameraView.tsx

						
				@@ -0,0 +22,4 @@

				    video.addEventListener('playing', clearError);

				    setError(null);

				    void import('mpegts.js').then(({ default: mpegts }) => {

NBizyaev commented

2026-07-05 08:46:56 +00:00

а то у тебя сейчас для каждой камеры подтягивается общая библиотека,
а общая библиотека - на то она и общая библиотека,
чтобы быть в package.json dependencie: {}
и подключаться просто в шапке модуля как import from со всеми остальными import from

а то у тебя сейчас для каждой камеры подтягивается общая библиотека, а общая библиотека - на то она и общая библиотека, чтобы быть в package.json dependencie: {} и подключаться просто в шапке модуля как import from со всеми остальными import from

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: APervov/ui#12