Como crear una aplicación de video streaming

Juan Carlos Calderón Cuellar

Jalasoft

[email protected]

RESUMEN 2. EVOLUCIÓN DE FORMATOS Y CODECS

DE AUDIO Y VIDEO
¿Conoce servicios de video Streaming y Video On Demmand
(VOD) como Netflix, HBO Go o Amazon Video? ¿O
aplicaciones del mismo tipo pero que se utilizan en una red Un formato de video es un contenedor (video, audio y
local como Kodi o Plex? subtitulo) Y un códec es un dispositivo (software o hardware)
capaz de codificar y decodificar el flujo de datos de un
Pues si conoce alguna de estas aplicaciones seguramente se formato. Es por eso que en algún momento si quería ver un
habrá preguntado ¿Cómo se hacen o desarrollan? formato de video “.mp4” en una computadora antigua era
necesario instalar el códec respectivo en esa máquina, capaz
El presente documento pretende brindar la información de decodificar esa señal.
necesaria para comenzar el desarrollo de una aplicación de
video streaming desde cero. La evolución de los formatos y codecs de audio y video a lo
largo de estos años se ha dado por la resolución, en otras
Es también un conjunto de experiencias del autor al palabras, a mayor resolución mayor cantidad de espacio
desarrollar una aplicación de este tipo. utilizado por lo tanto se buscó desarrollar codecs con mejor
compresión.
Palabras claves
De todos los formatos actualmente existen dos que son
Streaming, VOD, utilizados en video streaming por su excelente compresión y
porque son soportados por la mayoría de navegadores H.264
1. STREAMING Y VIDEO ON DEMMAND [3] y VP8 [4], el primero en llegar al mercado fue H.264 y es
en el que nos enfocaremos en este documento, al mismo
El video streaming es la distribución de un flujo de datos tiempo para el audio se utilizará el formato AAC [5].
multimedia a través de una red local o mediante internet.
Ejemplo de esto puede ser la señal de un canal de televisión
transmitida por internet o video conferencia [1]. 3. FORMATO DE SUBTITULOS

Existen una variedad de subtítulos en modo texto esto quiere

El termino Video On Demmand (VOD) es utilizado para
decir que pueden ser vistos, editados como un archivo de
referirse a un servicio en el que el usuario elige el contenido a
texto [6].
ver de un catálogo de Películas o Series, por ejemplo. El
servicio más conocido de este tipo es Netflix. Este servicio en
el fondo utiliza el concepto de streaming para distribuir el Existen otros subtítulos en formato imagen, esto quiere decir
contenido multimedia a través de la red [2]. que los subtítulos son una serie de imágenes, por ejemplo,
PGS y VOBSUB [7].
El formato en modo texto más conocido es SRT, y VTT [8] que Verifique la respuesta completa aquí [14].
es relativamente nuevo pero que es utilizado en
reproductores basados en HTML. Estos dos y el formato PGS Es posible seleccionar la información y almacenarla en la base
serán los que se utilizarán en este documento. de datos.

4. THE MOVIE DATABASE 5.2 Imagen en miniatura

Más conocido como TMDb, es un servicio gratuito que ofrece Como ya se tiene la información de la duración del video
información de películas y series de televisión [9], utilizaremos podemos obtener la imagen en miniatura en un determinado
la API [10] de este servicio para obtener información de tiempo, en el ejemplo se obtendrá la miniatura a la mitad de
medios. duración con un ancho igual a 320px, el alto será calculado
automáticamente en base a las dimensiones del video, todo
esto utilizando la herramienta ffmpeg y el filtro thumbnail.
5. PROCEDIMIENTO
C:\>ffmpeg.exe -ss 1:20:50.869 -i "C:\AutoTV\Avatar (2009)
La entrada principal es un archivo de video en cualquier 1080p.mkv" -vf thumbnail,scale=320:trunc(ow/a/2)*2 -vframes 1
"C:\AutoTV\Avatar.png"
formato. Es importante la convención para nombrar dicho
archivo pues se buscará la información del medio mediante
esta información, una convención sugerida es la siguiente:

<Nombre de película> (<Año>) <Resolución>.mkv

C:\AutoTV\Avatar (2009) 1080p.mkv

Para lograr el procesamiento de un archivo de video se

utilizará las siguientes herramientas:

Ffmpeg que es una solución completa y multiplataforma para

grabar, convertir y transmitir audio y video [11] y que tiene un
conjunto de herramientas de línea de comandos como:

 ffprobe: Recopila información de flujos multimedia y Figura 1. Imagen en miniatura (Avatar.png)

lo imprime de forma legible por humanos y
máquinas [12].
5.3 Extracción/conversión de subtitulo
 ffmpeg: Es un convertidor de vídeo y audio muy
Es necesario disponer del subtitulo en formato *.vtt para lo
rápido que tiene muchas funcionalidades [13].
cual utilizaremos el siguiente comando en caso de que se
quiera extraer el mismo, de un contenedor de video,
5.1 Información de archivo supongamos que se quiere comenzar la extracción en el
minuto 20, 50 segundos 869 milisegundos y que se selecciona
la tercera pista de subtítulos en formato SRT (Vea la Tabla 1,
El primer requerimiento es obtener la información de dicho
para entender el índice correspondiente):
archivo, como duración, tamaño, información de video
(códec, resolución, etc.), información de pistas de audio,
información de subtítulos. Para lo cual se utilizará ffprobe y el
siguiente comando:
C:\>ffmpeg.exe -ss 00:20:50.869 -sub_charenc UTF-8 -i
"C:\AutoTV\Avatar (2009) 1080p.mkv" -map 0:s:2
C:\>ffprobe.exe -hide_banner -show_format -show_streams - "C:\AutoTV\subtitle.vtt"
show_error -print_format json "C:\AutoTV\Avatar (2009)
1080p.mkv"
Si el caso es solamente convertir un archivo de subtitulo a Para ello utilizaremos la herramienta ffmpeg con el siguiente
otro utilizaremos este comando: comando:

C:\>ffmpeg.exe -sub_charenc UTF-8 -i "C:\AutoTV\Avatar C:\>ffmpeg.exe -ss 0:16:40 -i "C:\AutoTV\Avatar (2009)

(2009) 1080p.es.srt" "C:\AutoTV\subtitle.vtt" 1080p.mkv" -map 0:0 -map 0:1 -movflags frag_keyframe -preset
ultrafast -codec:v libx264 -profile:v baseline -level 3.1 -
codec:a aac -b:a 128k -start_number 0 -hls_time 10 -
Nota: Asegúrese que el tipo de codificación del archivo de hls_list_size 0 -f hls "C:\AutoTV\output\video.m3u8"

entrada es UTF-8 de lo contario el archivo de salida tendrá

errores. Al ser un archivo externo el mismo no es reconocido Una consideración especial es el índice de cada pista,
al utilizar el comando de 5.1. obtenida en el punto 5.1 de este documento.

Es posible que exista un tercer caso cuando se tenga Tabla 1: Indice de pistas
subtítulos en formato PGS, este caso está tratado en el punto
5.5.2.1 de este documento.
Índice Índice Descripción
ffmpe por
5.4 Información de película g tipo

En este ejemplo es necesario obtener la información de la

0 0 Pista de video
película, como resumen, actores, géneros, etc. Y se hará
utilizando la API de TMDb.
1 0 Pista de audio (Español AC-3 5.1)
Solicitud de búsqueda de películas:
http://api.themoviedb.org/3/search/movie?api_key=tuApiKey 2 1 Pista de audio (Ingles DTS 5.1)
&query=Avatar&year=2009&language=es

3 0 Pista de subtitulo (Español PGS)

Verifique la respuesta completa aquí [15].

4 1 Pista de subtitulo (Ingles PGS)

Solicitud de información de película:
https://api.themoviedb.org/3/movie/19995?api_key=tuApiKey
5 2 Pista de subtitulo (Español SRT)
&language=es

Verifique la respuesta completa aquí [16]. Entendiendo los comandos y argumentos:

Es posible seleccionar la información y almacenarla en la base 5.5.1 Video de entrada y posición:

de datos.
Empezar la conversión de video en el minuto 16 y 49
segundos:
5.5 Transcodificación
-ss 0:16:49 -i "C:\AutoTV\Avatar (2009) 1080p.mkv"
Esta es la parte central de la aplicación, el proceso de
transcodificación, que consiste básicamente convertir un
archivo de video a otro formato y códec que sea soportado 5.5.2 Pista de video
por el navegador, esto al mismo tiempo que el archivo está
siendo reproducido. -map 0:0

5.5.2.1 Video con subtítulos PGS

Como se sabe los subtítulos en formato PGS son imágenes así

que es necesario “pegar” los subtítulos al video, utilizando un
filtro. Nótese que en este caso es necesario utilizar el índice
por tipo, descrito en la Tabla 1. Utilizaremos el siguiente También una serie de comandos para cada tipo de operación.
comando: Para poder utilizar estas herramientas se creó una librería
escrita en C# denominada MediaManagerLib que será
-filter_complex "[0:0][0:s:1]overlay[v]" -map "[v]" publicada en GitHub [17] y NuGet Gallery. El mismo
procedimiento puede ser realizado para el lenguaje en el que
vaya a desarrollar su aplicación.
5.5.3 Pista de audio

Pista de audio Español. 7. CONCLUSIONES

-map 0:1 Con las herramientas necesarias se puede construir la base

para la creación de aplicaciones de video streaming u de otro
tipo.
5.5.4 Fotograma y preset

Inicia un nuevo fragmento en cada fotograma clave de vídeo, El mayor trabajo está en la integración de estas herramientas
esto es útil porque necesitamos reproducir el video a medida en la aplicación que vaya a desarrollar.
que se está convirtiendo en otro formato.
8. AGRADECIMIENTOS
-movflags frag_keyframe

El autor agradece especialmente a su esposa Claudia por su

Al mismo tiempo seleccionamos el tipo de conversión apoyo incondicional, ya que gracias a ella es que puede
cumplir sus metas y sueños profesionales.
-preset ultrafast
A Jalasoft y TechZone por la oportunidad de mostrar este
trabajo y compartir conocimiento.
5.5.5 Codec de video

Para el ejemplo se utilizará el codec H.264

9. REFERENCIAS

[1] Wikipedia, https://es.wikipedia.org/wiki/Streaming

-codec:v libx264 -profile:v baseline -level 3.1

[2] Wikipedia,
5.5.6 Codec de audio https://es.wikipedia.org/wiki/V%C3%ADdeo_bajo_demanda

Para el ejemplo se utilizará el codec AAC con un bitrate de

128kbps [3] Wikipedia, https://es.wikipedia.org/wiki/H.264/MPEG-
4_AVC
-codec:a aac -b:a 128k
[4] Wikipedia, https://es.wikipedia.org/wiki/VP8
5.5.7 Salida
[5] Wikipedia,
El archivo de salida debe estar preparado para HLS, cada https://es.wikipedia.org/wiki/Advanced_Audio_Coding
segmento será de 10 segundos de duración.
[6] Wikipedia,
-start_number 0 -hls_time 10 -hls_list_size 0 -f hls
https://es.wikipedia.org/wiki/Subt%C3%ADtulo#Formatos_de_
"C:\AutoTV\output\video.m3u8"
Subt.C3.ADtulos

6. INTEGRACIÓN [7]
https://es.wikipedia.org/wiki/Subt%C3%ADtulo#Formatos_de_
La base para el desarrollo de la aplicación es el uso de
Subt.C3.ADtulos
herramientas de procesamiento de video y la API de TMDb.
[8] Wikipedia, https://en.wikipedia.org/wiki/WebVTT

[9] https://www.themoviedb.org/

[10] https://developers.themoviedb.org/3

[11] http://ffmpeg.org/

[12] http://ffmpeg.org/ffprobe-all.html

[13] http://ffmpeg.org/ffmpeg-all.html

[14] https://gist.github.com/jc-
calderon/913f136ef0624c77afeceb51c2d4f544

[15] https://gist.github.com/jc-
calderon/db472ec09b7dd7c9e2df29bc636b1480

[16] https://gist.github.com/jc-
calderon/9bcf3610e1bdc4ee63e09d19d6aa3ec0

[17] https://github.com/jc-calderon