title: Is it possible to run a javascript proxy that proxy the video's media request on the client side?
body: <p>I have video files hosted on the CDN, the video file is encrypted. So I need the decrypt it before play it in the browser. But the web video tag has no interface to modify the media stream.</p>
  <p>So I want to run a proxy in the client side  with javascript to proxy the media stream request, and decrypt the stream before feet to the video tag.</p>
  <p>Is it possible?</p>
  <hr />
  <p>By <a href="https://stackoverflow.com/a/70390249/6521116">math-chen's answer</a>, I have tryed below code, but when I paly it, the video keep spin and not render the frame like below image.</p>
  <p><a href="https://i.stack.imgur.com/TuWh0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TuWh0.png" alt="enter image description here" /></a></p>
  <p>I use a very small unencrypted video file <code>out.mp4</code>, so it can be loaded by once.</p>
  <pre><code>&lt;html&gt;
      &lt;video id=&quot;video&quot; controls src=&quot;out.mp4&quot;&gt;
      &lt;/video&gt;
  
      &lt;script&gt;
          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=&quot;avc1.42E01E, mp4a.40.2&quot;'
              var sourceBuffer = mediaSource.addSourceBuffer(mime);
              fetchBuffer('out.mp4', buffer =&gt; {
                  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();
          }
      &lt;/script&gt;    
  &lt;/html&gt;
  </code></pre>