如何從ServiceWorker流式傳輸視頻？

我有一個服務工作者，它捕獲我的頁面的請求（fetch事件），並且當URL匹配某個模式時，它將獲取另一個URL並用該新內容替換該響應。它適用於文本數據（JS，XML ...）或二進制數據（例如圖像），但是當涉及到視頻時，會出現一個小故障。如何從ServiceWorker流式傳輸視頻？

我在OSX上使用Chrome 41。

這是我的工作人員的簡化代碼：

self.addEventListener('fetch', function(event) { 
    var url = event.request.url; 
    console.log('SW: fetch', url); 
    if (/\.mp4$/.test(url)) { 
    url = 'https://vjs.zencdn.net/v/oceans.mp4'; 
    var options = { 
     credentials: 'include', 
     mode: 'no-cors' 
    }; 
    event.respondWith(fetch(url, options)); 
    } 
});

這是在我的HTML頁面簡化代碼：

navigator.serviceWorker.register('sw.js').then(function(reg) { 
    console.info('ServiceWorker registration successful for', reg.scope); 

    var video = document.createElement('video'); 
    video.src = '/video.mp4'; 
    video.controls = true; 
    video.autoplay = true; 
    video.onerror = function(err) { 
    console.error('Video load fail', err); 
    } 
    video.onload = function(data) { 
    console.info('Video load success'); 
    } 
    document.body.appendChild(video); 

}).catch(function(err) { 
    console.error('ServiceWorker registration failed:', err); 
});

第一次加載頁面，工人安裝，所以視頻請求沒有被捕獲，因此失敗。但是，當您重新加載頁面（不清除緩存）時，它被成功捕獲，並且工作人員成功加載視頻（HTTP 200在其檢查器中），但由於某種原因，主頁面會拋出一個net::ERR_FAILED。

我不能手動讀/流，因爲它來自不同的來源，從而「不透明」響應類型：http://www.w3.org/TR/service-workers/#cross-origin-resources

更新：更新到鉻42，誤差現在是HTTP 400 Service Worker Fallback Required (from ServiceWorker)。奇怪的是，the source code（第510行）表示只有在CORS標頭丟失時纔會引發它，但這裏的模式是no-cors。

來源

2015-04-16 antoine129

首先，我建議嘗試在當前Chrome Canary，目前對應於版本44.0.2371.0。隨着每個新的Chrome版本的發佈，圍繞服務工作人員的開發人員工具不斷得到改進，而且通常版本43+的情況會更好。

它看起來不像opaque Response對象可以用於<video>元素的src，我假設這是故意的。（不透明Response s可用於某些目的，恐怕我沒有一個完整的破敗的什麼將不會與不透明的Response工作。）

但無論如何，你是幸運的是vjs.zencdn.net支持CORS，所以你可以使用默認的啓用CORS的Request，這會給你一個不透明的Response。

一件事，你不能做的是使用credentials: 'include'在CORS Request，因爲它會導致提取API無法加載https://vjs.zencdn.net/v/oceans.mp4。當憑證標誌爲真時，'Access-Control-Allow-Origin'標頭中不能使用通配符'*'。錯誤。這似乎不是你的特定主機的問題，因爲不需要證書。

當我切換你的代碼使用event.respondWith(fetch('https://vjs.zencdn.net/v/oceans.mp4'));一切工作正常。

來源

2015-04-16 15:36:54

非常感謝傑夫，CORS標題確實是問題！ – antoine129

我在Chromium跟蹤器上打開了一個問題以改善調試：https://code.google.com/p/chromium/issues/detail?id=477685 – antoine129

如何從ServiceWorker流式傳輸視頻？

回答

相關問題