PROYECTO 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: