Porting Media Source Extension (MSE) Players to Vega

The following are general guidelines for porting your Media Source Extension (MSE) player to Vega:

• Replace XMLHttpRequest (XHR) objects with the Fetch API.
• Do not use the ReadableStream interface in the Fetch API and use asynchronous full read.
• Work around Document Object Model (DOM) dependencies.
• Implement polyfills where necessary.

Shaka player

To run on Vega, modify your Shaka Player as follows:

1. Polyfill the W3CMedia’s Media Source API.

   Example:

   Copy code Copied to clipboard.

   global.window.MediaSource=global.MediaSource=MediaSource;
   global.HTMLMediaElement=HTMLMediaElement;
   

2. In place of the DOMParser, use the XMLDOM npm package, and specify the window for fetch.

   Modified navigator.userAgent example:

   Copy code Copied to clipboard.

      import{DOMParser}from"xmldom";
      (global as any).navigator.userAgent ="kepler";
      (global as any).window.DOMParser=DOMParser;
      (global as any).window.fetch= fetch;
   

3. Modify the Document object with a polyfill. When you create the React Native video component, global.gvideo is set or cleared.

   Example:

   Copy code Copied to clipboard.

   class Document {
       createElement = (name: string) => {
           console.log(`document.createElement ${name}`);
           return global.gvideo;
       }
       getElementsByTagName = (name: string) => {
           console.log(`document.getElementsByTagName ${name}`);
           return global.gvideo;
       }
       static install() {
           console.log("Installing Document polyfill");
           global.document = new Document();
       }
   }
   
   

4. Disable the Node interface in xml_util.js.

   Example:

   Copy code Copied to clipboard.

   -if(child instanceofElement&& child.tagName == name){
   +if(child.nodeName == name){
   

Dash.js player

To run on Vega, modify your Dash.js player as follows:

1. Before you import any dash.js modules, you must initialize:

   Copy code Copied to clipboard.

   (global as any).dashjs ={};
   

2. In the HTTPLoader.js, change the check to use fetch instead of XMLHTTPRequest. Some checks in the code lead to usage of XMLHTTPRequest, which couldn’t download the segments (0 byte segments were downloaded).

   Example:

   Copy code Copied to clipboard.

       if  (/* request.hasOwnProperty('availabilityTimeComplete') && request.availabilityTimeC
              (request.type ===HTTPRequest.MEDIA_SEGMENT_TYPE|| request.type ===HTTPRequ            
                 console.log(`dashjs:HTTPLoader:using fetch loader`);            
                 loader =FetchLoader(context).create({
               .......
       else {            
            console.log(`dashjs:HTTPLoader:using XHRLoader loader`);            
            loader =XHRLoader(context).create({
               .........
            }
   

HLS.js player

Make the following modifications to your HLS.js player to run with Vega.

1. Apply the same polyfill classes that are applied for the forked Shaka Player to the HLS.js player.

2. Polyfill the location.href, DOMException, and HTMLVideoElement classes.

3. Enable the fetch-loader plugin of hls.js.

4. In the fetch-loader plugin, disable the onProgress callback (fetch.ReadableStream is not supported).

5. Disable progressive config (fetch.ReadableStream is not supported).

6. Disable all subtitle configurations (HLS.js player doesn't support the CUE API).

7. Patch the SourceBuffer.appendBuffer method to accept Uint8Array.

8. Disable workers (web workers (background process) is unsupported).

---

Last updated: Feb 17, 2026