Compare commits
2 Commits
ba8bb6940b
...
ca78c0b17b
| Author | SHA1 | Date | |
|---|---|---|---|
| ca78c0b17b | |||
|
|
19ca8d0885 |
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user