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

Reviewed-on: #12

package-lock.json

@@ -13,6 +13,7 @@
         "echarts-for-react": "^3.0.2",
         "keycloak-js": "^26.2.3",
         "lucide-react": "^0.468.0",
+        "mpegts.js": "^1.8.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.18.0"
@@ -1234,6 +1235,12 @@
         "react": "^15.0.0 || >=16.0.0"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2014,6 +2021,16 @@
         "node": "*"
       }
     },
+    "node_modules/mpegts.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
+      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "webworkify-webpack": "github:xqq/webworkify-webpack"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2554,6 +2571,11 @@
         }
       }
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "echarts-for-react": "^3.0.2",
     "keycloak-js": "^26.2.3",
     "lucide-react": "^0.468.0",
+    "mpegts.js": "^1.8.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.18.0"

src/app/router.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-route
 import { EdgeCurrentPage } from '../features/edge-detail/EdgeCurrentPage';
 import { EdgeDetailPage } from '../features/edge-detail/EdgeDetailPage';
 import { EdgeHistoryPage } from '../features/edge-detail/EdgeHistoryPage';
+import { EdgeVideoPage } from '../features/edge-detail/EdgeVideoPage';
 import { EdgesDashboard } from '../features/edges-dashboard/EdgesDashboard';
 
 function DashboardRoute() {
@@ -19,6 +20,7 @@ export function AppRouter() {
         <Route path="/edges/:edgeId" element={<EdgeDetailPage />} />
         <Route path="/edges/:edgeId/archive" element={<EdgeHistoryPage />} />
         <Route path="/edges/:edgeId/indicators" element={<EdgeCurrentPage />} />
+        <Route path="/edges/:edgeId/video" element={<EdgeVideoPage />} />
         <Route path="*" element={<Navigate to="/edges" replace />} />
       </Routes>
     </BrowserRouter>

src/components/CameraView.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react';
+
+type CameraViewProps = {
+  title?: string;
+  wsUrl: string;
+};
+
+export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    let player: import('mpegts.js').default.Player | null = null;
+    let cancelled = false;
+
+    if (!video) {
+      return;
+    }
+
+    const clearError = () => setError(null);
+    video.addEventListener('playing', clearError);
+    setError(null);
+
+    void import('mpegts.js').then(({ default: mpegts }) => {
+      if (cancelled) {
+        return;
+      }
+
+      if (!mpegts.isSupported()) {
+        setError('Браузер не поддерживает MPEG-TS поток');
+        return;
+      }
+
+      player = mpegts.createPlayer(
+        { type: 'mpegts', isLive: true, url: wsUrl },
+        { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
+      );
+
+      player.attachMediaElement(video);
+      player.load();
+
+      const playResult = player.play();
+      if (playResult instanceof Promise) {
+        void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      video.removeEventListener('playing', clearError);
+      player?.pause();
+      player?.unload();
+      player?.detachMediaElement();
+      player?.destroy();
+    };
+  }, [wsUrl]);
+
+  return (
+    <article className="camera-view">
+      <video ref={videoRef} className="camera-view__video" controls autoPlay muted playsInline />
+      <div className="camera-view__caption">
+        <strong>{title}</strong>
+        <span>{wsUrl}</span>
+      </div>
+      {error ? <div className="camera-view__error">{error}</div> : null}
+    </article>
+  );
+}

src/components/CameraViewsContainer.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+type CameraViewsContainerProps = PropsWithChildren;
+
+export function CameraViewsContainer({ children }: CameraViewsContainerProps) {
+  return <div className="camera-views-grid">{children}</div>;
+}

src/entities/camera/api.ts

@@ -0,0 +1,7 @@
+import { getJson } from '../../shared/api/http';
+import { cloudApiUrl } from '../../shared/config/env';
+import type { CameraResponse } from './types';
+
+export function getCameras(edge: string): Promise<CameraResponse> {
+  return getJson<CameraResponse>(cloudApiUrl, '/camera', { edge });
+}

src/entities/camera/types.ts

@@ -0,0 +1,9 @@
+export type CameraItem = {
+  protocol: string;
+  source: string;
+};
+
+export type CameraResponse = {
+  edge: string;
+  items: CameraItem[];
+};

src/features/edge-detail/EdgeVideoPage.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getCameras } from '../../entities/camera/api';
+import { EdgePageLayout } from './components/EdgePageLayout';
+import { VideoView } from './components/VideoView';
+
+export function EdgeVideoPage() {
+  const { edgeId = '' } = useParams();
+  const cameras = useQuery({
+    queryKey: ['camera', edgeId],
+    queryFn: () => getCameras(edgeId),
+    enabled: Boolean(edgeId),
+  });
+  const cameraItems = useMemo(() => cameras.data?.items ?? [], [cameras.data?.items]);
+
+  return (
+    <EdgePageLayout
+      currentEventsConnected={false}
+      edgeId={edgeId}
+      view="video"
+      onRefresh={() => void cameras.refetch()}
+    >
+      <VideoView cameras={cameraItems} loading={cameras.isPending} isError={cameras.isError} error={cameras.error} />
+    </EdgePageLayout>
+  );
+}

src/features/edge-detail/components/EdgeSidebar.tsx

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Video } from 'lucide-react';
 import type { DetailView } from '../types';
 
 type EdgeSidebarProps = {
@@ -56,6 +56,14 @@ export function EdgeSidebar({ collapsed, edgePath, view, onNavigate, onToggleCol
           <Activity size={18} />
           <span className="nav-label">Показатели</span>
         </button>
+        <button
+          className={`nav-item nav-item--button ${view === 'video' ? 'nav-item--active' : ''}`}
+          type="button"
+          onClick={() => onNavigate(`${edgePath}/video`)}
+        >
+          <Video size={18} />
+          <span className="nav-label">Видео</span>
+        </button>
       </nav>
     </aside>
   );

src/features/edge-detail/components/VideoView.tsx

@@ -0,0 +1,46 @@
+import { Video } from 'lucide-react';
+import { CameraView } from '../../../components/CameraView';
+import { CameraViewsContainer } from '../../../components/CameraViewsContainer';
+import type { CameraItem } from '../../../entities/camera/types';
+
+type VideoViewProps = {
+  cameras: CameraItem[];
+  error: unknown;
+  isError: boolean;
+  loading: boolean;
+};
+
+function createWsUrl(camera: CameraItem): string {
+  const protocol = camera.protocol.replace(/:\/?\/?$/, '');
+  const source = camera.source.replace(/^\/\//, '');
+  return `${protocol}://${source}`;
+}
+
+export function VideoView({ cameras, error, isError, loading }: VideoViewProps) {
+  return (
+    <section className="video-section">
+      <div className="section-header">
+        <div>
+          <span className="page-kicker">
+            <Video size={14} />
+            Видео
+          </span>
+          <h2>Видеопотоки буровой</h2>
+        </div>
+      </div>
+
+      {loading ? <div className="empty-panel">Загрузка камер...</div> : null}
+      {isError ? <div className="empty-panel">Не удалось загрузить камеры: {String(error)}</div> : null}
+      {!loading && !isError && cameras.length === 0 ? <div className="empty-panel">Камеры для этой буровой не настроены</div> : null}
+
+      {!loading && !isError && cameras.length > 0 ? (
+        <CameraViewsContainer>
+          {cameras.map((camera, index) => {
+            const wsUrl = createWsUrl(camera);
+            return <CameraView key={`${camera.protocol}:${camera.source}`} title={`Камера ${index + 1}`} wsUrl={wsUrl} />;
+          })}
+        </CameraViewsContainer>
+      ) : null}
+    </section>
+  );
+}

src/features/edge-detail/types.ts

@@ -1 +1 @@
-export type DetailView = 'overview' | 'archive' | 'indicators';
+export type DetailView = 'overview' | 'archive' | 'indicators' | 'video';

src/styles/detail.css

@@ -2,4 +2,5 @@
 @import './detail/overview.css';
 @import './detail/indicators.css';
 @import './detail/archive.css';
+@import './detail/video.css';
 @import './detail/electrical.css';

src/styles/detail/video.css

@@ -0,0 +1,87 @@
+.video-section {
+  min-height: 0;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background:
+    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 38%),
+    linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(2, 6, 23, 0.78));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 18px 36px rgba(0, 0, 0, 0.28);
+}
+
+.camera-views-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.camera-view {
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  border: 1px solid rgba(88, 103, 121, 0.42);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
+    #000;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 10px 22px rgba(0, 0, 0, 0.32);
+}
+
+.camera-view__video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: block;
+  background: #000;
+  object-fit: contain;
+}
+
+.camera-view__caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 0 10px;
+  border-top: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(2, 6, 23, 0.88);
+  color: #cbd5e1;
+}
+
+.camera-view__caption strong,
+.camera-view__caption span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.camera-view__caption strong {
+  flex: 0 0 auto;
+  color: #f8fafc;
+  font-size: 0.82rem;
+}
+
+.camera-view__caption span {
+  font-size: 0.72rem;
+}
+
+.camera-view__error {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  background: rgba(2, 6, 23, 0.82);
+  color: #fca5a5;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .camera-views-grid {
+    grid-template-columns: 1fr;
+  }
+}