Wie wird der HTML5-Live-Videostream nach Verbindungsverzögerungen synchron gehalten?

Question

Ich baue eine kleine Web-App, die ein IP-Kamera-Video enthält. Ich Stream über den HTML5-Code:

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

Das Video auf meinem PC gehostet wird mit Netcam Studio und ist in WebM-Format.

Für die Web-App ist es wichtig, dass das Video so nah wie möglich an der Echtzeit ist. Ich erreiche das irgendwie, indem ich die Streaming-Qualität und fps reduziere. Nach einigen Stunden Streaming kann es jedoch bis zu 15 Sekunden hinter Echtzeit liegen.

Was ist der beste Weg, um es aktuell zu halten? Ich denke, ich könnte es alle paar Minuten nachladen, war mir aber nicht sicher, ob es einen besseren Weg gab.

Die meisten meiner Arbeit ist in AngularJS getan, wenn das Ihre Antwort betrifft.

Danke!

Answer 1

Sie können die Eigenschaft buffered des HTML5-Videoelements regelmäßig überprüfen und mit der Eigenschaft currentTime vergleichen. Wenn der gepufferte Bereich größer als ein Delta ist, setzen Sie einfach die aktuelle Zeit auf einen Wert nahe dem Ende des gepufferten Bereichs, um näher am Ende zu suchen. Zumindest half uns das mit einem Echtzeit-MP4-Video-Feed.

Chrome hatte eine bug, dass ich berichtet habe, wo die aktuelle Zeit im Falle von MP4 nicht richtig aktualisiert wurde, sollten Sie überprüfen, ob Ihr ogg-Video von demselben leidet, dann wird diese Lösung nicht helfen.