Secure Streaming with DASH and DRM

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

La transmisión de medios es omnipresente... Escuchamos nuestras canciones favoritas mientras corremos o estamos sentados en el tren. Nos absorbemos en audiolibros escritos por nuestros autores favoritos. Vemos series de televisión o películas con nuestra familia y amigos. La transmisión de medios está en todas partes.. Hoy en día, con el creciente número de dispositivos y contenido, los proveedores deben mantenerse al día y ofrecer la reproducción más eficiente y fluida a todos los usuarios, sin importar dónde se encuentren, sin importar qué dispositivos usen. También deben cumplir con las normativas, para que ningún contenido pueda ser distribuido sin el consentimiento y conocimiento de los productores.


En esta charla, vamos a aprender cómo transmitir medios en la Web. Aprenderemos sobre las tecnologías comunes como la segmentación, la tasa de bits adaptativa (ABR) y el protocolo DASH utilizado para proporcionar una reproducción eficiente y fluida. Veremos en detalle cómo funciona la descodificación de contenido con licencia gracias a Encrypted Media Extensions (EME). Por último, pero no menos importante, veremos todo esto en acción, durante la demostración, al final de la presentación.


Si estás interesado en aprender cómo las compañías de streaming más grandes del mundo transmiten su contenido, únete a mí en esta sesión.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

Katarzyna Dusza
Katarzyna Dusza
30 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy explora la transmisión moderna y segura en la web, cubriendo temas como la segmentación, las extensiones de fuente de medios, el protocolo dash y la encriptación/desencriptación con extensiones de medios encriptados. Se discute el formato MP4, incluyendo la estructura de átomos y la fragmentación. Se explica el uso del protocolo de transmisión MPEG-DASH para fragmentar archivos y crear un manifiesto dash. La protección de contenido y la reproducción se manejan a través de extensiones de fuente de medios, componentes de desencriptación y la creación de claves de desencriptación. Se realiza una demostración para mostrar la preparación, encriptación y reproducción de contenido encriptado. Se enfatiza la importancia de la segmentación, las extensiones de fuente de medios, la encriptación y la gestión de derechos digitales para asegurar una distribución de contenido fluida y segura.

1. Introduction to Modern Streaming

Short description:

Hoy exploraremos cómo funciona la transmisión moderna y segura en la web. Cubriremos temas como la segmentación, las extensiones de fuente de medios, el protocolo dash y la encriptación/desencriptación con extensiones de medios encriptados. Veremos una demostración y concluiremos resumiendo lo que hemos aprendido. Comencemos con el ejemplo clásico de reproducir un video usando elementos HTML. Sin embargo, este enfoque tiene limitaciones en el control de la fracción de datos y la reproducción de contenido encriptado. Los elementos de medios HTML actuales no proporcionan suficiente control sobre la descarga de datos, lo que podría causar retrasos en la reproducción.

¡Hola a todos! Muchas gracias por unirse a mi charla hoy. ¿Alguna vez se han preguntado cómo las compañías de transmisión más grandes del mundo transmiten su contenido? Si es así, están en la sesión correcta porque hoy vamos a aprender cómo funciona la transmisión moderna y segura en la web. Pero antes de saltar y comenzar a explorar, me gustaría presentarme rápidamente. Así que, mi nombre es Kasia. Estoy en mi segundo año trabajando en Spotify. Mi equipo y yo desarrollamos un SDK que impulsa el reproductor de Spotify en la web. Y aparte de eso, me gustan los juegos de mesa y ver películas y series de televisión.

La agenda de hoy es la siguiente. Así que, hoy vamos a hablar sobre la transmisión fluida y segura. Y aquí, cubriremos algunos temas como la segmentación, las extensiones de fuente de medios, así como el protocolo dash, pero también la encriptación y desencriptación con extensiones de medios encriptados. Más tarde, pondremos la teoría en acción y veremos la parte de demostración. Y por último, pero no menos importante, haremos un resumen rápido. Así que, básicamente resumiremos lo que hemos aprendido hoy. Solo para que lo sepan, hoy no hablaré sobre los aspectos internos de Spotify, sino más bien sobre una forma estándar de transmitir medios en la web.

Genial, así que comencemos con esta transmisión fluida y segura. Así que, supongo que este es como el ejemplo más clásico de cómo reproducir contenido de video usando elementos HTML. Como pueden ver, tenemos un elemento de medios HTML de video. Tenemos un archivo de medios, que es BigBugBunnyMP4, y simplemente lo asignamos al atributo source. Es un ejemplo clásico. Es muy fácil. Podemos simplemente reproducir el contenido de inmediato. Pero este enfoque tiene dos problemas. Primero, no nos permite controlar la fracción de reproducción de los datos. Y además, no nos permite reproducir contenido encriptado. Y estos dos son muy importantes cuando se trata de la transmisión fluida y segura.

¿Y a qué me refiero con eso? Bueno, cuando se trata del primero, es muy importante jugar con la fracción de datos cuando se trata de la reproducción fluida. Y aunque los elementos de medios HTML actuales ya lo soportan, al descargar una fracción de datos a través de la solicitud X range, no te dan mucho control sobre cuántos datos te gustaría descargar. Así que, por ejemplo, no puedes realmente decidir cuántos datos te gustaría almacenar en búfer al principio de la reproducción o también durante la reproducción mientras continúa. Además, si algunos CDNs o servidores no soportan las solicitudes X range en absoluto, entonces en este caso, el navegador intentará descargar un archivo completo antes de la reproducción.

2. Playing Encrypted Content and MP4 Format

Short description:

Nos centraremos en la reproducción de contenido encriptado y el formato MP4. MP4 consiste en átomos como FtipAtom, MoveAtom y MDATAtom. Fragmentar el archivo resulta en un segmento de inicio y segmentos de medios. Cada segmento contiene átomos específicos como Move y MDAT. El segmento actual no necesita conocer los segmentos anteriores o siguientes para ser reproducible.

Y cuando se trata del segundo, reproducir contenido encriptado, esto es algo autoexplicativo, pero en este caso, también tenemos que usar algo de lógica adicional para desencriptar el contenido una vez que está encriptado. Y este enfoque no puede hacer eso por nosotros. Así que, esto es en lo que nos vamos a centrar hoy.

Y antes de empezar a profundizar en esto, solo quería mencionar dos cosas. Así que, la primera es que me voy a centrar en el formato MP4 hoy porque es el formato más común usado en String, y también me voy a centrar en los archivos de video hoy solo para hacer las cosas interesantes, especialmente para la parte de demostración. Pero todos los comandos o toda la información que encontrarás hoy y aprenderás hoy también se aplican a archivos solo de audio.

Así que, echemos un vistazo a cómo se ve el formato MP4. Así que, esta es la estructura MP4. MP4 consiste en átomos. Así que, todas las abreviaturas peculiares que puedes ver aquí se llaman átomos. Tenemos FtipAtom, que es el tipo de archivo. Tenemos MoveAtom, que es mover metadatos. Y también, tenemos MDATAtom, que es básicamente una carga útil de audio o video. Y luego, si decidimos fragmentarlo, que es como un paso intermedio hacia la reproducción y descarga de solo una fracción de datos, entonces notaremos algunas diferencias muy grandes en la estructura.

La primera es que obtendremos un segmento de inicio y luego obtendremos un montón de segmentos de medios. Dentro de un segmento de inicio, tendremos FtipAtom y MoveAtom, pero ahora el MoveAtom también contiene el átomo MVEX, que significa Movie Extents e indica que al menos uno de los flujos se fragmentó. Cuando se trata del segmento de medios, también tendremos dos átomos. Uno de ellos es Move, que es algo similar al Move que puedes ver en el lado izquierdo, pero es solo dedicado para ese segmento específico. Por eso tenemos la F al final. Y también tenemos el átomo MDAT, que sigue siendo una carga útil de audio o video, pero solo para ese segmento específico. En este punto, también vale la pena mencionar que el segmento actual no tiene que saber nada sobre el segmento anterior o el siguiente. La única información que necesita para ser reproducible es el segmento de inicio y eso es todo.

¡Genial!

3. Fragmenting the File

Short description:

Usé la herramienta Pentopore y el comando mp4 fragment para fragmentar el archivo. La versión fragmentada tiene múltiples átomos, incluyendo el segmento init y segmentos de medios. Sin embargo, todavía no podemos cumplir con los criterios especificados.

Entonces, usé la herramienta Pentopore y el comando mp4 fragment, y fragmenté el archivo. Así que, en el lado izquierdo, puedes ver cómo se ve para BigBugBunny, y esta es la versión fragmentada. Así que, primero teníamos tres átomos, y luego, como puedes ver, tengo muchos de ellos. Y los dos primeros son el segmento init, y luego tenemos primero Move, MDAT Move, MDAT Move, MDAT. Así que, todos estos son los segmentos de medios. Esto es genial. Así que, en este punto, solo fragmentamos el archivo, lo cual es increíble, pero todavía no podemos cumplir con ninguno de los dos criterios que especificamos al principio.

4. Using MPEG-DASH Streaming Protocol

Short description:

Para dividir el archivo en múltiples piezas, necesitamos usar el protocolo de streaming MPEG-DASH. Este protocolo nos permite fragmentar el archivo y descargar los segmentos para la reproducción. Al ejecutar el comando mp4-dash, obtenemos carpetas de audio y video con archivos más pequeños. El archivo 8 MP4 en la carpeta de audio está encriptado con Widevine y contiene átomos adicionales. El manifiesto dash, representado por el archivo stream MPD, proporciona información sobre cómo reproducir el contenido y dónde encontrarlo, incluyendo la duración y cualquier período para la inserción de contenido dinámico.

no podemos cumplir con ninguno de los dos criterios que especificamos al principio. Y esto es porque aunque fragmentamos el archivo, fragmentamos su estructura, sigue siendo un solo archivo.

Así que, en su lugar, para continuar y de alguna manera dividir el archivo en múltiples piezas, que es básicamente uno de nuestros objetivos, tenemos que hacer algo adicional. Y esta cosa adicional es un protocolo de streaming. MPEG-DASH es uno de los protocolos de streaming más comunes. DASH significa Dynamic Adaptive Streaming over HTTP, y es desarrollado por DASH Industry Forum.

Y como dije, con ese protocolo, podremos básicamente dividir el archivo en múltiples piezas y luego descargar los segmentos y básicamente continuar con la reproducción. Entonces, ¿cómo funciona? Primero, tenemos que fragmentar el archivo, lo cual ya hicimos en las diapositivas anteriores. Y luego ejecutamos el comando que puedes ver en la diapositiva, que es mp4-dash. Con este comando, obtendremos este resultado. Así que, primero, obtendremos dos carpetas, audio y video, para los streams de audio y video, respectivamente. Y también el archivo stream MPT, que es el manifiesto DASH. Volveré a eso más tarde. Para las carpetas de audio y video, si entro en cualquiera de estas dos, verás que en lugar de un archivo, tenemos un montón de archivos más pequeños.

Y el primero es el 8 MP4, mientras que el resto de ellos son segmentos de medios prefijados con seg, básicamente. Así que, de un archivo, literalmente pasamos a un montón de archivos más pequeños, lo cual es genial. Con el comando que puedes ver en la parte inferior, puedes notar que también encriptamos este contenido, diciendo que nos gustaría encriptarlo con Widevine. También proporcionamos la clave de encriptación. Así que, aquí también vale la pena notar que el 8 MP4 ahora tendrá átomos adicionales. Y estos átomos son PSSH y el SYNTH. PSSH significa Protection System Specific Header, y contiene IDs para las claves que se usarán para desencriptar el contenido.

Mientras que el átomo SYNTH que significa Protection Schema Information es también muy importante, porque participa durante el proceso de desencriptación, lo cual también descubrirás en las próximas diapositivas. Increíble, eso fue para el INIT MP4. Y ahora, volviendo rápidamente a la diapositiva anterior. Así que, te dije antes que también tenemos el archivo stream MPD en el resultado, y este es el manifiesto dash. Así que, el manifiesto dash es un archivo basado en XML, y es como una receta de cómo reproducir el contenido y dónde encontrarlo. Y su estructura se ve así. Así que, en el elemento raíz, tenemos el elemento MPD, que se llama media position description, y contiene información como duración o título, y así sucesivamente. Luego, dentro, podemos tener uno o más períodos. Y el período es una ventana de tiempo dentro de la cual esperamos que se presente el contenido.

5. Understanding Dash Manifest and MSE

Short description:

Dentro de un período, tenemos conjuntos de adaptación y elementos de representación. El Dash Manifest sirve como una receta para reproducir y localizar contenido. Las extensiones de fuente de medios (MSE) se utilizan para asignar el objeto de fuente de medios y crear un búfer de fuente para la reproducción.

Luego, dentro de un período, podemos tener uno o más conjuntos de adaptación, y el conjunto de adaptación es como una representación de un contenido dado. Así que, por ejemplo, si piensas en video, por ejemplo, y sabemos que el video puede tener dos streams, como audio y video para sonido e imagen, esto también se describirá en conjuntos de adaptación separados, solo para darte una idea. Y luego, dentro de un conjunto de adaptación, podemos tener uno o más elementos de representación. Y el mejor caso de uso para que la representación tenga muchos elementos de representación es el que soportamos, WPBitrate, pero esto está fuera del alcance de la presentación de hoy.

Y así es como se ve el Dash Manifest en realidad. Como puedes ver, es un archivo basado en XML y mencioné al principio que es como una receta de cómo reproducir el contenido y dónde encontrarlo. Así que, aquí he resaltado alguna información que será útil para saber cómo reproducir el contenido. Y estos son el myPipe y los códecs. Así que, básicamente, tomaremos esta información y le diremos al navegador más tarde qué contenido puede esperar que sea reproducible, como en unos pocos segundos.

En términos de dónde encontrarlo, aquí he resaltado algunos otros campos. Como puedes ver, tenemos la plantilla de segmento aquí, y tenemos dos campos, como inicialización y medios. Así que, estos dos, básicamente, si reemplazamos el ID de representación con el ID que he resaltado abajo, entonces obtendrás una ruta exacta al, o más bien la ubicación del segmento init o los segmentos de medios. Así que, por ejemplo, para el segmento init, se verá como video slash abc1 slash init.mp4. Y luego deberíamos poder obtener el primer archivo init.

6. Handling Content Protection and Playback

Short description:

En el dash manifest, tenemos información de protección de contenido e IDs base64 para la desencriptación. Para manejar múltiples archivos, usamos extensiones de fuente de medios (MSE). Creamos un elemento de medios de video HTML y asignamos el objeto de fuente de medios al campo de fuente. Luego, creamos un búfer de fuente y añadimos segmentos para la reproducción. A continuación, cubriremos el proceso de desencriptación, pero primero, repasemos algunos conceptos básicos: DRM, EME y módulo CDN.

Porque con el comando dash, también incluimos el contenido, en el dash manifest, también veremos algunos elementos adicionales. Y uno de ellos es la protección de contenido. Y como puedes ver, también tenemos información, como la información base64 sobre los IDs de las claves que se usarán para desencriptar el contenido más adelante durante el proceso de desencriptación. Increíble.

Así que, eso fue para el dash manifest. Y esto es genial, porque en este punto, dividimos el archivo en múltiples piezas, ¿verdad? Así que, estos dos ejemplos que hemos visto antes, bueno, ya no funcionarán para nosotros. Y esto es porque, como puedes ver, anteriormente asignamos solo un archivo al atributo de fuente, pero ahora tenemos muchos de ellos. Así que, en su lugar, tenemos que usar extensiones de fuente de medios, o MSE en corto.

¿Y qué significa eso? Es que todavía tenemos que crear un elemento de medios de video HTML. Pero luego, en lugar de asignar el archivo al atributo de fuente, podemos crear el objeto de fuente de medios y asignarlo al campo de fuente a través del método create object URL. Y una vez que hemos hecho eso, entonces podemos realmente crear un búfer de fuente y añadirlo a la fuente de medios recién creada. Y al hacerlo, pasaremos el my type y los códecs, aquellos que fueron mencionados en el dash manifest. Así que, básicamente, este es el lugar donde le decimos al navegador qué contenido puede esperar. Y más tarde, una vez que hemos hecho eso, entonces podemos realmente comenzar a obtener todos los segmentos del CDN, por ejemplo, y añadir esos búferes al búfer de fuente recién creado. Y básicamente, así es como funciona la reproducción de ahora en adelante. Y en este punto, podemos decir que tenemos control sobre la reproducción de una fracción de los datos, porque podemos decidir cuánto nos gustaría almacenar en el búfer al principio, o en el medio, o incluso al final. Básicamente depende de nosotros.

Pero todavía no podemos reproducir contenido encriptado, porque acabamos de encriptarlo, y podría haber algún tipo de proceso de desencriptación también, ¿verdad? Y no hemos cubierto eso aún. Así que, esto es lo que vamos a cubrir en las próximas diapositivas. Pero antes de entrar en el proceso de desencriptación, solo quería repasar algunos conceptos básicos.

Y el primero es el DRM, que significa Digital Rights Management. Y es una tecnología utilizada para proteger el contenido de uso no autorizado y controlar su distribución. Y hay tres DRMs principales que son Google WideVine, Apple Fairplay, y Microsoft Playready.

Luego, tenemos EME, que significa Encrypted Media Extensions. Y esta es la API que desencripta el contenido por ti. Así que, esta es básicamente la API que se encuentra entre tu aplicación y el módulo CDN. El módulo CDN es un Módulo de Encriptación de Contenido. Y esto es como un software, un binario que viene junto con tu instalación del navegador. Así que, realmente no puedes ver lo que hay dentro. No es de código abierto, lo cual es bastante obvio, dada su funcionalidad.

7. Decryption Process and Components

Short description:

CNC significa Common Encryption y es compatible con todos los DRMs. El proceso de desencriptación involucra componentes como CDN, aplicación web, reproductor, servidor de licencias, navegador y módulo CDN. Para reproducir contenido encriptado, lo buscamos desde el CDN y el navegador emite un evento encriptado. El método requestMediaKeySystemAccess se utiliza para verificar si el sistema de claves y las configuraciones son compatibles. El método createMediaKeys devuelve el objeto de claves de medios, que permite la comunicación con el módulo CDN. El método searchServerCertificate encripta la comunicación entre el módulo CDN y el servidor de licencias.

Y por último, pero no menos importante, tenemos CNC, que significa Common Encryption. Y este es el esquema de encriptación inicial que es compatible con todos los DRMs. Muy bien. Así que, esos fueron todos los conceptos básicos que quería repasar.

Y ahora vamos a adentrarnos en el proceso de desencriptación. Así que, para el proceso de desencriptación, tenemos cinco componentes diferentes. Los rojos en el lado izquierdo son creados y mantenidos por nosotros. Y estos son CDN, la aplicación web con el reproductor, y también el servidor de licencias que servirá las licencias con las claves dentro. Y en el lado derecho, tenemos los verdes que están fuera de nuestro control, que son el navegador y el módulo CDN.

Así que, para poder reproducir contenido encriptado, primero tenemos que buscarlo desde el CDN. Y luego, tenemos tiempo para reproducirlo. En este punto, el navegador detecta que es un contenido encriptado, porque tiene SynthAtom. Recuerdas, como en la diapositiva anterior, SynthAtom. Así que, eso fue como por qué te dije que es muy importante. Así que, básicamente, en este punto, una vez que el navegador detectó que es un contenido encriptado, emite un evento encriptado. Y aquí es básicamente donde todo el proceso de desencriptación comienza.

Así que, lo que hacemos en el lado del reproductor, llamamos al método requestMediaKeySystemAccess. Sé que es largo, con dos parámetros. Y uno de ellos es keysystem, y el otro es una lista de configuraciones. Y un keysystem es un término genérico para un proveedor de protección de código o el mecanismo de desencriptación. Y es, como puedes notar en la diapositiva, generalmente un nombre de dominio inverso. Así que, lo que hacemos aquí con este método, básicamente le preguntamos al módulo CDN si el sistema de claves y al menos una de las configuraciones son compatibles. Y si lo son, entonces obtenemos un objeto MediaKeySystemAccess de vuelta. Y aquí dejé una de las funciones que nos interesa, que es el createMediaKeys.

Así que, como siguiente paso, tomamos este método createMediaKeys y lo llamamos. Como resultado, deberíamos obtener el objeto de claves de medios de vuelta. Y este objeto es bastante interesante porque es como una representación exacta de un módulo CDN. Esta es básicamente la única forma en que podemos comunicarnos con él. Y como puedes ver, uno de los métodos aquí es el searchServerCertificate. Y esto es bastante útil porque la comunicación entre el módulo CDN y el servidor de licencias puede ser encriptada usando este método.

8. Creating Session and Obtaining Decryption Keys

Short description:

El método createSession crea una sesión para obtener claves de desencriptación. El método generateRequest reenvía la solicitud al módulo CDM. El controlador de eventos onMessage escucha los mensajes y realiza una solicitud POST al servidor de licencias para obtener la licencia ofuscada. Luego, la licencia se pasa al módulo de desencriptación de contenido para desempaquetar y desencriptar el marco. Ahora tenemos control sobre la reproducción de contenido encriptado y no encriptado. ¡Hora de una demostración!

Y el segundo método, createSession, es bastante autoexplicativo. Entonces, este método creará una sesión dentro de la cual obtendremos las claves para desencriptar el contenido. Pero antes de llamar a cualquiera de estos métodos, primero tenemos que tomar el objeto de claves de medios que acabamos de obtener, y tenemos que asignarlo al elemento de medios HTML de video o audio. Pero en nuestro caso, estamos trabajando con video hoy. Así que, una vez que hemos hecho eso, entonces podemos realmente llamar al método createSession y acepta solo un parámetro, que es el tipo de la sesión. Por defecto, siempre crea una temporal, pero también puedes crear una persistente, pero requiere un nivel más alto de seguridad. Así que, por defecto, podemos simplemente ir con el tipo temporal, que es lo que hacemos. Y luego, como resultado, deberíamos obtener el objeto de sesión de claves de medios de vuelta. Y aquí, enumeré tres de los métodos más importantes aquí.

Y como siguiente paso, obtendremos el método generateRequest con dos parámetros, anyDataType y anyData. Y ahora, estos dos provienen, solos, del evento encriptado que fue emitido al principio por el navegador. Así que, lo que hacemos aquí, obtenemos lo que sea que fue llamado al principio, lo que sea que fue incluido en el evento encriptado al principio, y simplemente lo pasamos al método generateRequest. Y lo que sucede después es que esta solicitud se reenvía al módulo CDM. Y el módulo CDM, en este punto, se da cuenta, está bien, entonces este es un contenido encriptado, y para desencriptarlo, necesito una clave. Así que, emitiré un evento de mensaje, que básicamente significa que necesito una clave. Así que, lo que hacemos en el lado del reproductor, escuchamos tales mensajes a través del controlador de eventos onMessage. Así que, una vez que recibimos tal mensaje, entonces hacemos una solicitud POST al servidor de licencias para obtener la licencia. Si todo va bien, obtenemos la licencia de vuelta. Y como mencioné, esta también está, por supuesto, encriptada, pero la licencia en sí que contiene las claves también está ofuscada. Así que, si ves el evento dentro por alguna razón cómo se ve, esta información solo es comprensible por el módulo de desencriptación de contenido. Así que, volviendo al proceso, una vez que obtenemos la licencia de vuelta, la enviamos al módulo de desencriptación de contenido a través del método update. Así que, una vez que el módulo de desencriptación de contenido la obtiene, entonces puede tomarla, desempaquetarla, tomar la clave, y luego desencriptar el marco y proporcionar el marco desencriptado de vuelta al usuario. Así que, ahora básicamente pueden disfrutar viendo un video o escuchar una canción.

Así que, sí, sé que fue un proceso bastante complejo, pero ¡hey, lo hicimos! Así que, pasamos por todas las partes, lo cual es genial. Y ahora, con eso dicho, podemos decir con seguridad que apoyamos ambos criterios que especificamos al principio. Así que, ahora podemos, tenemos control sobre la reproducción de una fracción de los datos, pero también podemos reproducir contenido no encriptado, lo cual es genial. Y dicho esto, ahora creo que es hora de una demostración. Así que, echemos un vistazo rápido a cómo funciona todo en acción. Así que, aquí preparé para ti una aplicación web en el lado izquierdo que puedes notar. Y también puedes ver que estoy recibiendo muchos errores.

9. Preparing and Encrypting Content

Short description:

Y esto es lo que vamos a hacer en esta demostración. Prepararemos el contenido en el terminal, lo fragmentaremos y lo encriptaremos con white wine. La carpeta resultante contendrá flujos de audio y video encriptados, ambos protegidos con color protection. El sitio web y la aplicación registrarán el evento y mensaje encriptados, y llamaremos a varios métodos desde el lado del cliente.

Y esto es porque no tengo ningún contenido para reproducir. Y esto es lo que vamos a hacer en esta demostración. Y en el lado derecho, puedes ver que tengo un terminal... Espera un segundo, solo un segundo, un segundo, ajustaré esto rápidamente. Sí, así que tengo un terminal y este es básicamente el lugar donde vamos a preparar el contenido que se servirá en la aplicación web. Y como puedes ver, ya tengo BigBugBunny.mp4, que es el archivo original.

Y el siguiente paso, si recuerdas, tengo que fragmentarlo. Así que, estoy tomando el BigBugBunny como entrada y BigBugBunny.fragmented como salida. Y ahora tenemos dos archivos. Y luego el siguiente paso es ejecutar el comando mp4 con todas las opciones que has visto en la diapositiva anterior. Y como entrada, estoy tomando el BigBugBunny.fragmented. También estoy proporcionando la clave de encriptación. Y también, estoy indicando que me gustaría encriptar este contenido con white wine. Así que, estoy ejecutando este comando ahora mismo.

Y como resultado, obtuve la carpeta de salida. Así que, si entro en esta carpeta, verás que tengo carpetas de audio y video con el stream NPD que es Dash Manifest. Echemos un vistazo a este. Y como puedes ver, tiene como un elemento NPD. Es un archivo basado en XML. Y también podemos ver que tenemos dos elementos, una color protection para el conjunto de adaptación con video aquí. Y también, otro para audio aquí. Tenemos audio aquí y otra color protection. Así que, con este podemos decir que realmente encriptamos un contenido como ambos flujos, audio y video. Y ahora, si salgo rápidamente y voy a video.abc1, solo para mostrarte cómo se ve el montón de archivos más pequeños. Así que, tenemos como realmente muchos de ellos. Y el primero es el init.mp4, como pudiste ver en las diapositivas. Y luego tenemos un montón de archivos con prefijos también. Así que, si ahora actualizo el sitio web y la aplicación, obtuvimos algunos registros de consola, lo cual es bueno. Así que, como puedes ver, el navegador envió el evento encriptado y también el mensaje, que fue como la clave es necesaria. Y desde el lado del cliente, llamamos a muchos, muchos métodos como el createMediaKey, system access y el createMediaKeys.

10. Playing Encrypted Content and Tools

Short description:

Reproducimos con éxito contenido encriptado. Las herramientas utilizadas demostraron la estructura de los archivos MP4. La segmentación y las extensiones de fuente de medios aseguran una reproducción fluida y controlan el almacenamiento en búfer. La encriptación y la gestión de derechos digitales protegen el contenido del uso no autorizado y controlan la distribución. Se proporcionan recursos y herramientas para una mayor exploración.

Así que, todos ellos que fuimos haciendo el proceso de descifrado en las diapositivas. Y ahora, si intento reproducirlo, veamos. Momento de la verdad. Sí. Funciona, lo cual es genial. Así que, básicamente, reproducimos un contenido encriptado.

Y solo para mostrarte rápidamente, esta es una de las herramientas, otra herramienta, que es bastante útil porque puede representar todos los archivos mp4 en la estructura de árbol. Así que, si selecciono la salida, por ejemplo, video.abc1.init.mp4, entonces verás que en el elemento move, tengo el PSSH que te mencioné antes. Y luego, si voy aquí y aquí, y creo que no aquí, aquí, y std, std, y aquí, entonces obtuvimos el mismo átomo también. Así que, realmente puedes ver que el 8-mp4, que es el primer segmento, contiene estos átomos adicionales que te mencioné antes.

Muy bien. Así que, eso fue todo para la parte de la demostración. Ahora, volvamos rápidamente a la presentación y hagamos un resumen rápido. Así que, la segmentación y las extensiones de fuente de medios, son bastante útiles porque nos ayudan a asegurar una reproducción fluida. Y gracias a ellas, podemos reproducir una fracción de datos y también podemos controlar el almacenamiento en búfer. En cuanto a la encriptación y la gestión de derechos digitales, la encriptación en sí misma es muy importante porque los proveedores de contenido pueden mantenerse en conformidad.

Para la gestión de derechos digitales, esta tecnología es útil porque protege el contenido del uso no autorizado y también controla su distribución. Las extensiones de medios encriptados, que es el EME en corto, que es la API, nos permite descifrar el contenido y también reproducirlo al usuario. Y por supuesto, no olvides el módulo de descifrado de contenido, que es básicamente el corazón de todo el proceso de descifrado. Genial. Así que, solo quería compartir contigo algunos recursos. Así que, en el lado izquierdo, puedes encontrar algunas de las especificaciones que utilicé para preparar esta presentación y también la aplicación de demostración. Realmente te animo a que las revises y también algunos enlaces de video. Y en el lado derecho, puedes encontrar algunas de las herramientas que utilicé hoy, principalmente el Pentor 4 y Mudoteca. Así que, si te gustaría jugar un poco con MP4, siéntete libre de hacerlo. Es bastante genial. Y dicho esto, muchas gracias por unirte. Estoy muy honrado de estar aquí. Y en la esquina superior derecha, puedes encontrar el código QR que te llevará a mi repositorio en mi cuenta de GitHub, donde encontrarás la aplicación de demostración que utilicé hoy. Así que, siéntete libre de clonarla o bifurcarla y jugar con ella. Siéntete libre también de contactarme a través de LinkedIn. Y si estás interesado en la tasa de bits adaptativa, también puedes escanear los códigos QR en la esquina inferior izquierda para ver la parte de la tasa de bits adaptativa. Y sí, muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web
JSNation US 2024JSNation US 2024
148 min
Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web
Featured Workshop
Gregor Biswanger
Gregor Biswanger
En esta masterclass práctica, estarás equipado con las herramientas para probar efectivamente la seguridad de las aplicaciones web. Este curso está diseñado tanto para principiantes como para aquellos que ya están familiarizados con las pruebas de seguridad de aplicaciones web y desean ampliar su conocimiento. En un mundo donde los sitios web juegan un papel cada vez más central, asegurar la seguridad de estas tecnologías es crucial. Comprender la perspectiva del atacante y conocer los mecanismos de defensa apropiados se han convertido en habilidades esenciales para los profesionales de TI.Esta masterclass, dirigida por el renombrado entrenador Gregor Biswanger, te guiará a través del uso de herramientas de pentesting estándar de la industria como Burp Suite, OWASP ZAP y el marco profesional de pentesting Metasploit. Aprenderás a identificar y explotar vulnerabilidades comunes en aplicaciones web. A través de ejercicios prácticos y desafíos, podrás poner en práctica tu conocimiento teórico y expandirlo. En este curso, adquirirás las habilidades fundamentales necesarias para proteger tus sitios web de ataques y mejorar la seguridad de tus sistemas.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
Workshop
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.