Porting Media Source Extension (MSE) Players to Vega

• Shaka player
• Dash.js player
• HLS.js player

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

Make the following modifications to your Shaka player to run with Vega.

1. Pollyfill 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 pollyfill. As the Video RN component is created and destroyed, 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

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

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 configs (CUE API is not supported).

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

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

---

Last updated: Sep 30, 2025