是否可以 运行 javascript 代理在客户端代理视频的媒体请求？

Is it possible to run a javascript proxy that proxy the video's media request on the client side?

我有视频文件托管在 CDN 上，视频文件是加密的。所以我需要在浏览器中播放之前对其进行解密。但是网页视频标签没有修改媒体流的接口。

所以我想运行在客户端用javascript代理来代理媒体流请求，并在脚到视频标签之前解密流。

可能吗？

通过，我尝试了下面的代码，但是当我播放它时，视频一直在旋转，而不是像下图那样渲染帧。

我用的是一个非常小的未加密视频文件out.mp4，所以可以一次性加载。

<html>
    <video id="video" controls src="out.mp4">
    </video>

    <script>
        const video = document.querySelector('#video');
        const mediaSource = new MediaSource();
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
        function sourceOpen() {
            var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
            var sourceBuffer = mediaSource.addSourceBuffer(mime);
            fetchBuffer('out.mp4', buffer => {
                sourceBuffer.appendBuffer(buffer)
            })
        }

        function fetchBuffer (url, callback) {
            var xhr = new XMLHttpRequest;
            xhr.open('get', url);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function () {
                callback(xhr.response);
            };
            xhr.send();
        }
    </script>    
</html>

不需要代理

const video = document.querySelector('#video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
//you can implement logic in function sourceOpen
function sourceOpen() {
  //mime is type of video
  const sourceBuffer = mediaSource.addSourceBuffer(mime);
  fetch(videoUrl).then(function(response) {
     //decrypt
     return response.arrayBuffer();
  }).then(buffer => {
    sourceBuffer.appendBuffer(arrayBuffer);
  });
}