javascript - 如何从 ServiceWorker 流式传输视频？

Question

我有一个 service worker 可以捕获我的页面请求(fetch 事件)，当 URL 匹配特定模式时，它会获取另一个 URL 并用新内容替换响应。它非常适合文本数据(JS、XML...)或二进制数据(例如图像)，但当涉及到视频时，就会出现问题。

我在 OSX 上使用 Chrome 41。

这是我的 worker 的简化代码:

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);
});

第一次加载页面时，worker 安装，所以视频请求没有被捕获，因此失败。但是当你重新加载页面(不清理缓存)时，它被成功捕获，并且工作人员成功加载视频(其检查器中的 HTTP 200)，但由于某种原因，主页面抛出一​​个 net::ERR_FAILED 。

而且我无法手动读取/流式传输它，因为它来自不同的来源，导致“不透明”响应类型:http://www.w3.org/TR/service-workers/#cross-origin-resources

更新:更新到 Chrome 42，错误现在是 HTTP 400 Service Worker Fallback Required (from ServiceWorker)。奇怪的是the source code (第 510 行)表示只有在缺少 CORS header 时才应该引发它，但这里的模式是 no-cors。

Answer 1

首先，我建议尝试使用当前的 Chrome Canary ，当前对应版本 44.0.2371.0。围绕 Service Worker 的开发人员工具会随着 Chrome 的每个新版本而不断改进，并且总体上在 43+ 版本中变得更好。

它看起来不像opaque Response 对象可用于 src的 <video>元素，我假设这是故意的。 (不透明的 Response 可以用于某些目的，恐怕我没有一个完整的 list 来说明什么可以和不可以与不透明的 Response 一起使用。)

但无论如何，你很幸运 vjs.zencdn.net支持 CORS，因此您可以使用默认的、支持 CORS 的 Request ，这会给你一个透明的 Response .

你不能做的一件事是使用 credentials: 'include'在你的 CORS Request ，因为它会导致 Fetch API 无法加载 https://vjs.zencdn.net/v/oceans.mp4 .当凭据标志为真时，不能在“Access-Control-Allow-Origin” header 中使用通配符“*”。 错误。这似乎不是您的特定主机的问题，因为不需要凭据。

当我将您的代码切换为使用 event.respondWith(fetch('https://vjs.zencdn.net/v/oceans.mp4')); 时一切正常。