Media Source Extension（MSE）プレーヤーをVegaに移植する方法

• XMLHttpRequest（XHR）オブジェクトをFetch APIに置き換えます。
• Fetch APIではReadableStreamインターフェイスを使用せず、非同期で全体を読み取ります。
• ドキュメントオブジェクトモデル（DOM）の依存関係を回避します。
• 必要に応じてポリフィルを実装します。

​

Shaka Player

1. W3CMediaのMedia Source APIのポリフィルを設定します。 例：
   global.window.MediaSource=global.MediaSource=MediaSource;
   global.HTMLMediaElement=HTMLMediaElement;
   
2. DOMParserの代わりにXMLDOM npmパッケージを使用し、フェッチのためのウィンドウを指定します。 navigator.userAgentの変更例：
   import{DOMParser}from"xmldom";
   (global as any).navigator.userAgent ="kepler";
   (global as any).window.DOMParser=DOMParser;
   (global as any).window.fetch= fetch;
   
3. Documentオブジェクトをポリフィルで変更します。React Native ビデオコンポーネントを作成すると、global.gvideoが設定またはクリアされます。 例：
   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("Documentのポリフィルをインストールします");
           global.document = new Document();
       }
   }
   
4. xml_util.jsで、Nodeインターフェイスを無効にします。 例：
   -if(child instanceofElement&& child.tagName == name){
   +if(child.nodeName == name){
   

​

Dash.jsプレーヤー

1. dash.jsのモジュールをインポートする前に、次の初期化を実行します。
   (global as any).dashjs ={};
   
2. HTTPLoader.jsのチェック処理で、XMLHTTPRequestの代わりにフェッチを使用するように変更します。コード内のいくつかのチェック処理により、XMLHTTPRequestが使用されることになりますが、これはセグメントをダウンロードできません（0バイトのセグメントがダウンロードされます）。 例：
       if  (/* request.hasOwnProperty('availabilityTimeComplete') && request.availabilityTimeC
              (request.type ===HTTPRequest.MEDIA_SEGMENT_TYPE|| request.type ===HTTPRequ            
                 console.log(`dashjs:HTTPLoader：フェッチローダーを使用します`);            
                 loader =FetchLoader(context).create({
               .......
       else {            
            console.log(`dashjs:HTTPLoader：XHRLoaderローダーを使用します`);            
            loader =XHRLoader(context).create({
               .........
            }
   

​

HLS.jsプレーヤー

1. Shaka Playerのフォークに適用するものと同じポリフィルクラスを、HLS.jsプレーヤーに適用します。
2. location.href、DOMExceptionクラス、HTMLVideoElementクラスのポリフィルを設定します。
3. hls.jsのfetch-loaderプラグインを有効にします。
4. fetch-loaderプラグインで、onProgressコールバックを無効にします（fetch.ReadableStreamはサポートされません）。
5. progressive構成を無効にします（fetch.ReadableStreamはサポートされません）。
6. すべての字幕設定を無効にします（HLS.jsプレーヤーはCUE APIをサポートしていません）。
7. SourceBuffer.appendBufferメソッドにパッチを適用して、Uint8Arrayを受け入れるように変更します。
8. ワーカーを無効にします（ウェブワーカー（バックグラウンドプロセス）はサポートされません）。