Compare commits
3 Commits
ba8bb6940b
...
bur-37
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
01d05b4331 | ||
| ca78c0b17b | |||
|
|
19ca8d0885 |
@@ -1,3 +1,4 @@
|
||||
import mpegts from 'mpegts.js';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
type CameraViewProps = {
|
||||
@@ -11,8 +12,7 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
let player: import('mpegts.js').default.Player | null = null;
|
||||
let cancelled = false;
|
||||
let player: ReturnType<typeof mpegts.createPlayer> | null = null;
|
||||
|
||||
if (!video) {
|
||||
return;
|
||||
@@ -22,32 +22,27 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
|
||||
video.addEventListener('playing', clearError);
|
||||
setError(null);
|
||||
|
||||
void import('mpegts.js').then(({ default: mpegts }) => {
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
if (!mpegts.isSupported()) {
|
||||
setError('Браузер не поддерживает MPEG-TS поток');
|
||||
return () => {
|
||||
video.removeEventListener('playing', clearError);
|
||||
};
|
||||
}
|
||||
|
||||
if (!mpegts.isSupported()) {
|
||||
setError('Браузер не поддерживает MPEG-TS поток');
|
||||
return;
|
||||
}
|
||||
player = mpegts.createPlayer(
|
||||
{ type: 'mpegts', isLive: true, url: wsUrl },
|
||||
{ liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
|
||||
);
|
||||
|
||||
player = mpegts.createPlayer(
|
||||
{ type: 'mpegts', isLive: true, url: wsUrl },
|
||||
{ liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
|
||||
);
|
||||
player.attachMediaElement(video);
|
||||
player.load();
|
||||
|
||||
player.attachMediaElement(video);
|
||||
player.load();
|
||||
|
||||
const playResult = player.play();
|
||||
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 () => {
|
||||
cancelled = true;
|
||||
video.removeEventListener('playing', clearError);
|
||||
player?.pause();
|
||||
player?.unload();
|
||||
|
||||
@@ -60,7 +60,7 @@ function formatChartValue(value: number): string {
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
/** Показывает одно значение, если min/avg/max визуально совпадают. */
|
||||
/** Форматирует значение tooltip: одно число для min=avg=max или среднее с диапазоном. */
|
||||
function formatTooltipValue(value: AvgPointValue): string {
|
||||
const avg = formatChartValue(value[1]);
|
||||
const min = formatChartValue(value[2]);
|
||||
@@ -70,7 +70,7 @@ function formatTooltipValue(value: AvgPointValue): string {
|
||||
return avg;
|
||||
}
|
||||
|
||||
return `min ${min} · avg ${avg} · max ${max}`;
|
||||
return `сред. ${avg} (${min} .. ${max})`;
|
||||
}
|
||||
|
||||
function isAvgPointValue(value: unknown): value is AvgPointValue {
|
||||
|
||||
Reference in New Issue
Block a user