Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f84b15b2d0 | ||
| 688e883996 |
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user