如何从ServiceWorker流式传输视频？

Question

我有一个服务工作者捕获我的页面的请求(fetch事件),当URL匹配某个模式时,它将获取另一个URL并用该新内容替换响应.它适用于文本数据(JS,XML ...)或二进制数据(例如图像),但是当涉及到视频时,会出现故障.

我在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

更新:更新到Chrome 42,现在出现错误HTTP 400 Service Worker Fallback Required (from ServiceWorker).奇怪的是,源代码(第510行)表明它只应在CORS头丢失时引发,但这里的模式是no-cors.

Answer 1

首先,我建议尝试使用当前对应于44.0.2371.0版本的Chrome Canary.围绕服务工作者的开发人员工具随着每个新版Chrome的发布而不断改进,而且一般来说,版本43+的开发工具要好得多.

它看起来并不像不透明Response对象可以用于src一个的<video>元素,我假定这是故意的.(不透明Response可以用于某些目的,而且我担心我不会完全了解不透明的内容和不适用的内容Response.)

但无论如何,你很幸运,它vjs.zencdn.net支持CORS,所以你可以使用默认的CORS启用Request,这将给你一个非透明的Response.

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

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