Brno University of Technology Attractive
Total Page:16
File Type:pdf, Size:1020Kb
BRNO UNIVERSITY OF TECHNOLOGY VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ FACULTY OF INFORMATION TECHNOLOGY FAKULTA INFORMAČNÍCH TECHNOLOGIÍ DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA ÚSTAV POČÍTAČOVÉ GRAFIKY A MULTIMÉDIÍ ATTRACTIVE EFFECTS FOR VIDEO PROCESSING LÍBIVÉ EFEKTY PRO ZPRACOVÁNÍ VIDEA BACHELOR’S THESIS BAKALÁŘSKÁ PRÁCE AUTHOR MARTIN IVANČO AUTOR PRÁCE SUPERVISOR PRof. Ing. ADAM HEROUT, PhD. VEDOUCÍ PRÁCE BRNO 2018 Abstract The goal of this work was to create a server solution capable of applying visually pleasing effects to live video streams. The processed video shall then be displayed in awebuser interface allowing the user to adjust the applied effects. This goal is achieved by creating a video processing application connected to a web server using a RPC framework. The video generated by this application is streamed using HLS protocol enabling it to be displayed in the web user interface. The user interface is connected to the web server via WebSocket protocol. This enables the web server to connect the user interface with the video processing application. The created solution is accessible via a web user interface, which allows the user to submit video stream URL, which then gets displayed. The time required to load the stream is usually around 10 seconds, which could be much shorter if the solution ran on a more powerful machine. The user interface also enables the user to adjust the settings in a separate mode. In this mode, only a single frame from the stream is displayed, but the adjustments made by the user are displayed almost instantly. Abstrakt Cieľom tejto práce bolo vytvoriť serverové riešenie schopné aplikovať vizuálne atraktív- ne efekty na živé video streamy. Spracované video by sa malo zobrazovať vo webovom užívateľskom rozhraní, ktoré by malo taktiež umožniť užívateľovi aplikované efekty zmeniť. Tento cieľ bol dosiahnutý vytvorením aplikácie na spracovanie videa, ktorá je pripo- jená k webovému serveru prostredníctvom RPC frameworku. Video vygenerované touto aplikáciou sa streamuje pomocou HLS protokolu, čo umožňuje jeho zobrazenie vo webovom užívateľskom rozhraní. Užívateľské rozhranie je pripojené k webovému serveru cez Web- Socket protokol. To umožňuje webovému serveru spojiť užívateľské rozhranie s aplikáciou na spracovanie videa. Vytvorené riešenie je prístupné cez webové užívateľské rozhranie, ktoré užívateľovi umož- ňuje zadať URL adresu video streamu, ktorý sa následne zobrazí. Čas potrebný na načítanie streamu je zvyčajne okolo 10 sekúnd, čo by však mohlo trvať o veľa kratšie ak by riešenie bolo spustené na silnejšom stroji. Užívateľské rozhranie tiež umožňuje užívateľovi zmeniť nastavenia v oddelenom móde. V tomto móde sa zobrazuje iba jedna snímka zo streamu, no úpravy ktoré užívateľ spraví sa zobrazia skoro okamžite. Keywords Real-time video processing, Video stream enhancement, Colorful filter application, Attrac- tive video effects Kľúčové slová Spracovanie videa v reálnom čase, Vylepšenie video streamov, Aplikácia farebných filtrov, Atraktívne video efekty Reference IVANČO, Martin. Attractive effects for video processing. Brno, 2018. Bachelor’s thesis. Brno University of Technology, Faculty of Information Technology. Supervisor prof. Ing. Adam Herout, PhD. Rozšírený abstrakt Cieľom tejto práce je vytvoriť riešenie problému vizuálne neatraktívneho videa streamova- ného množstvom IP kamier z celého sveta, vďaka ktorému môžu potenciálny návštevníci skontrolovať aktuálne počasie a atraktivitu daného miesta. Jadrom problému je schopnosť upraviť video v reálnom čase a následne ho streamovať ďalej aby mohlo byť doručené klien- tovi. Video stream môže meškať niekoľko sekúnd oproti reálnemu času, keďže aplikácia cieli na živé prenosy výhľadov na mestá a krajinu. Na druhej strane, riešenie musí byť schopné poskytnúť užívateľvi okamžitú spätnú väzbu pri kofigurácii efektov aplikovaných na video stream. Ideálne by riešenie malo byť dostupné cez webové užívateľské rozhranie schopné zobraziť spracovaný video stream ako aj poskytnúť užívateľovi možnosť nakonfigurovať nas- tavenia použité na spracovanie video streamu, aby užívateľ nemusel inštalovať žiaden ďalší softvér. Navrhované riešenie pozostáva z troch hlavných častí – server na spracovanie videa, webový server a webové užívateľské rozhranie, pričom každá z nich vykonáva rôzne úlohy. Server na spracovanie videa vstupný video stream nie len spracúva ale aj opätovne strea- muje. Na spracovanie videa používa niektoré metódy odvodené od spracovania obrazu, ktoré sú čo najviac optimalizované pre spracovávanie veľkého množstva obrazov – snímkov videa v reálnom čase. Spracované video následne segmentuje a vytvára HLS stream ktorého doručenie už však má na starosti webový server. Ten je centrom komunikácie celého riešenia – zabezpečuje predávanie informácií medzi webovým užívateľským rozhraním a serverom na spracovanie videa a tiež doručuje samotné webové užívateľské rozhranie ako aj spracovaný video stream užívateľovi. Doručovania streamu je natívne schopný vďaka protokolu HLS ktorý využíva bežné HTTP requesty na postupné doručovanie segmentov video streamu. Na komunikáciu s webovým rozhraním využíva protokol WebSocket ktorý umožňuje obojsmernú komunikáciu medzi webovým serverom a užívateľským rozhraním bez nutnosti vykonávať HTTP requesty. Komunikáciu so serverom na spracovanie videa udržuje pomocou RPC protokolu ktorý umožňuje priamo volať metódy serveru na spracovanie videa z webového serveru a tým pádom kedykoľvek meniť nastavenia aplikovaných efektov podľa požiadaviek užívateľa. Poslednou súčasťou je webové užívateľské rozhranie ktoré všetku funkcionalitu serveru na spracovanie videa sprístupňuje užívateľovi vo webovom prehliadači. Navrhnuté rieše- nie bolo následne potrebné implementovať. Implementácia bola značne náročná, keďže bolo potrebné použiť viaceré knižnice, ktorých vzájomná kompatibilita bola minimálna. K náročnosti prispela aj skutočnosť, že dokumentácia k niektorým z týchto knižníc bola neúplná alebo neexistujúca. Nakoniec bol server na spracovanie videa vytvorený pomocou knižnice OpenCV, ktorá bola použitá pri spracovaní videa a nástroja FFmpeg, ktorý zabezpečuje vytvárnie HLS streamu. Pre implementáciu komunikácie medzi webovým serverom a serverom na spracovanie videa sa použil framework gRPC, zatiaľ čo komuniká- cia medzi webovým serverom a webovým užívateľským rozhraním funguje pomocou knižnice Socket.IO. Webové užívateľské rozhranie bolo implementované bežnými webovými tech- nológiami s pomocou knižnice Bootstrap na vizuálne prvky rozhrania a knižnice hls.js na načítanie HLS streamu. Výsledná aplikácia je schopná načítať video stream zadaný užívateľom prostredníctvom webového užívateľského rozhrania, aplikovať na neho rozličné efekty a spracovaný video stream zobraziť v užívateľskom rozhraní. Takisto poskytuje možnosť aplikované efekty zmeniť a nastaviť. V súčasnej dobe je výsledná aplikácia schopná obsluhovať len jednoho klienta zároveň, avšak toto obmedzenie je možné v budúcnosti odstrániť. Načítanie video streamu v užívateľskom rozhraní trvá približne 10 sekúnd, záležiac od výkonnosti počítača na ktorom server beží. Pri nastavovaní efektov sa zmeny prejavia ihneď vďaka aplikácii efektov iba na statickú snímku. Užívateľ tiež môže zdieľať spracovaný video stream pomocou permanentného linku. Aj keď aplikácia v súčasnom stave nie je pripravená na použitie v profesionálnej sfére, pri zachovaní určitých podmienok je plne funkčná a je preto validným riešením danej úlohy. Attractive effects for video processing Declaration Hereby I declare that this bachelor’s thesis was prepared as an original author’s work under the supervision of Mr. Adam Herout. All the relevant information sources, which were used during preparation of this thesis, are properly cited and included in the list of references. ....................... Martin Ivančo May 16, 2018 Acknowledgements I would like to thank my supervisor prof. Ing. Adam Herout, PhD. for his help. Contents 1 Introduction 2 2 Video Processing Methods 3 2.1 Principles of Video Processing . .3 2.2 Tone Curve . .4 2.3 Look Up Tables . .6 2.4 Unsharp Mask . .7 2.5 Vignetting . .9 3 Streaming and Communication 10 3.1 Video Streaming Protocols . 10 3.2 Remote Procedure Call Protocols . 13 3.3 WebSocket Protocol . 14 4 Proposed Solution 15 4.1 Image Processing Server . 15 4.2 Web Server . 16 4.3 Web User Interface . 17 5 Implementation and Results 19 5.1 Utilized Libraries for Video Processing . 19 5.2 Implementation of Communication . 22 5.3 Implementation of Web UI . 24 5.4 Final Application . 24 6 Conclusion 28 Bibliography 30 1 Chapter 1 Introduction This work addresses the problem of visually unpleasant images streamed by many IP cam- eras around the world used to show potential visitors the current weather conditions as well as the available view at a given location. The core of the problem is the ability to adjust the video stream in real time, and then stream it forth so that it can be shown to a client. The video stream can be a few seconds delayed when compared to real world view, as the targeted application scenarios are dealing with landscapes and cityscapes. On the other hand, the solution must be able to give the user instant feedback in the process of configuring the effects applied on the stream. Ideally, the solution should be accessible via a web user interface capable of displaying the processed stream as well as giving the user an option to configure the settings used to process the stream, so that there is noneedfor the user to install additional software. While there are solutions