SlideShare una empresa de Scribd logo
Cifrado de flujos de v´ıdeo en HTML5
Manuel Mancera Jim´enez
M´aster en Telem´atica y Redes de Telecomunicaci´on
Universidad de M´alaga
17 de diciembre de 2014
Manuel Mancera Jim´enez (Univ. M´alaga) Cifrado de flujos de v´ıdeo en HTML5 17 de diciembre de 2014 1 / 13
Cifrado de flujos de v´ıdeo en HTML5
Contexto Tecnol´ogico
El uso de la web para el consumo de v´ıdeo esta creciendo a gran
velocidad. Cada dispositivo nuevo que sale al mercado es capaz de
reproducir contenido multimedia entregado mediante HTTP.
En 2013 el tr´afico de v´ıdeo es de un 66 %, en 2018 se estima un 79 %1
El 85 % de los usuarios de Internet ven v´ıdeo en la web.
Cada mes se consume 40 billones de contenido multimedia.
M´as del 80 % de los navegadores m´oviles y de escritorio implementan
el tag de <video> de HTML5.
El uso de la web para ofrecer pay per view est´a en crecimiento, a la
vez que se esta haciendo incapi´e en que se cumplan los derechos de
autor en los contenidos multimedia.
1
Sin incluir P2P
Cifrado de flujos de v´ıdeo en HTML5
Conceptos
Criptograf´ıa: Es la ciencia que estudia como mantener la seguridad
en los mensajes.
Autenticacion: Confirmaci´on de la identidad de un usuario. Seg´un la
RAE, dar f´e de un hecho o documento.
Autorizacion: Proceso que determina qu´e, c´omo y cu´ando un usuario
autenticado puede utilizar los recursos del sistema.
Digital Rights Management (DRM): Tecnolog´ıas que permiten a
los propietarios y proveedores de contenidos limitar el uso de medios o
dispositivos digitales.
Dynamic Adaptative Streaming over HTTP (DASH): T´ecnica
que permite streaming de calidad (seg´un disponibilidad) a trav´es de
Internet mediante un servidor HTTP.
Cifrado de flujos de v´ıdeo en HTML5
Tecnolog´ıas
HTML5
HTML5 es la quinta revisi´on del Lenguaje de Marcado de Hipertexto
(HTML) que se usa en la Web.
Encrypted Media Extensions: Es la API que permite la interacci´on
entre navegadores y sistemas de protecci´on de contenido.
Actualmente se es un borrador.
Media Source Extensions: Es una extensi´on para
HTMLMediaElement que permite un control m´as preciso sobre el
contenido multimedia a reproducir en el navegador.
Cross-origin resource sharing (CORS): Mecanismo que permite la
petici´on de recursos desde una p´agina web en un dominio a otro
dominio mediante JavaScript.
WebCrypto API: Define una API de bajo nivel para la interacci´on
con claves criptogr´aficas.
Cifrado de flujos de v´ıdeo en HTML5
Encrypted Media Extensions (EME)
EME
Est´a dise˜nado para poder permitir que la misma aplicaci´on y los archivos
cifrados puedan ser utilizado en cualquier navegador, independientemente
del sistema de protecci´on subyacente.
Componentes:
KeySystem: Mecanismo
de protecci´on.
CDM: Descifrado,
decodificaci´on y
reproducci´on del
contenido multimedia.
License Key Server:
Proporciona identificaci´on
del usuario e interacciona
con el CDM.
Encrypted Media Extensions (EME)
Content Decryption Module (CDM)
CDM
Es un t´ermino gen´erico para el componente del cliente que proporciona la
funcionalidad al sistema, incluyendo el descifrado, para uno o m´as sistemas
de clave.
Widevine: Mecanismo de
protecci´on para DRM de
Google.
PlayReady: Microsoft.
Adobe Access: DRM para
HTML5.
Fairplay: DRM de Apple.
Browser
EME and MSE
JS App
Widevide Server
License(s)
License(s)
request
License(s)
CDN
Encrypted video
CDM Wrapper
Widevine CDM
License(s)
License(s)
request
Encrypted
Frame
Decrypted
Frame
Cifrado de flujos de v´ıdeo en HTML5
Objetivos
Objetivo del proyecto
Ver las posibilidades que existen actualmente y desarrollar un sistema de
entrega de v´ıdeos cifrados bajo demanda usando unicamente HTML5.
¿Qu´e necesitamos?
Servidor web.
Servidor de aplicaciones: Django
Servidor de licencias.
Navegador que tenga implementado las tecnolog´ıas comentadas
anteriormente. En este caso usaremos Chrome
Cifrado de flujos de v´ıdeo en HTML5
Desarrollo
Servidor web:
Django. Servidor de aplicaciones en Python.
Contenido multimedia, entrega contenido multimedia al navegador
mediante el tag de video
P´aginas, servidas mediante el servidor de aplicaciones, contiene el
c´odigo HTML y JavaScript necesario para descifrar, reproducir e
interactuar con el servidor de claves.
Servidor de claves:
Recibe peticiones
HTTP desde el cliente
usando CORS
(JavaScript) y
responde a ellas con un
JSON.
Administra usuarios,
videos y claves desde
consola
Cifrado de flujos de v´ıdeo en HTML5
Funcionamiento del Sistema
Web server ClientKey Server
GET /page
Page with <video> tag and encrypted video
XMLHttpRequest() from JavaScript using HTML5 CORS to get the key
Json reponse with the key
Decrypt
the video with
JavaScript
(EME API)
Authenticate
User / Pass
Diagrama del funcionamiento del sistema
Cliente: Hace una
petici´on HTTP GET al
servidor web y una POST
al servidor de licencias.
Servidor de licencias:
Responde a la petici´on de
autenticaci´on devolviendo
la clave en caso
satisfactorio.
Servidor: Proporciona la
p´agina web y el contenido
multimedia cifrado.
Implementaci´on
Software utilizado
Servidor de aplicaciones:
Django. (Python)
IDEs:
Python: Ninja-IDE y nano.
JavaScript: SublimeText.
Servidor de licencias:
M´odulos usados en Python:
SimpleHTTPServer,BaseHTTPServer,json,optparse,hashlib,xml,logging
IDEs usados: Ninja-IDE y sublimeText.
Otras herramientas:
webm tools: Herramientas necesarias para trabajar con contenedores
webM.
FFmpeg: Herramienta para codificar v´ıdeo.
Implementaci´on
Python
M´odulos Python que se han usado
Servidor de licencias:
BaseHTTPServer: Clase para implementar servidores HTTP.
json: Clase para trabajar con JSON. Usada para crear el JSON que se
env´ıa con la clave del v´ıdeo, algoritmo y modo de cifrado. (JWK)
hashlib: M´odulo para trabajar con algoritmos de hash, usada para
almacenar las claves de los usuarios.
xml.etree.ElementTree: M´odulo para manejar XML.
logging: M´odulo para generar logs.
Otros m´odulos: sys, os y optparse.
Utilizaci´on del Sistema
Interfaces
Servidor web:
Instalar Django e iniciar con python manage.py runserver
Servidor de claves:
A˜nadir usuarios al sistema.
A˜nadir id de video y clave de descifrado al sistema.
Iniciar el servicio (o configurar el demonio e iniciarlo)
Cliente:
Configurar el cliente para usar EME, MSE, WebCrypto y CORS.
Cifrado de flujos de v´ıdeo en HTML5
Referencias
Propuesta EME. hhttp://www.w3.org/TR/encrypted-media/
Propuesta MSE. http://www.w3.org/TR/media-source/
Especificaci´on CORS. http://www.w3.org/TR/cors/
Recomendaci´on HTML5. http://www.w3.org/TR/html5/
Django Project. https://www.djangoproject.com/
WebM Project. http://www.webmproject.org/
Estimaciones de Cisco.
http://www.cisco.com/c/en/us/solutions/collateral/service-
provider/ip-ngn-ip-next-generation-network/white paper c11-
481360.html
Estado de implementaci´on HTML5 video en navegadores.
http://www.jwplayer.com/html5/

Más contenido relacionado

Similar a Cifrado de flujos de vídeo en HTML5

Servidores web
Servidores webServidores web
Servidores web
alejandrahuerta
 
paralelo html-html5
paralelo html-html5paralelo html-html5
paralelo html-html5
Jessica Martinez
 
Fuerza aerea ecuatoriana
Fuerza aerea ecuatorianaFuerza aerea ecuatoriana
Fuerza aerea ecuatoriana
David Chica
 
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisWebinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
Quobis
 
Presentación proyecto fin de carrera
Presentación proyecto fin de carreraPresentación proyecto fin de carrera
Presentación proyecto fin de carrera
Carlos Pérez Fernández
 
Desarrollo de aplicaciones web
Desarrollo de aplicaciones webDesarrollo de aplicaciones web
Desarrollo de aplicaciones web
Carlos Van de Velde
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenVidu
Micael Gallego
 
Juegos html5
Juegos html5Juegos html5
Juegos html5
Willy Aguirre
 
Html dulce mata (1)
Html dulce mata (1)Html dulce mata (1)
Html dulce mata (1)
DulceeMaria
 
Html daniela vargas
Html daniela vargasHtml daniela vargas
Html daniela vargas
VargasJor
 
Generación de web sites dinámicos usando php
Generación de web sites dinámicos usando phpGeneración de web sites dinámicos usando php
Generación de web sites dinámicos usando php
victdiazm
 
Generacion de web sites dinamico
Generacion de web sites dinamicoGeneracion de web sites dinamico
Generacion de web sites dinamico
Jose Luis Crespo
 
Bozadjie 5ª 1ª diapositivas 14 6-11
Bozadjie 5ª 1ª diapositivas 14 6-11Bozadjie 5ª 1ª diapositivas 14 6-11
Bozadjie 5ª 1ª diapositivas 14 6-11
zoe1995
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
Nicida Malca
 
Resumen tema 6 informática.
Resumen tema 6 informática.Resumen tema 6 informática.
Resumen tema 6 informática.
Lidia Sánchez
 
Resumen tema 6 informática.
Resumen tema 6 informática.Resumen tema 6 informática.
Resumen tema 6 informática.
Lidia Sánchez
 
Desarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos DeportivosDesarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos Deportivos
Adrian Alonso Vega
 
Unidad 4: Servicio web (HTTP)
Unidad 4: Servicio web (HTTP)Unidad 4: Servicio web (HTTP)
Unidad 4: Servicio web (HTTP)
carmenrico14
 
1.arquitectura web
1.arquitectura web1.arquitectura web
1.arquitectura web
gina huertas
 
Tecnologias web 2.0
Tecnologias web 2.0Tecnologias web 2.0
Tecnologias web 2.0
katerinemartinez14
 

Similar a Cifrado de flujos de vídeo en HTML5 (20)

Servidores web
Servidores webServidores web
Servidores web
 
paralelo html-html5
paralelo html-html5paralelo html-html5
paralelo html-html5
 
Fuerza aerea ecuatoriana
Fuerza aerea ecuatorianaFuerza aerea ecuatoriana
Fuerza aerea ecuatoriana
 
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisWebinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
 
Presentación proyecto fin de carrera
Presentación proyecto fin de carreraPresentación proyecto fin de carrera
Presentación proyecto fin de carrera
 
Desarrollo de aplicaciones web
Desarrollo de aplicaciones webDesarrollo de aplicaciones web
Desarrollo de aplicaciones web
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenVidu
 
Juegos html5
Juegos html5Juegos html5
Juegos html5
 
Html dulce mata (1)
Html dulce mata (1)Html dulce mata (1)
Html dulce mata (1)
 
Html daniela vargas
Html daniela vargasHtml daniela vargas
Html daniela vargas
 
Generación de web sites dinámicos usando php
Generación de web sites dinámicos usando phpGeneración de web sites dinámicos usando php
Generación de web sites dinámicos usando php
 
Generacion de web sites dinamico
Generacion de web sites dinamicoGeneracion de web sites dinamico
Generacion de web sites dinamico
 
Bozadjie 5ª 1ª diapositivas 14 6-11
Bozadjie 5ª 1ª diapositivas 14 6-11Bozadjie 5ª 1ª diapositivas 14 6-11
Bozadjie 5ª 1ª diapositivas 14 6-11
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
 
Resumen tema 6 informática.
Resumen tema 6 informática.Resumen tema 6 informática.
Resumen tema 6 informática.
 
Resumen tema 6 informática.
Resumen tema 6 informática.Resumen tema 6 informática.
Resumen tema 6 informática.
 
Desarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos DeportivosDesarrollo de una aplicación Web para organizar Eventos Deportivos
Desarrollo de una aplicación Web para organizar Eventos Deportivos
 
Unidad 4: Servicio web (HTTP)
Unidad 4: Servicio web (HTTP)Unidad 4: Servicio web (HTTP)
Unidad 4: Servicio web (HTTP)
 
1.arquitectura web
1.arquitectura web1.arquitectura web
1.arquitectura web
 
Tecnologias web 2.0
Tecnologias web 2.0Tecnologias web 2.0
Tecnologias web 2.0
 

Último

COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docxCOMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
Jean Apellidos
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
vicenteariana54
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
erick502105
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
WillyBernab
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
LuisAlbertoCordovaBa
 
Sesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artificalSesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artifical
Angeles del Rosario Escobar Mendoza
 
Oruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico magoOruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico mago
ChichipeSevillaJhost
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
EmilyEsmeraldaQuispe
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
al050121024
 
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdfextraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
JENNYMARITZAHUILLCAR
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
NoraRoberts5
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
ruthechepurizaca
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 

Último (15)

COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docxCOMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
 
Sesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artificalSesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artifical
 
Oruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico magoOruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico mago
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
 
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdfextraccion-de-alcaloides-de-la-planta-de-coca.pdf
extraccion-de-alcaloides-de-la-planta-de-coca.pdf
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 

Cifrado de flujos de vídeo en HTML5

  • 1. Cifrado de flujos de v´ıdeo en HTML5 Manuel Mancera Jim´enez M´aster en Telem´atica y Redes de Telecomunicaci´on Universidad de M´alaga 17 de diciembre de 2014 Manuel Mancera Jim´enez (Univ. M´alaga) Cifrado de flujos de v´ıdeo en HTML5 17 de diciembre de 2014 1 / 13
  • 2. Cifrado de flujos de v´ıdeo en HTML5 Contexto Tecnol´ogico El uso de la web para el consumo de v´ıdeo esta creciendo a gran velocidad. Cada dispositivo nuevo que sale al mercado es capaz de reproducir contenido multimedia entregado mediante HTTP. En 2013 el tr´afico de v´ıdeo es de un 66 %, en 2018 se estima un 79 %1 El 85 % de los usuarios de Internet ven v´ıdeo en la web. Cada mes se consume 40 billones de contenido multimedia. M´as del 80 % de los navegadores m´oviles y de escritorio implementan el tag de <video> de HTML5. El uso de la web para ofrecer pay per view est´a en crecimiento, a la vez que se esta haciendo incapi´e en que se cumplan los derechos de autor en los contenidos multimedia. 1 Sin incluir P2P
  • 3. Cifrado de flujos de v´ıdeo en HTML5 Conceptos Criptograf´ıa: Es la ciencia que estudia como mantener la seguridad en los mensajes. Autenticacion: Confirmaci´on de la identidad de un usuario. Seg´un la RAE, dar f´e de un hecho o documento. Autorizacion: Proceso que determina qu´e, c´omo y cu´ando un usuario autenticado puede utilizar los recursos del sistema. Digital Rights Management (DRM): Tecnolog´ıas que permiten a los propietarios y proveedores de contenidos limitar el uso de medios o dispositivos digitales. Dynamic Adaptative Streaming over HTTP (DASH): T´ecnica que permite streaming de calidad (seg´un disponibilidad) a trav´es de Internet mediante un servidor HTTP.
  • 4. Cifrado de flujos de v´ıdeo en HTML5 Tecnolog´ıas HTML5 HTML5 es la quinta revisi´on del Lenguaje de Marcado de Hipertexto (HTML) que se usa en la Web. Encrypted Media Extensions: Es la API que permite la interacci´on entre navegadores y sistemas de protecci´on de contenido. Actualmente se es un borrador. Media Source Extensions: Es una extensi´on para HTMLMediaElement que permite un control m´as preciso sobre el contenido multimedia a reproducir en el navegador. Cross-origin resource sharing (CORS): Mecanismo que permite la petici´on de recursos desde una p´agina web en un dominio a otro dominio mediante JavaScript. WebCrypto API: Define una API de bajo nivel para la interacci´on con claves criptogr´aficas.
  • 5. Cifrado de flujos de v´ıdeo en HTML5 Encrypted Media Extensions (EME) EME Est´a dise˜nado para poder permitir que la misma aplicaci´on y los archivos cifrados puedan ser utilizado en cualquier navegador, independientemente del sistema de protecci´on subyacente. Componentes: KeySystem: Mecanismo de protecci´on. CDM: Descifrado, decodificaci´on y reproducci´on del contenido multimedia. License Key Server: Proporciona identificaci´on del usuario e interacciona con el CDM.
  • 6. Encrypted Media Extensions (EME) Content Decryption Module (CDM) CDM Es un t´ermino gen´erico para el componente del cliente que proporciona la funcionalidad al sistema, incluyendo el descifrado, para uno o m´as sistemas de clave. Widevine: Mecanismo de protecci´on para DRM de Google. PlayReady: Microsoft. Adobe Access: DRM para HTML5. Fairplay: DRM de Apple. Browser EME and MSE JS App Widevide Server License(s) License(s) request License(s) CDN Encrypted video CDM Wrapper Widevine CDM License(s) License(s) request Encrypted Frame Decrypted Frame
  • 7. Cifrado de flujos de v´ıdeo en HTML5 Objetivos Objetivo del proyecto Ver las posibilidades que existen actualmente y desarrollar un sistema de entrega de v´ıdeos cifrados bajo demanda usando unicamente HTML5. ¿Qu´e necesitamos? Servidor web. Servidor de aplicaciones: Django Servidor de licencias. Navegador que tenga implementado las tecnolog´ıas comentadas anteriormente. En este caso usaremos Chrome
  • 8. Cifrado de flujos de v´ıdeo en HTML5 Desarrollo Servidor web: Django. Servidor de aplicaciones en Python. Contenido multimedia, entrega contenido multimedia al navegador mediante el tag de video P´aginas, servidas mediante el servidor de aplicaciones, contiene el c´odigo HTML y JavaScript necesario para descifrar, reproducir e interactuar con el servidor de claves. Servidor de claves: Recibe peticiones HTTP desde el cliente usando CORS (JavaScript) y responde a ellas con un JSON. Administra usuarios, videos y claves desde consola
  • 9. Cifrado de flujos de v´ıdeo en HTML5 Funcionamiento del Sistema Web server ClientKey Server GET /page Page with <video> tag and encrypted video XMLHttpRequest() from JavaScript using HTML5 CORS to get the key Json reponse with the key Decrypt the video with JavaScript (EME API) Authenticate User / Pass Diagrama del funcionamiento del sistema Cliente: Hace una petici´on HTTP GET al servidor web y una POST al servidor de licencias. Servidor de licencias: Responde a la petici´on de autenticaci´on devolviendo la clave en caso satisfactorio. Servidor: Proporciona la p´agina web y el contenido multimedia cifrado.
  • 10. Implementaci´on Software utilizado Servidor de aplicaciones: Django. (Python) IDEs: Python: Ninja-IDE y nano. JavaScript: SublimeText. Servidor de licencias: M´odulos usados en Python: SimpleHTTPServer,BaseHTTPServer,json,optparse,hashlib,xml,logging IDEs usados: Ninja-IDE y sublimeText. Otras herramientas: webm tools: Herramientas necesarias para trabajar con contenedores webM. FFmpeg: Herramienta para codificar v´ıdeo.
  • 11. Implementaci´on Python M´odulos Python que se han usado Servidor de licencias: BaseHTTPServer: Clase para implementar servidores HTTP. json: Clase para trabajar con JSON. Usada para crear el JSON que se env´ıa con la clave del v´ıdeo, algoritmo y modo de cifrado. (JWK) hashlib: M´odulo para trabajar con algoritmos de hash, usada para almacenar las claves de los usuarios. xml.etree.ElementTree: M´odulo para manejar XML. logging: M´odulo para generar logs. Otros m´odulos: sys, os y optparse.
  • 12. Utilizaci´on del Sistema Interfaces Servidor web: Instalar Django e iniciar con python manage.py runserver Servidor de claves: A˜nadir usuarios al sistema. A˜nadir id de video y clave de descifrado al sistema. Iniciar el servicio (o configurar el demonio e iniciarlo) Cliente: Configurar el cliente para usar EME, MSE, WebCrypto y CORS.
  • 13. Cifrado de flujos de v´ıdeo en HTML5 Referencias Propuesta EME. hhttp://www.w3.org/TR/encrypted-media/ Propuesta MSE. http://www.w3.org/TR/media-source/ Especificaci´on CORS. http://www.w3.org/TR/cors/ Recomendaci´on HTML5. http://www.w3.org/TR/html5/ Django Project. https://www.djangoproject.com/ WebM Project. http://www.webmproject.org/ Estimaciones de Cisco. http://www.cisco.com/c/en/us/solutions/collateral/service- provider/ip-ngn-ip-next-generation-network/white paper c11- 481360.html Estado de implementaci´on HTML5 video en navegadores. http://www.jwplayer.com/html5/