minimize latency

Issues when playing live broadcasts with HTML5 player on a web page

minimize latency

Postby chmg » Mon Oct 10, 2016 5:29 am

Hi,

at the moment I am trying to replace the old browser plugin with the new HTML5 player.

But now I have a problem. The HTML5 player does too much buffering.
In my case it is very importent to have very low latency from the video source to the browser.

After starting the playback on the HTML5 client I have nearly 3 seconds delay, but after 15 minutes of playback it is already 10 seconds delay.
Is there any way to disable the buffering at the HTML5 client?

Background:
We are developing a IPTV solution with differend STB´s.
For our testers, we have set up a website where they can see the HDMI output of the STB and control it via a virtual remote control.
See a screenshoot at: https://www.ptlda.net/Remcon1.png

It is not good that the tester presses a button on the remote control and sees the result on the stream 10 seconds later.

At this point we have no problem with not so good video quality, artefacts or so on.
With the browser plugin it works perfect.

Regards,
Christian
chmg
 
Posts: 0
Joined: Mon Oct 10, 2016 3:20 am

Re: minimize latency

Postby admin » Mon Oct 10, 2016 10:28 am

Hi,

First of all, The HTML5 player uses MSE (media source extensions) which are still getting improved by browsers. We have also observed this behavior in IE and Edge, but in Chrome/Opera the latency stays constant.
So for now Chrome is a recommended browser.

Secondly, you can add some JavaScript code to your webpage to jump to real-time periodically, to compensate for that issue. Just find video element (for player created with "UnrealPlayer1" it will be "UnrealPlayer1_Video") and do
video.currentTime = video.duration;

Here is the code that will jump to real-time every 30 seconds:

<script type="text/javascript">
if ("MediaSource" in window && "WebSocket" in window)
{
RunPlayer("UnrealPlayer1", 800, 600, "localhost", 5119, false, "webcam", "", false, true, 1, "", false);

setInterval(function ()
{
var video = document.getElementById("UnrealPlayer1_Video");
video.currentTime = video.duration;
}, 30000);
}
</script>
admin
Site Admin
 
Posts: 855
Joined: Fri Aug 21, 2009 10:13 am

Re: minimize latency

Postby chmg » Wed Oct 12, 2016 6:38 am

Hi,

thank you for your replay.

With Chrome the stream works very well.

Additional I found an other prblem at my test setup.
On my test setup I had a LiveServer 9.0.
After update it to 9.5 the stream runs much better on the HTML5 player.

Now we try to integrate the HTML5 player into our application.

Regards,
Christian
chmg
 
Posts: 0
Joined: Mon Oct 10, 2016 3:20 am

Re: minimize latency

Postby admin » Sun Nov 12, 2017 12:19 pm

Another technique that may help to stay close to real time, which can be useful for "real-time" video-only streams,
is to set the player to play with faster rate, like 1.5 or 2. It works nice in Chrome.

var video1 = document.getElementById("UnrealPlayer1_Video");
video1.playbackRate=2;

This will not exhibit the jerkiness of the "jump" to the end of the live feed that you see every 30 seconds...

This appears to play at normal speed and always stay as close to real-time as possible.
admin
Site Admin
 
Posts: 855
Joined: Fri Aug 21, 2009 10:13 am


Return to Playing with HTML5 Player

Who is online

Users browsing this forum: No registered users and 1 guest

cron