TIP
基於ServiceWorker的串流媒體加速引擎,支援mp4, webm, mkv, ogv, mov, wav, mp3等,適配所有瀏覽器(包括iOS Safari)和Web播放器!
本專案基於ServiceWorkers和WebRTC在所有現代瀏覽器和Web播放器實現了MP4/MP3的P2P能力。
展示Demo
開啟2個相同的網頁:demo
瀏覽器支援情況
由於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網路就近從該裝置取得資源,而不是從成本更高、距離更遠的來源伺服器取得(即用WebRTC替代HTTP)
- 從P2P網路取得失敗或不能快取的資源,將自動回源
限制
- 由於ServiceWorker的限制,需要用https存取網站
- 由於ServiceWorker的限制,需要將sw.js檔案部署至託管網域的伺服器
