46 lines
1.8 KiB
HTML
46 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>edge5 video relay</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mpegts.js/dist/mpegts.js"></script>
|
||
<style>
|
||
body { margin: 0; background: #000; }
|
||
#v { display: block; width: 100vw; height: 100vh; object-fit: contain; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<video id="v" controls autoplay muted></video>
|
||
<script>
|
||
const cameraId = new URLSearchParams(location.search).get('camera') ?? 'v1';
|
||
const wsUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/${cameraId}`;
|
||
const player = mpegts.createPlayer(
|
||
{ type: 'mpegts', 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,
|
||
}
|
||
);
|
||
player.attachMediaElement(document.getElementById('v'))
|
||
player.load()
|
||
player.play()
|
||
</script>
|
||
</body>
|
||
</html>
|