Merge pull request 'BUR-58 Добавлена оптимальная конфигурация для потока видео' (#20) from bur-58 into dev

Reviewed-on: #20
This commit was merged in pull request #20.
This commit is contained in:
2026-07-05 14:46:19 +00:00

View File

@@ -6,6 +6,21 @@ type CameraViewProps = {
wsUrl: string; wsUrl: string;
}; };
const CAMERA_PLAYER_CONFIG = {
enableWorker: true,
enableStashBuffer: true,
stashInitialSize: 512,
autoCleanupSourceBuffer: true,
autoCleanupMaxBackwardDuration: 10,
autoCleanupMinBackwardDuration: 5,
liveBufferLatencyChasing: true,
liveBufferLatencyMaxLatency: 5.0,
liveBufferLatencyMinRemain: 2.0,
liveSync: false,
lazyLoad: false,
deferLoadAfterSourceOpen: false,
};
export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) { export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
const videoRef = useRef<HTMLVideoElement | null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -13,6 +28,7 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
useEffect(() => { useEffect(() => {
const video = videoRef.current; const video = videoRef.current;
let player: ReturnType<typeof mpegts.createPlayer> | null = null; let player: ReturnType<typeof mpegts.createPlayer> | null = null;
const handlePlayerError = () => setError('Ошибка видеопотока');
if (!video) { if (!video) {
return; return;
@@ -30,20 +46,22 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
} }
player = mpegts.createPlayer( player = mpegts.createPlayer(
{ type: 'mpegts', isLive: true, url: wsUrl }, { type: 'mpegts', isLive: true, url: wsUrl, hasAudio: false },
{ liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 }, CAMERA_PLAYER_CONFIG,
); );
player.on(mpegts.Events.ERROR, handlePlayerError);
player.attachMediaElement(video); player.attachMediaElement(video);
player.load(); player.load();
const playResult = player.play(); const playResult = player.play();
if (playResult instanceof Promise) { if (playResult instanceof Promise) {
void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение')); void playResult.then(() => setError(null)).catch(() => undefined);
} }
return () => { return () => {
video.removeEventListener('playing', clearError); video.removeEventListener('playing', clearError);
player?.off(mpegts.Events.ERROR, handlePlayerError);
player?.pause(); player?.pause();
player?.unload(); player?.unload();
player?.detachMediaElement(); player?.detachMediaElement();