Return and pass around clock skew to be used in latency calculations.

Closes #1920

webroot/js/components/latencyCompensator.js

@@ -58,6 +58,7 @@ class LatencyCompensator {
     this.playbackRate = 1.0;
     this.lastJumpOccurred = null;
     this.startupTime = new Date();
+    this.clockSkewMs = 0;
 
     this.player.on('playing', this.handlePlaying.bind(this));
     this.player.on('error', this.handleError.bind(this));
@@ -68,6 +69,15 @@ class LatencyCompensator {
     this.player.on('canplay', this.handlePlaying.bind(this));
   }
 
+  // To keep our client clock in sync with the server clock to determine
+  // accurate latency the clock skew should be set here to be used in
+  // the calculation. Otherwise if somebody's client clock is significantly
+  // off it will have a very incorrect latency determination and make bad
+  // decisions.
+  setClockSkew(skewMs) {
+    this.clockSkewMs = skewMs;
+  }
+
   // This is run on a timer to check if we should be compensating for latency.
   check() {
     // We have an arbitrary delay at startup to allow the player to run
@@ -167,7 +177,7 @@ class LatencyCompensator {
       );
 
       const segmentTime = segment.dateTimeObject.getTime();
-      const now = new Date().getTime();
+      const now = new Date().getTime() + this.clockSkewMs;
       const latency = now - segmentTime;
 
       // Since the calculation of latency is based on clock times, it's possible
@@ -190,12 +200,13 @@ class LatencyCompensator {
           latency > maxLatencyThreshold + MAX_JUMP_LATENCY
         ) {
           const jumpAmount = latency / 1000 - segment.duration * 3;
-          console.log('jump amount', jumpAmount);
           const seekPosition = this.player.currentTime() + jumpAmount;
           console.log(
             'latency',
             latency / 1000,
-            'jumping to live from ',
+            'jumping',
+            jumpAmount,
+            'to live from ',
             this.player.currentTime(),
             ' to ',
             seekPosition
@@ -253,9 +264,9 @@ class LatencyCompensator {
         this.enabled,
         'running: ',
         this.running,
-        'timeout: ',
-        this.inTimeout,
-        'buffers: ',
+        'skew: ',
+        this.clockSkewMs,
+        'rebuffer events: ',
         this.bufferingCounter
       );
     } catch (err) {

webroot/js/components/player.js

@@ -57,6 +57,8 @@ class OwncastPlayer {
     this.hasStartedPlayback = false;
     this.latencyCompensatorEnabled = false;
 
+    this.clockSkewMs = 0;
+
     // bind all the things because safari
     this.startPlayer = this.startPlayer.bind(this);
     this.handleReady = this.handleReady.bind(this);
@@ -92,6 +94,18 @@ class OwncastPlayer {
     this.vjsPlayer.ready(this.handleReady);
   }
 
+  setClockSkew(skewMs) {
+    this.clockSkewMs = skewMs;
+
+    if (this.playbackMetrics) {
+      this.playbackMetrics.setClockSkew(skewMs);
+    }
+
+    if (this.latencyCompensator) {
+      this.latencyCompensator.setClockSkew(skewMs);
+    }
+  }
+
   setupPlayerCallbacks(callbacks) {
     const { onReady, onPlaying, onEnded, onError } = callbacks;
 
@@ -116,6 +130,7 @@ class OwncastPlayer {
 
   setupPlaybackMetrics() {
     this.playbackMetrics = new PlaybackMetrics(this.vjsPlayer, videojs);
+    this.playbackMetrics.setClockSkew(this.clockSkewMs);
   }
 
   setupLatencyCompensator() {
@@ -139,6 +154,7 @@ class OwncastPlayer {
 
   startLatencyCompensator() {
     this.latencyCompensator = new LatencyCompensator(this.vjsPlayer);
+    this.playbackMetrics.setClockSkew(this.clockSkewMs);
     this.latencyCompensator.enable();
     this.latencyCompensatorEnabled = true;
     this.setLatencyCompensatorItemTitle('disable minimized latency');