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

• Shaka Player
• Dash.jsプレーヤー
• HLS.jsプレーヤー

以下は、Media Source Extension（MSE）プレーヤーをVegaに移植するための一般的なガイドラインです。

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

Shaka Player

Shaka PlayerをVegaで動作させるには、プレーヤーに以下の変更を加えます。

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オブジェクトをポリフィルで変更します。Video RNコンポーネントの作成と破棄に伴って、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プレーヤー

dash.jsプレーヤーをVegaで動作させるには、プレーヤーに以下の変更を加えます。

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プレーヤー

HLS.jsプレーヤーをVegaで動作させるには、プレーヤーに以下の変更を加えます。

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. 字幕構成をすべて無効にします（CUE APIはサポートされません）。

7. SourceBuffer.appendBufferメソッドにパッチを適用して、Uint8Arrayを受け入れるように変更します。

8. ワーカーを無効にします（ウェブワーカー（バックグラウンドプロセス）はサポートされません）。

---

Last updated: 2025年9月30日