Add an option to calculate bandwidth by using Chromium's networkInfo API

index.html

@@ -166,6 +166,11 @@
           <label class="form-check-label" for="pixel-diff-selector">[EXPERIMENTAL] Use the Pixel difference resolution selector (reloads player)</label>
         </div>
 
+        <div class="form-check">
+          <input id=network-info type="checkbox" class="form-check-input">
+          <label class="form-check-label" for="network-info">[EXPERIMENTAL] Use networkInfo API for bandwidth estimations (reloads player)</label>
+        </div>
+
         <div class="form-check">
           <input id=override-native type="checkbox" class="form-check-input" checked>
           <label class="form-check-label" for="override-native">Override Native (reloads player)</label>

scripts/index.js

@@ -447,6 +447,7 @@
     'buffer-water',
     'exact-manifest-timings',
     'pixel-diff-selector',
+    'network-info',
     'override-native',
     'preload',
     'mirror-source'
@@ -499,6 +500,7 @@
       'override-native',
       'liveui',
       'pixel-diff-selector',
+      'network-info',
       'exact-manifest-timings'
     ].forEach(function(name) {
       stateEls[name].addEventListener('change', function(event) {
@@ -565,7 +567,8 @@
               experimentalBufferBasedABR: getInputValue(stateEls['buffer-water']),
               experimentalLLHLS: getInputValue(stateEls.llhls),
               experimentalExactManifestTimings: getInputValue(stateEls['exact-manifest-timings']),
-              experimentalLeastPixelDiffSelector: getInputValue(stateEls['pixel-diff-selector'])
+              experimentalLeastPixelDiffSelector: getInputValue(stateEls['pixel-diff-selector']),
+              useNetworkInformation: getInputValue(stateEls['network-info'])
             }
           }
         });

src/videojs-http-streaming.js

@@ -563,6 +563,7 @@ class VhsHandler extends Component {
     this.source_ = source;
     this.stats = {};
     this.ignoreNextSeekingEvent_ = false;
+    this.effectiveBandwidthInBits_ = 0;
     this.setOptions_();
 
     if (this.options_.overrideNative &&
@@ -617,6 +618,20 @@ class VhsHandler extends Component {
     });
 
     this.on(this.tech_, 'play', this.play);
+
+    if (this.options_.useNetworkInformation) {
+      this.networkInformation = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection;
+
+      if (this.networkInformation) {
+        this.networkInformation.addEventListener('change', () => this.setNetworkInformationStats_());
+
+        this.setNetworkInformationStats_();
+      }
+    }
+  }
+
+  setNetworkInformationStats_() {
+    this.effectiveBandwidthInBits_ = this.networkInformation.downlink * 1000 * 1000;
   }
 
   setOptions_() {
@@ -630,6 +645,7 @@ class VhsHandler extends Component {
       typeof this.source_.useBandwidthFromLocalStorage !== 'undefined' ?
         this.source_.useBandwidthFromLocalStorage :
         this.options_.useBandwidthFromLocalStorage || false;
+    this.options_.useNetworkInformation = this.options_.useNetworkInformation || false;
     this.options_.customTagParsers = this.options_.customTagParsers || [];
     this.options_.customTagMappers = this.options_.customTagMappers || [];
     this.options_.cacheEncryptionKeys = this.options_.cacheEncryptionKeys || false;
@@ -682,6 +698,7 @@ class VhsHandler extends Component {
       'experimentalBufferBasedABR',
       'liveRangeSafeTimeDelta',
       'experimentalLLHLS',
+      'useNetworkInformation',
       'experimentalExactManifestTimings',
       'experimentalLeastPixelDiffSelector'
     ].forEach((option) => {
@@ -813,7 +830,16 @@ class VhsHandler extends Component {
        */
       systemBandwidth: {
         get() {
-          const invBandwidth = 1 / (this.bandwidth || 1);
+          let bandwidthEst = this.bandwidth;
+
+          // NetworkInfo.downlink maxes out at 10Mb/s. In the event that the player estimates a bandwidth
+          // greater than 10Mb, use the larger value to ensure that high quality streams are not
+          // accidentally filtered out
+          if (this.options_.useNetworkInformation) {
+            bandwidthEst = Math.max(bandwidthEst, this.effectiveBandwidthInBits_);
+          }
+
+          const invBandwidth = 1 / (bandwidthEst || 1);
           let invThroughput;
 
           if (this.throughput > 0) {

test/videojs-http-streaming.test.js

@@ -1160,6 +1160,99 @@ QUnit.test(
   }
 );
 
+QUnit.test(
+  'systemBandwidth retrieves bandwidth from networkInformation when option is enabled',
+  function(assert) {
+    this.player = createPlayer({ html5: { vhs: { useNetworkInformation: true } } });
+    this.player.src({
+      src: 'manifest/master.m3u8',
+      type: 'application/vnd.apple.mpegurl'
+    });
+
+    this.clock.tick(1);
+
+    this.player.tech_.vhs.bandwidth = 10e10;
+    this.player.tech_.vhs.effectiveBandwidthInBits_ = 20e10;
+    this.player.tech_.vhs.throughput = 20e10;
+    // 1 / ( 1 / 20e10 + 1 / 20e10) = 10e10
+    assert.strictEqual(
+      this.player.tech_.vhs.systemBandwidth,
+      10e10,
+      'systemBandwidth is the combination of networkInfo.downlink and throughput'
+    );
+  }
+);
+
+QUnit.test(
+  'systemBandwidth uses player-estimated bandwidth when its value is greater than networkInformation.downLink',
+  function(assert) {
+    this.player = createPlayer({ html5: { vhs: { useNetworkInformation: true } } });
+    this.player.src({
+      src: 'manifest/master.m3u8',
+      type: 'application/vnd.apple.mpegurl'
+    });
+
+    this.clock.tick(1);
+
+    this.player.tech_.vhs.bandwidth = 20e10;
+    this.player.tech_.vhs.effectiveBandwidthInBits_ = 10e10;
+    this.player.tech_.vhs.throughput = 20e10;
+    // 1 / ( 1 / 20e10 + 1 / 20e10) = 10e10
+    assert.strictEqual(
+      this.player.tech_.vhs.systemBandwidth,
+      10e10,
+      'systemBandwidth is the combination of player bandwidth and throughput'
+    );
+  }
+);
+
+QUnit.test(
+  'effectiveBandwidthInBits_ default',
+  function(assert) {
+    this.player.src({
+      src: 'manifest/master.m3u8',
+      type: 'application/vnd.apple.mpegurl'
+    });
+
+    this.clock.tick(1);
+
+    assert.strictEqual(
+      this.player.tech_.vhs.effectiveBandwidthInBits_,
+      0,
+      'effectiveBandwidthInBits_ defaults to 0'
+    );
+  }
+);
+
+QUnit.test(
+  'systemBandwidth uses player-estimated bandwidth when networkInformation is not supported',
+  function(assert) {
+    const ogNavigator = window.navigator;
+
+    // Need to delete the property before setting since navigator doesn't have a setter
+    delete window.navigator;
+    window.navigator = {};
+    this.player = createPlayer({ html5: { vhs: { useNetworkInformation: true } } });
+    this.player.src({
+      src: 'manifest/master.m3u8',
+      type: 'application/vnd.apple.mpegurl'
+    });
+
+    this.clock.tick(1);
+
+    this.player.tech_.vhs.bandwidth = 20e10;
+    this.player.tech_.vhs.throughput = 20e10;
+    // 1 / ( 1 / 20e10 + 1 / 20e10) = 10e10
+    assert.strictEqual(
+      this.player.tech_.vhs.systemBandwidth,
+      10e10,
+      'systemBandwidth is the combination of player bandwidth and throughput since networkInformation is not supported'
+    );
+
+    window.navigator = ogNavigator;
+  }
+);
+
 QUnit.test('requests a reasonable rendition to start', function(assert) {
   this.player.src({
     src: 'manifest/master.m3u8',