CODEWITHSUNDEEP
angularjshtmlvideovideo-streaminghtml5-video
syndac
syndac

Reputation: 49

How to keep HTML5 live video stream in sync after connection lags?

I'm building a small web app that includes an IP cam video. I stream via the HTML5 code:

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

The video is hosted on my PC using Netcam Studio and is in WebM format.

For the web app, it's important that the video is as close to real-time as possible. I'm sort of achieving this by lowering the streaming quality and fps. However, after a few hours of streaming, it can be up to 15 seconds behind real-time.

What's the best way to keep it current? I figure I could reload it every few minutes but wasn't sure if there was a better way.

Most of my work is done in AngularJS, if that affects your answer.

Thanks!

Upvotes: 0

Views: 946

Answers (1)

Rudolfs Bundulis
Rudolfs Bundulis

Reputation: 11944

You can periodically check the buffered property of the HTML5 video element and compare it against the currentTime property. If the buffered range is bigger than some delta just set the current time to some value near the end of the buffered range to seek closer to the end. At least this helped us with a real-time MP4 video feed.

Chrome had a bug that I reported where the current time was not properly updated in case of MP4, you should check if your ogg video suffers from the same, then this solution will not help.

Upvotes: 1

Related Questions