javascript - Web如何hook媒体请求并修改媒体请求响应？

Question

我在 CDN 上托管了视频。但视频文件已被修改。所以视频不能直接播放。

在我的应用中，我可以在播放前撤消对视频的修改。

但是我如何在浏览器中完成呢？有ajax hook，我试过了，不能hook midia流。

Answer 1

The video file header is encrypted by modify the header purposely.

首先，如果您尝试加密视频，这并不能为您提供太多保护。我建议对 Encrypted Media Extensions 使用某种 DRM .这将确保您的视频无法在不付出额外努力的情况下访问。没有什么是万无一失的，但这至少要好得多。

Web how to hook media request and modify the media request response?

您可以使用 Service Worker处理任何内容的请求/响应，包括媒体元素。

基本上，Service Worker 充当代理，拦截请求。如果它选择，它可以自己处理请求。通常这用于对缓存做一些特殊的事情，但是您可以使用相同的方法来修改您认为合适的响应数据。在最基本的层面上，您的 service worker 将执行如下操作:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    // Your modified data in a Response object here
  );
});

虽然要开始，但您需要执行很多操作。您可以在此处找到完整的教程:

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

另请注意，请注意请求中的范围 header 。这些在媒体数据中很常见，您需要在 Service Worker 脚本中处理它们!