事前準備

クロスオリジン設定

ストリーミングサーバー側でクロスオリジン設定が済んでいることを確認してください

OPTIONSリクエストを許可する

OPTIONSリクエストは、クロスオリジン環境でRANGEリクエストを送信する前のプリフライトリクエストです。通常はHTTPレスポンスヘッダーに以下を追加するだけです:

Access-Control-Allow-Methods: GET, OPTIONS

RANGEリクエストを許可する

本SDKはRANGEリクエストを使用します。通常はHTTPレスポンスヘッダーに以下を追加するだけです:

Access-Control-Allow-Headers: Range

ドメインの紐付け

管理パネル にアクセスし、登録してドメインを紐付けてください。

TIP

Localhostはホワイトリストに登録済みのため、紐付け不要でローカルデバッグに利用できます。

サイトのHTTPS移行

Service WorkerはHTTPS環境でのみ有効になるため、サイトがすでにHTTPSに移行済みであることを確認してください。

Let's Encrypt を使って無料の証明書を発行することができます。こちら のチュートリアルを参考にしてください。

ローカルプロキシのデプロイ

セキュリティ上の理由から、ブラウザは他のドメインのスクリプトによるServiceWorkerの呼び出しを許可しないため、P2P機能を正常に動作させるにはスクリプトファイルをサイトと同じドメイン上に配置する必要があります。具体的な手順は以下の通りです：

サイトがPWAでない場合

sw.js をサーバーのプレイヤーが配置されているディレクトリにコピーし、https://your_website.com/sw.js のようにインターネット経由でアクセスできることを確認してください。

サイトがPWAの場合

サイトのルートディレクトリにある sw.js ファイルの1行目に以下のコードを追加してください：

self.importScripts('https://cdn.jsdmirror.com/npm/@swarmcloud/media/media-proxy.js')

デプロイが完了すると、1）サイトが元々持っていたsw.jsのロジックはそのまま正常に動作し続けます。2）SwarmCloudのServiceWorkerスクリプトが「fetch」イベントを監視し、MP4/MP3リクエストをインターセプトします。それ以外のリクエストは元のServiceWorkerのロジックによって処理されます。

P2P Engineの統合

scriptタグでの統合

index.htmlのheadタグ内に以下のスクリプトを追加し、P2PEngineMediaインスタンスを作成します。設定パラメータはカスタマイズ可能です：

<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/media"></script>

npmで導入することもできます：

$ npm install @swarmcloud/media

import P2PEngineMedia from '@swarmcloud/media';

// Create P2PEngineMedia instance...
var engine = new P2PEngineMedia({
    // logLevel: 'debug',
    // swFile: './sw.js',     // sw.js が現在のフォルダにない場合は、このフィールドを変更する必要があります
    // trackerZone: 'hk',        // if using Hongkong tracker
    // trackerZone: 'us',        // if using USA tracker
    // token: YOUR_TOKEN
    // Other p2pConfig options provided by P2PEngineMedia
})
// ローカルプロキシの再生アドレスを取得
engine.getProxiedUrl('http://example.mp4').then((url) => {
    video.src = url;
})

サードパーティ製プレイヤーとの統合

本SDKはほぼすべてのサードパーティ製プレイヤーと組み合わせて使用できます。サンプルコードを参照してください