feat: provide option to disable usage of source elements in MSE (#8386)

Some platforms may have some issues around load api. Provide apps to
configure using load API or setting src to mediasource. Defaults to
using load API.

---------

Co-authored-by: Srikanth Peddibhotla <peddisri@amazon.com>
Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>

Author: 3 people

demo/config.js

@@ -697,7 +697,9 @@ shakaDemo.Config = class {
             strategyOptions,
             strategyOptionsNames)
         .addBoolInput_('Dispatch all emsg boxes',
-            'mediaSource.dispatchAllEmsgBoxes');
+            'mediaSource.dispatchAllEmsgBoxes')
+        .addBoolInput_('Uses source elements',
+            'mediaSource.useSourceElements');
   }
 
   /** @private */

externs/shaka/player.js

@@ -2134,7 +2134,8 @@ shaka.extern.NetworkingConfiguration;
  *   forceTransmux: boolean,
  *   insertFakeEncryptionInInit: boolean,
  *   modifyCueCallback: shaka.extern.TextParser.ModifyCueCallback,
- *   dispatchAllEmsgBoxes: boolean
+ *   dispatchAllEmsgBoxes: boolean,
+ *   useSourceElements: boolean
  * }}
  *
  * @description
@@ -2177,6 +2178,12 @@ shaka.extern.NetworkingConfiguration;
  *   If true, all emsg boxes are parsed and dispatched.
  *   <br>
  *   Defaults to <code>false</code>.
+ * @property {boolean} useSourceElements
+ *   If true, uses <source> element. Otherwise,
+ *   sets the mediaSource url blob to src attribute.
+ *   Disabling it will prevent using AirPlay on MSE.
+ *   <br>
+ *   Defaults to <code>true</code>.
  * @exportDoc
  */
 shaka.extern.MediaSourceConfiguration;

lib/media/media_source_engine.js

@@ -57,17 +57,18 @@ shaka.media.MediaSourceEngine = class {
    *    MediaSourceEngine is destroyed, it will destroy the displayer.
    * @param {!shaka.media.MediaSourceEngine.PlayerInterface} playerInterface
    *   Interface for common player methods.
+   * @param {shaka.extern.MediaSourceConfiguration} config
    * @param {?shaka.lcevc.Dec} [lcevcDec] Optional -  LCEVC Decoder Object
    */
-  constructor(video, textDisplayer, playerInterface, lcevcDec) {
+  constructor(video, textDisplayer, playerInterface, config, lcevcDec) {
     /** @private {HTMLMediaElement} */
     this.video_ = video;
 
     /** @private {?shaka.media.MediaSourceEngine.PlayerInterface} */
     this.playerInterface_ = playerInterface;
 
     /** @private {?shaka.extern.MediaSourceConfiguration} */
-    this.config_ = null;
+    this.config_ = config;
 
     /** @private {shaka.extern.TextDisplayer} */
     this.textDisplayer_ = textDisplayer;
@@ -258,20 +259,23 @@ shaka.media.MediaSourceEngine = class {
 
     // Store the object URL for releasing it later.
     this.url_ = shaka.media.MediaSourceEngine.createObjectURL(mediaSource);
-
-    this.video_.removeAttribute('src');
-    if (this.source_) {
-      this.video_.removeChild(this.source_);
-    }
-    if (this.secondarySource_) {
-      this.video_.removeChild(this.secondarySource_);
-    }
-    this.source_ = shaka.util.Dom.createSourceElement(this.url_);
-    this.video_.appendChild(this.source_);
-    if (this.secondarySource_) {
-      this.video_.appendChild(this.secondarySource_);
+    if (this.config_.useSourceElements) {
+      this.video_.removeAttribute('src');
+      if (this.source_) {
+        this.video_.removeChild(this.source_);
+      }
+      if (this.secondarySource_) {
+        this.video_.removeChild(this.secondarySource_);
+      }
+      this.source_ = shaka.util.Dom.createSourceElement(this.url_);
+      this.video_.appendChild(this.source_);
+      if (this.secondarySource_) {
+        this.video_.appendChild(this.secondarySource_);
+      }
+      this.video_.load();
+    } else {
+      this.video_.src = this.url_;
     }
-    this.video_.load();
 
     return mediaSource;
   }
@@ -286,6 +290,9 @@ shaka.media.MediaSourceEngine = class {
           'Secondary source is used only with ManagedMediaSource');
       return;
     }
+    if (!this.config_.useSourceElements) {
+      return;
+    }
     if (this.secondarySource_) {
       this.video_.removeChild(this.secondarySource_);
     }

lib/player.js

@@ -2506,8 +2506,10 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     this.makeStateChangeEvent_('media-source');
 
     // Remove children if we had any, i.e. from previously used src= mode.
-    this.video_.removeAttribute('src');
-    shaka.util.Dom.removeAllChildren(this.video_);
+    if (this.config_.mediaSource.useSourceElements) {
+      this.video_.removeAttribute('src');
+      shaka.util.Dom.removeAllChildren(this.video_);
+    }
 
     this.createTextDisplayer_();
     goog.asserts.assert(this.textDisplayer_,
@@ -2526,8 +2528,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           onEvent: (event) => this.dispatchEvent(event),
           onManifestUpdate: () => this.onManifestUpdate_(),
         },
-        this.lcevcDec_);
-    mediaSourceEngine.configure(this.config_.mediaSource);
+        this.lcevcDec_,
+        this.config_.mediaSource);
     const {segmentRelativeVttTiming} = this.config_.manifest;
     mediaSourceEngine.setSegmentRelativeVttTiming(segmentRelativeVttTiming);
 
@@ -3993,15 +3995,17 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
    * @param {!shaka.extern.TextDisplayer} textDisplayer
    * @param {!shaka.media.MediaSourceEngine.PlayerInterface} playerInterface
    * @param {shaka.lcevc.Dec} lcevcDec
+   * @param {shaka.extern.MediaSourceConfiguration} config
    *
    * @return {!shaka.media.MediaSourceEngine}
    */
   createMediaSourceEngine(mediaElement, textDisplayer, playerInterface,
-      lcevcDec) {
+      lcevcDec, config) {
     return new shaka.media.MediaSourceEngine(
         mediaElement,
         textDisplayer,
         playerInterface,
+        config,
         lcevcDec);
   }
 

lib/util/player_configuration.js

@@ -428,6 +428,7 @@ shaka.util.PlayerConfiguration = class {
             undefined);
       },
       dispatchAllEmsgBoxes: false,
+      useSourceElements: true,
     };
 
     let customPlayheadTracker = false;

test/cast/cast_utils_unit.js

@@ -223,7 +223,8 @@ describe('CastUtils', () => {
         function onError() {
           fail('Error code ' + (video.error ? video.error.code : 0));
         }
-
+        const config =
+            shaka.util.PlayerConfiguration.createDefault().mediaSource;
         mediaSourceEngine = new shaka.media.MediaSourceEngine(
             video,
             new shaka.test.FakeTextDisplayer(),
@@ -233,10 +234,8 @@ describe('CastUtils', () => {
               onEmsg: () => {},
               onEvent: () => {},
               onManifestUpdate: () => {},
-            });
-        const config =
-            shaka.util.PlayerConfiguration.createDefault().mediaSource;
-        mediaSourceEngine.configure(config);
+            },
+            config);
 
         const ContentType = shaka.util.ManifestParserUtils.ContentType;
         const initObject = new Map();

test/drm/drm_engine_integration.js

@@ -115,7 +115,8 @@ describe('DrmEngine', () => {
     const audioStream = manifest.variants[0].audio;
 
     eventManager = new shaka.util.EventManager();
-
+    const mediaSourceConfig =
+        shaka.util.PlayerConfiguration.createDefault().mediaSource;
     mediaSourceEngine = new shaka.media.MediaSourceEngine(
         video,
         new shaka.test.FakeTextDisplayer(),
@@ -125,10 +126,8 @@ describe('DrmEngine', () => {
           onEmsg: () => {},
           onEvent: () => {},
           onManifestUpdate: () => {},
-        });
-    const mediaSourceConfig =
-        shaka.util.PlayerConfiguration.createDefault().mediaSource;
-    mediaSourceEngine.configure(mediaSourceConfig);
+        },
+        mediaSourceConfig);
 
     const expectedObject = new Map();
     expectedObject.set(ContentType.AUDIO, audioStream);

test/media/media_source_engine_integration.js

@@ -178,6 +178,7 @@ describe('MediaSourceEngine', () => {
     onEmsg = jasmine.createSpy('onEmsg');
     onEvent = jasmine.createSpy('onEvent');
     onManifestUpdate = jasmine.createSpy('onManifestUpdate');
+    const config = shaka.util.PlayerConfiguration.createDefault().mediaSource;
 
     mediaSourceEngine = new shaka.media.MediaSourceEngine(
         video,
@@ -188,9 +189,8 @@ describe('MediaSourceEngine', () => {
           onEmsg: Util.spyFunc(onEmsg),
           onEvent: Util.spyFunc(onEvent),
           onManifestUpdate: Util.spyFunc(onManifestUpdate),
-        });
-    const config = shaka.util.PlayerConfiguration.createDefault().mediaSource;
-    mediaSourceEngine.configure(config);
+        },
+        config);
 
     mediaSource = /** @type {?} */(mediaSourceEngine)['mediaSource_'];
     expect(video.getElementsByTagName('source').length).toBe(1);

test/media/media_source_engine_unit.js

@@ -251,6 +251,8 @@ describe('MediaSourceEngine', () => {
     video = /** @type {HTMLMediaElement} */(mockVideo);
     mockClosedCaptionParser = new shaka.test.FakeClosedCaptionParser();
     mockTextDisplayer = new shaka.test.FakeTextDisplayer();
+    const config = shaka.util.PlayerConfiguration.createDefault().mediaSource;
+
     mediaSourceEngine = new shaka.media.MediaSourceEngine(
         video,
         mockTextDisplayer,
@@ -260,12 +262,11 @@ describe('MediaSourceEngine', () => {
           onEmsg: () => {},
           onEvent: () => {},
           onManifestUpdate: () => {},
-        });
+        },
+        config);
     mediaSourceEngine.getCaptionParser = () => {
       return mockClosedCaptionParser;
     };
-    const config = shaka.util.PlayerConfiguration.createDefault().mediaSource;
-    mediaSourceEngine.configure(config);
   });
 
   afterEach(() => {
@@ -326,6 +327,7 @@ describe('MediaSourceEngine', () => {
       window.ManagedMediaSource = originalManagedMediaSource;
       window.URL.revokeObjectURL = originalRevokeObjectURL;
     });
+    const config = shaka.util.PlayerConfiguration.createDefault().mediaSource;
 
     it('creates a MediaSource object and sets video.src', () => {
       mediaSourceEngine = new shaka.media.MediaSourceEngine(
@@ -337,7 +339,8 @@ describe('MediaSourceEngine', () => {
             onEmsg: () => {},
             onEvent: () => {},
             onManifestUpdate: () => {},
-          });
+          },
+          config);
 
       expect(createMediaSourceSpy).toHaveBeenCalled();
       expect(createObjectURLSpy).toHaveBeenCalled();
@@ -352,6 +355,7 @@ describe('MediaSourceEngine', () => {
           onSourceOpenListener = callback;
         }
       });
+      const config = shaka.util.PlayerConfiguration.createDefault().mediaSource;
 
       mediaSourceEngine = new shaka.media.MediaSourceEngine(
           video,
@@ -362,7 +366,8 @@ describe('MediaSourceEngine', () => {
             onEmsg: () => {},
             onEvent: () => {},
             onManifestUpdate: () => {},
-          });
+          },
+          config);
 
       if (window.ManagedMediaSource) {
         expect(mockMediaSource.addEventListener).toHaveBeenCalledTimes(3);

test/media/streaming_engine_integration.js

@@ -67,6 +67,8 @@ describe('StreamingEngine', () => {
     eventManager = new shaka.util.EventManager();
     waiter = new shaka.test.Waiter(eventManager);
 
+    const mediaSourceConfig =
+        shaka.util.PlayerConfiguration.createDefault().mediaSource;
     mediaSourceEngine = new shaka.media.MediaSourceEngine(
         video,
         new shaka.test.FakeTextDisplayer(),
@@ -76,10 +78,8 @@ describe('StreamingEngine', () => {
           onEmsg: () => {},
           onEvent: () => {},
           onManifestUpdate: () => {},
-        });
-    const mediaSourceConfig =
-        shaka.util.PlayerConfiguration.createDefault().mediaSource;
-    mediaSourceEngine.configure(mediaSourceConfig);
+        },
+        mediaSourceConfig);
     waiter.setMediaSourceEngine(mediaSourceEngine);
   });