TIP
ServiceWorkerベースのストリーミングアクセラレーションエンジン。mp4, webm, mkv, ogv, mov, wav, mp3などに対応し、すべてのブラウザ(iOS Safariを含む)とWebプレイヤーに適合します!
本プロジェクトはServiceWorkersとWebRTCをベースに、すべてのモダンブラウザとWebプレイヤーでMP4/MP3のP2P機能を実現しています。
デモ
同じWebページを2つ開いてください:デモ
ブラウザ対応状況
WebRTCはすでにHTML5標準となっているため、現在ほとんどの主要ブラウザが対応しています。互換性は、ブラウザがWebRTCとServiceWorkerに対応しているかによって決まります。
| 互換性 | Chrome | Firefox | macOS Safari | Opera | Edge | iOS Safari | IE |
|---|---|---|---|---|---|---|---|
| WebRTC Datachannel | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ |
| Service Worker | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ |
| Supported | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ |
動作原理
- まずクライアントに組み込まれたSDKが ServiceWorker を登録し、プレイヤーとネットワークの間にローカルプロキシ層を埋め込みます
- プレイヤーがローカルプロキシに動画ストリームをリクエストします
- ローカルプロキシ(ServiceWorker)は fetch イベントを監視することでサイト全体のネットワークリクエストをインターセプトし、MP4/MP3ファイルのリクエストを識別して、ReadableStreamを構築・応答します
javascript
self.addEventListener('fetch', event => { /* ⛦ magic here ⛦ */ })- ReadableStreamのpullリクエストを監視し、リクエストされたファイル範囲を複数のサブレンジリクエストに分割し、それらを順番にメインスレッドへ転送します
- メインスレッドはP2Pネットワークの状況に応じてピアからダウンロードするかを決定し、ダウンロード完了後はメインスレッド上にコピーを保持して他のノードに共有します
- あるデバイスにリソースがキャッシュされた後、他のデバイスが同じリソースをリクエストする際は、コストが高く距離の遠いオリジンサーバーから取得するのではなく、優先的にP2Pネットワークを通じてそのデバイスから近距離で取得しようとします(すなわちHTTPをWebRTCで代替します)
- P2Pネットワークからの取得に失敗した場合、またはキャッシュできないリソースは、自動的にオリジンへフォールバックします
制限事項
- ServiceWorkerの制約により、サイトへのアクセスはhttpsである必要があります
- ServiceWorkerの制約により、sw.jsファイルをホスティング先のドメインのサーバーに配置する必要があります
