Porting Media Source Extension (MSE) Players 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

1. Polyfill the W3CMedia’s Media Source API. Example:
   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:
   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:
   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:
   -if(child instanceofElement&& child.tagName == name){
   +if(child.nodeName == name){
   

​

Dash.js player

1. Before you import any dash.js modules, you must initialize:
   (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:
   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

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).