Tengo archivos de video alojados en el CDN, el archivo de video está encriptado. Así que necesito descifrarlo antes de reproducirlo en el navegador. Pero la etiqueta de video web no tiene una interfaz para modificar el flujo de medios.
Así que quiero ejecutar un proxy en el lado del cliente con javascript para representar la solicitud de transmisión de medios y descifrar la transmisión antes de llegar a la etiqueta de video.
¿Es posible?
Por la respuesta de math-chen , probé el código a continuación, pero cuando lo reproduzco, el video sigue girando y no muestra el cuadro como se muestra a continuación.
Utilizo un archivo de video muy pequeño sin cifrar out.mp4 , por lo que se puede cargar una vez.
<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>no necesita un proxy
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); }); }