Как сохранить поток видео в реальном времени HTML5 в синхронизации после задержки соединения?

Question

Я создаю небольшое веб-приложение, которое включает видео с IP-камерой. Я поток через код HTML5:

<video muted id="video_0" src="SOURCEURL" type="video/ogg" autoplay="autoplay" width="100%" preload="none" controls/> 

видео размещается на моем компьютере с помощью Netcam Studio, и в формате WebM.

Для веб-приложения важно, чтобы видео было как можно ближе к реальному времени. Я как бы добился этого, снизив качество потоковой передачи и fps. Однако, через несколько часов потоковой передачи, это может занять до 15 секунд в реальном времени.

Каков наилучший способ сохранить его в актуальном состоянии? Я полагаю, что могу перезагрузить его каждые несколько минут, но не был уверен, что есть лучший способ.

Большая часть моей работы выполняется в AngularJS, если это влияет на ваш ответ.

Спасибо!

Answer 1

Вы можете периодически протестировать объект buffered элемента видео HTML5 и сравнить его с currentTime. Если диапазон буферизации больше, чем какой-либо дельта, просто установите текущее время на некоторое значение вблизи конца буферизованного диапазона, чтобы искать ближе к концу. По крайней мере, это помогло нам с видео в реальном времени MP4.

Хром имел bug, что я сообщил, что текущее время не было должным образом обновлено в случае MP4, вы должны проверить, страдает ли ваше видео ogg от того же самого, то это решение не поможет.