APervov/ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

BUR-58 исправлен import mpegts. #16

Merged
APervov merged 1 commits from bur-58 into dev 2026-07-05 10:05:03 +00:00
Conversation 1 Commits 1 Files Changed 1 +18 -23
1 changed files with 18 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/CameraView.tsx
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(
NBizyaev commented 2026-07-05 13:04:21 +00:00
Review
Copy Link

ах да, тут по видеоблоку БУР-58 есть ещё одна добавка
методом проб и ошибок были определены оптимальные параметры воспроизведения потока

  {
    enableWorker: true,

    // Включаем stash, чтобы сглаживать редкий / рваный поток
    enableStashBuffer: true,
    stashInitialSize: 512,              // немного увеличенный stash для накопления

    autoCleanupSourceBuffer: true,
    autoCleanupMaxBackwardDuration: 10, // держим минимум истории
    autoCleanupMinBackwardDuration: 5,

    // Разрешаем latency-chasing с «комфортной» задержкой
    liveBufferLatencyChasing: true,
    liveBufferLatencyMaxLatency: 5.0,   // целевая задержка до ~5 секунд
    liveBufferLatencyMinRemain: 2.0,    // оставляем ~2 секунды буфера после сброса

    liveSync: false,                    // не пытаемся мягко догонять — приоритет стабильности
    lazyLoad: false,
    deferLoadAfterSourceOpen: false,
  }

то есть чтобы получалось так

const player = mpegts.createPlayer(
  {
    type: 'mpegts',         // MPEG-TS поток по WS
    isLive: true,
    url: wsUrl,
    hasAudio: false,        // видео без аудио
  },
  {
    enableWorker: true,

    // Включаем stash, чтобы сглаживать редкий / рваный поток
    enableStashBuffer: true,
    stashInitialSize: 512,              // немного увеличенный stash для накопления

    autoCleanupSourceBuffer: true,
    autoCleanupMaxBackwardDuration: 10, // держим минимум истории
    autoCleanupMinBackwardDuration: 5,

    // Разрешаем latency-chasing с «комфортной» задержкой
    liveBufferLatencyChasing: true,
    liveBufferLatencyMaxLatency: 5.0,   // целевая задержка до ~5 секунд
    liveBufferLatencyMinRemain: 2.0,    // оставляем ~2 секунды буфера после сброса

    liveSync: false,                    // не пытаемся мягко догонять — приоритет стабильности
    lazyLoad: false,
    deferLoadAfterSourceOpen: false,
  }
);

только их нужно вынести в константу компонента CameraView
и юзать там в строках 33-34 файла src/components/CameraView.tsx

ах да, тут по видеоблоку БУР-58 есть ещё одна добавка методом проб и ошибок были определены оптимальные параметры воспроизведения потока ```ts { enableWorker: true, // Включаем stash, чтобы сглаживать редкий / рваный поток enableStashBuffer: true, stashInitialSize: 512, // немного увеличенный stash для накопления autoCleanupSourceBuffer: true, autoCleanupMaxBackwardDuration: 10, // держим минимум истории autoCleanupMinBackwardDuration: 5, // Разрешаем latency-chasing с «комфортной» задержкой liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 5.0, // целевая задержка до ~5 секунд liveBufferLatencyMinRemain: 2.0, // оставляем ~2 секунды буфера после сброса liveSync: false, // не пытаемся мягко догонять — приоритет стабильности lazyLoad: false, deferLoadAfterSourceOpen: false, } ``` то есть чтобы получалось так ```ts const player = mpegts.createPlayer( { type: 'mpegts', // MPEG-TS поток по WS isLive: true, url: wsUrl, hasAudio: false, // видео без аудио }, { enableWorker: true, // Включаем stash, чтобы сглаживать редкий / рваный поток enableStashBuffer: true, stashInitialSize: 512, // немного увеличенный stash для накопления autoCleanupSourceBuffer: true, autoCleanupMaxBackwardDuration: 10, // держим минимум истории autoCleanupMinBackwardDuration: 5, // Разрешаем latency-chasing с «комфортной» задержкой liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 5.0, // целевая задержка до ~5 секунд liveBufferLatencyMinRemain: 2.0, // оставляем ~2 секунды буфера после сброса liveSync: false, // не пытаемся мягко догонять — приоритет стабильности lazyLoad: false, deferLoadAfterSourceOpen: false, } ); ``` только их нужно вынести в константу компонента CameraView и юзать там в строках 33-34 файла src/components/CameraView.tsx
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();