3 Commits

Author SHA1 Message Date
Первов Артем
01d05b4331 BUR-37 привел тултип к шаблону "сред. ${avg} (${min} .. ${max})" 2026-07-05 13:29:05 +03:00
ca78c0b17b Merge pull request 'BUR-58 исправлен import mpegts.' (#16) from bur-58 into dev
Reviewed-on: #16
2026-07-05 10:05:03 +00:00
Первов Артем
19ca8d0885 BUR-58 исправлен import mpegts. 2026-07-05 13:03:26 +03:00
2 changed files with 20 additions and 25 deletions

View File

@@ -1,3 +1,4 @@
import mpegts from 'mpegts.js';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
type CameraViewProps = { type CameraViewProps = {
@@ -11,8 +12,7 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
useEffect(() => { useEffect(() => {
const video = videoRef.current; const video = videoRef.current;
let player: import('mpegts.js').default.Player | null = null; let player: ReturnType<typeof mpegts.createPlayer> | null = null;
let cancelled = false;
if (!video) { if (!video) {
return; return;
@@ -22,32 +22,27 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
video.addEventListener('playing', clearError); video.addEventListener('playing', clearError);
setError(null); setError(null);
void import('mpegts.js').then(({ default: mpegts }) => { if (!mpegts.isSupported()) {
if (cancelled) { setError('Браузер не поддерживает MPEG-TS поток');
return; return () => {
} video.removeEventListener('playing', clearError);
};
}
if (!mpegts.isSupported()) { player = mpegts.createPlayer(
setError('Браузер не поддерживает MPEG-TS поток'); { type: 'mpegts', isLive: true, url: wsUrl },
return; { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
} );
player = mpegts.createPlayer( player.attachMediaElement(video);
{ type: 'mpegts', isLive: true, url: wsUrl }, player.load();
{ liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
);
player.attachMediaElement(video); const playResult = player.play();
player.load(); if (playResult instanceof Promise) {
void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
const playResult = player.play(); }
if (playResult instanceof Promise) {
void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
}
});
return () => { return () => {
cancelled = true;
video.removeEventListener('playing', clearError); video.removeEventListener('playing', clearError);
player?.pause(); player?.pause();
player?.unload(); player?.unload();

View File

@@ -60,7 +60,7 @@ function formatChartValue(value: number): string {
}).format(value); }).format(value);
} }
/** Показывает одно значение, если min/avg/max визуально совпадают. */ /** Форматирует значение tooltip: одно число для min=avg=max или среднее с диапазоном. */
function formatTooltipValue(value: AvgPointValue): string { function formatTooltipValue(value: AvgPointValue): string {
const avg = formatChartValue(value[1]); const avg = formatChartValue(value[1]);
const min = formatChartValue(value[2]); const min = formatChartValue(value[2]);
@@ -70,7 +70,7 @@ function formatTooltipValue(value: AvgPointValue): string {
return avg; return avg;
} }
return `min ${min} · avg ${avg} · max ${max}`; return `сред. ${avg} (${min} .. ${max})`;
} }
function isAvgPointValue(value: unknown): value is AvgPointValue { function isAvgPointValue(value: unknown): value is AvgPointValue {