Table Of ContentPROYECTO FINAL DE CARRERA
Desarrollo de un framework de extracción de
metadatos de vídeo para explotación en vídeo-
marketing online.
(Development of a framework for extracting video
metadata for video-marketing)
1
Estudios: Ingeniería de Telecomunicación
Autor: Alberto Carmona Serrano
Director/a: Jordi Mata Díaz
Año: 2016
2
Índice general
Agradecimientos...................................................................................................................................4
Resum del projecte...............................................................................................................................5
Resumen del proyecto..........................................................................................................................6
Abstract.................................................................................................................................................7
Capítulo 1: Introducción.......................................................................................................................8
Capítulo 2: Marco de desarrollo, Viloud.............................................................................................11
Capítulo 3: Diseño y estructura del framework..................................................................................13
Capítulo 4: Detección de objetos........................................................................................................20
4.1 Detección por plantilla.............................................................................................................21
4.1.1 Descripción del proceso...................................................................................................21
4.1.2 OpenCV: matchTemplate y minMaxLoc.........................................................................25
4.2 Cascada de HAAR...................................................................................................................27
4.2.1 Determinar búsquedas......................................................................................................29
4.2.2 Descarga y verificación de imágenes...............................................................................33
4.2.3 Imageclipper.....................................................................................................................34
4.2.4 Creación del fichero vector..............................................................................................35
4.2.5 Entrenamiento del filtro...................................................................................................37
Capítulo 5: Backend...........................................................................................................................39
5.1 Laravel.....................................................................................................................................42
5.2 Instalación y configuración......................................................................................................44
5.3 Ruteado....................................................................................................................................48
5.4 Modelo.....................................................................................................................................49
5.5 Controlador..............................................................................................................................52
5.6 Encolado de tareas...................................................................................................................54
Capítulo 6: Frontend...........................................................................................................................59
6.1 Conceptos elementales de AngularJS......................................................................................61
6.1.1 Instalación de AngularJS..................................................................................................61
6.1.2 Tipos de notación.............................................................................................................61
6.1.3 Controladores y contextos................................................................................................64
6.1.4 Directivas.........................................................................................................................66
6.1.5 Servicios...........................................................................................................................69
6.2 Estructura.................................................................................................................................72
6.2.1 Análisis por plantilla........................................................................................................74
6.2.2 Análisis por filtro HAAR.................................................................................................80
6.2.3 Previsualización...............................................................................................................84
Capítulo 7: Conclusiones y trabajo futuro..........................................................................................87
Apéndices...........................................................................................................................................92
Apéndice I: Listado de la clase Processor y detectores.................................................................92
Apéndice II: Script de generación del fichero índice.....................................................................94
Apéndice III: Instalación de Laravel..............................................................................................95
Apéndice IV: Instalación de AngularJS.........................................................................................98
Bibliografía y referencias.................................................................................................................107
3
Agradecimientos
Son muchas a las personas que debo agradecer la consecución de este PFC pero lo primero es poner
en contexto lo que para mí y para mi familia representa poder, por fin, cerrar un ciclo importante de
la vida de cualquier estudiante persona.
Las circunstancias hicieron que, después de aprobar Procesado de señal (uff…), volviera a mi
ciudad natal y empezara mi vida laboral dejando para el futuro la finalización del PFC. El tiempo
pasa, y no lo hace ni despacio ni en vano, así que al final me he visto compaginando estudios,
trabajo y vida familiar.
Por esta razón en primer lugar quiero agradecer a mi mujer Mari Carmen su apoyo continuo e
incondicional en todos los sentidos, su saber estar y su comprensión. Sin su ayuda esto no hubiera
sido posible llevarlo a cabo.
A mi hijo Alejandro le pido disculpas por el tiempo robado y que le prometo devolver, aunque
todavía no es consciente de ello.
A mis padres Alberto y Loli, era algo que les debía por el gran esfuerzo que hicieron para hacer de
mi alguien competente. No podía desperdiciar todo ese tiempo lejos de casa pero sobretodo no los
podía dejar cargar con la decepción de una carrera inacabada.
A mis compañeros de piso, Dani, Toño, Jordi… y tantos otros que pasaron por allí.
Por último agradecer a la escuela su interés en los alumnos y su formación, a todo el personal de
secretaría, sin sus indicaciones y consejos fueron muy oportunos.
Y por último, y no menos importante, a Jorge, mi director de proyecto, que incluso en la distancia
ha guiado mi andadura de un modo excelente. Ayudándome a volver al camino cuando me desviaba.
Muchas gracias.
4
Resum del projecte
Els elements multimèdia continguts en una pàgina representen una caixa negra on és impossible
crear continguts dinàmics relacionats amb aquests. La idea és poder crear contingut web que
s'adapti al context de l'objecte multimèdia proporcionant més cohesió i coherència entre els
diferents elements. Com a aplicació immediata d'aquest sistema es proporciona una eina bàsica de
vídeo-màrqueting.
5
Resumen del proyecto
Los elementos multimedia contenidos en una página representan una caja negra donde es imposible
crear contenidos dinámicos relacionados con estos. La idea es poder crear contenido web que se
adapte al contexto del objeto multimedia proporcionando más cohesión y coherencia entre los
distintos elementos. Como aplicación inmediata de este sistema se proporciona una herramienta
básica de vídeo-marketing.
6
Abstract
The multimedia content on a page represent a black box where it is impossible to create dynamic
content related to these. The idea is to create Web content that suits the context of multimedia object
providing more coherence and consistency among the different elements. As an immediate
application of this system provides a basic video-marketing tool.
7
Capítulo 1: Introducción
En los últimos años hemos visto como los elementos multimedia han incrementado su protagonismo
en los medios web. Esto ha sido gracias, en parte, a un incremento significativo del ancho de banda
de las redes de telecomunicaciones y al desarrollo continuo de los dispositivos electrónicos, cada
vez más potentes y con capacidad para visualizar contenidos más costosos computacionalmente.
Por otro lado, la proliferación de plataformas de consumo de contenidos multimedia como YouTube
o Vimeo han facilitado su gestión y distribución llegando a formar parte del ecosistema de
información que representa una pagina web.
La mayor parte del contenido que vemos en una página es texto. La información representada en
forma de texto es muy fácil de leer por sistemas automáticos como robots y arañas. Estos robots
están programados para extraer información y clasificarla en base a unos criterios propios dotándola
de sentido y contexto. Después esta información es reutilizada por otros sistemas procesándola para
usarla en otros ámbitos ayudando a crear contenido coherente y cohesionado con el resto de
información.
No obstante la naturaleza de la información contenida en un vídeo es muy distinta al resto
disponible en una página web. Esta información almacenada en forma de imágenes no es fácilmente
reconocida por un sistema automático y normalmente requiere de la intervención de un humano
para su “traducción”. Esto hace que un vídeo sea, para el navegador, una caja negra donde no pueda
existir interacción más allá de la propia existencia del elemento.
Como antecedentes podemos encontrar algunos sitios web donde a los elementos multimedia se les
8
puede anclar contenido adicional como anotaciones o botones, el caso de YouTube es un claro
ejemplo de esto. Tanto los elementos como los ajustes son definidos por el usuario y por tanto es
algo muy costoso en tiempo. La novedad reside en automatizar este proceso, en permitir que el
contenido web deje de ver un elemento multimedia como una caja negra ofreciéndole todos los
datos posibles sobre su contenido, de este modo podríamos tratarlos como cualquier elemento más
del DOM pudiendo alterar comportamientos en función del contenido.
Por otro lado sabemos que para automatizar esta tarea es necesario disponer de herramientas
eficaces para la detección de objetos y demás análisis sobre imágenes. Aunque esta tecnología aún
tiene margen de mejora muchos son los sistemas que la utilizan: radares de tráfico, lectores de
aparcamientos, reconocimiento de personas y rostros, conteo de vehículos, etc. Se propone pues
solucionar el problema de integración de estos elementos en la web con la ayuda de esta tecnología.
La finalidad de este proyecto es, por tanto, la de ofrecer un framework de trabajo capaz de extraer
información de este tipo de contenidos y almacenarla en forma de metadatos donde los sistemas de
almacenamiento y representación web sean capaces de reconocerlos como algo más y crear
contenido dentro de un contexto más definido.
Para lograr nuestro objetivo necesitaremos integrar distintas tecnologías:
• OpenCV1: El primer y más complejo paso para poder lograr nuestro objetivo es la de
dotar al sistema de la capacidad de identificación de objetos. Para ello usaremos
OpenCV. OpenCV es una librería escrita en C++ y muy extendida entre la
comunidad científica dedicada a “Computer Vision”. Es una librería de uso general
de la que aprovecharemos algunas funciones para realizar la identificación en las
9
imágenes.
• Python2 (Numpy3): Gracias a los bindings vamos a ser capaces de utilizar OpenCV
sobre Python dotando al sistema de gran dinamismo y libertad a la hora de
programar. Por otro lado la librería Numpy para Python nos ofrecerá una forma fácil
y eficaz para operar con los datos extraídos de los análisis y su posterior
almacenamiento.
• AngularJS4: Desarrollado por Google, se ha convertido en el framework de
referencia para el desarrollo de SPA (Single Page Application) de los últimos meses.
Su capacidad para extender el markup HTML hace que sea ideal para desarrollar un
reproductor capaz de sintetizar los metadatos obtenidos del vídeo.
• Laravel5: Framework de backend desarrollado en PHP, será el apoyo principal del
sistema, unificará todas sus partes y se encargará de ejecutar tareas en segundo plano
para analizar los vídeos mediante tareas programadas. Dispone de innumerables
herramientas que facilitan tareas en contexto backend: ruteado de urls, filosofía
MVC6, tareas programadas, validación de datos, etc.
10
Description:5.3 Ruteado. AngularJS, un framework análogo a Laravel pero para aplicaciones web a Laravel para que inicie el procesado del vídeo.