事前準備

ドメインの紐付け

P2Pサービスを利用する前に、まずドメインを紐付ける必要があります。

TIP

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

ローカルプロキシのデプロイ（任意）

Click me

Service Workerベースのエンジンを有効にするにはHTTPSが必須です。サイトがすでにHTTPSに移行済みであることを確認してください。hls.jsベースのエンジンのみを使用する場合はこの手順を無視して構いません。セキュリティ上の理由から、ブラウザは他のドメインのスクリプトによるServiceWorkerの呼び出しを許可しないため、P2P機能を正常に動作させるにはスクリプトファイルをサイトと同じドメイン上に配置する必要があります。具体的な手順は以下の通りです：

サイトがPWAでない場合

sw.js をサーバーのプレイヤーが配置されているディレクトリにコピーし、https://your_website.com/sw.js のようにインターネット経由でアクセスできることを確認してください。 また、hls-proxy.js をダウンロードしてローカル化し、sw.jsにリネームすることも可能です。

サイトがPWAの場合

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

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

そしてSDKで正しいsw.jsのパスを設定してください

var p2pConfig = {
     swFile: PATH_TO_SW_FILE
}

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

TIP

hls.jsのみを使用する場合は、HTTPSやローカルプロキシ（sw.js）のデプロイは不要です

プラグインの導入

scriptタグでの導入

scriptタグを使って、すでにhls.jsとバンドルされた最新バージョン、またはhls.jsとバンドルされていない単独バージョンを導入します：

単独バンドルのP2pEngine

<script src="https://cdn.jsdmirror.com/npm/hls.js@latest"></script>
<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/hls/p2p-engine.min.js"></script>

P2pEngine内蔵のhls.js

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

ファイルでの導入

こちらをクリック
jsコードはプレイヤーのコードより先に実行される必要があるため、プレイヤーコードを読み込むscriptタグより前に導入してください。

Browserify / Webpack

npm install --save @swarmcloud/hls

プレイヤーのモジュール内で require を使って導入：

単独バンドルのP2pEngine

var Hls = require('hls.js');
var P2pEngineHls = require('@swarmcloud/hls').default;

P2pEngine内蔵のhls.js

var Hls = require('@swarmcloud/hls/hls.min');

またはES6の import 構文を使う場合：

単独バンドルのP2pEngine

import Hls from 'hls.js';
import P2pEngineHls from '@swarmcloud/hls';

P2pEngine内蔵のhls.js

import Hls from '@swarmcloud/hls/hls.min';

プラグインの使用

単独バンドルのP2pEngine

// hls.js をインスタンス化し、***hlsjsConfig*** を引数として渡します。次に ***P2pEngineHls*** をインスタンス化し、***p2pConfig*** を引数として渡します。
var p2pConfig = {
    // Other p2pConfig options if applicable
}
var engine;
if (P2pEngineHls.isMSESupported()) {
    var hls = new Hls();
    p2pConfig.hlsjsInstance = hls;        // set hlsjs instance to SDK
    engine = new P2pEngineHls(p2pConfig);
    // Use hls just like your usual hls.js…
    hls.loadSource(contentUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
} else {
    engine = new P2pEngineHls(p2pConfig);   // equal to new P2pEngineHls.ServiceWorkerEngine(p2pConfig);
    engine.registerServiceWorker().catch(() => {}).finally(() => {
        // native video playback here

    });
}

P2pEngine内蔵のhls.js

// ***hlsjsConfig*** オブジェクトリテラルに ***p2pConfig*** フィールドを追加し、hls.jsをインスタンス化する際に ***hlsjsConfig*** を引数として渡します。
var p2pConfig = {
    logLevel: 'debug',
    // Other p2pConfig options if applicable
}
if(Hls.isSupported()) {
    var hlsjsConfig = {
        debug: true,
        // Other hlsjsConfig options provided by hls.js
        p2pConfig
    };
    // Hls constructor is overriden by included bundle
    var hls = new Hls(hlsjsConfig);
    // Use hls just like the usual hls.js ...
    hls.loadSource(contentUrl);
    hls.attachMedia(video);
} else {
    // use ServiceWorker based p2p engine if hls.js is not supported
    new Hls.P2pEngine.ServiceWorkerEngine(p2pConfig);
}

エンジンの切り替えの仕組み

SDKはインスタンス化の際、まずhls.jsベースのエンジン（以下「MSEエンジン」）の使用を優先的に試み、失敗した場合にServiceWorkerベースのエンジン（以下「SWエンジン」）を試みます。具体的には以下の通りです：

• ブラウザがWebRTC Datachannelに対応していない場合、どのP2Pエンジンも有効化されません
• ブラウザがMSEに対応しており、hlsjsInstanceが渡されており、かつproxyOnlyが設定されていない場合、MSEエンジンの有効化を試みます
• それ以外の場合で、ServiceWorkerに対応していればSWエンジンを有効化します

プレイヤーとの統合

プレイヤーの例を参照してください。

ファイルの説明

@swarmcloud/hls/
├── hls.min.d.ts              # Typescript type information about hls.min.js and hls.light.min.js
├── hls.min.js                # Hls.js with P2pEngine built in
└── hls.light.min.js          # Hls.light.js with P2pEngine built in
└── p2p-engine.min.d.js       # Typescript type information about p2p-engine.min.js
└── p2p-engine.min.js         # P2pEngine that supports both Hls.js and ServiceWorker
└── p2p-engine.es.min.js         # P2pEngine that supports both Hls.js and ServiceWorker for ES Module
└── hlsjs-p2p-engine.min.js   # P2pEngine that supports Hls.js only
└── sw-p2p-engine.min.js      # P2pEngine that supports ServiceWorker only
└── hls-proxy.js              # The file that be imported by sw.js

Electron

本プラグインは Electron プラットフォームにも対応しています。管理パネルから取得したtokenなどの情報をconfigに渡すだけで利用できます。以下の通りです：

var hlsjsConfig = {
    p2pConfig: {
        token: YOUR_TOKEN,
        appName: YOUR_APP_NAME,    // アプリの名称
        appId: YOUR_APP_ID,        // 管理パネルで入力したものと一致させる必要があります
        // Other p2pConfig options if applicable
    }
};

tokenの取得方法を参照してください