WebGL aplikace pro prohl´ıˇzen´ı ˇziv´ych 360

(1)

WebGL aplikace pro prohl´ıˇ zen´ı ˇ ziv´ ych 360 ^◦ panoramat

Diplomov´ a pr´ ace

Studijn´ı program: N2612 – Elektrotechnika a informatika Studijn´ı obor: 1802T007 – Informaˇcn´ı technologie

Autor pr´ace: Bc. Daniel V´ıch Vedouc´ı pr´ace: Ing. Jiˇr´ı Jen´ıˇcek, Ph.D.

(2)

WebGL based application for live 360 ^◦ panorama

Diploma thesis

Study programme: N2612 – Electrotechnics and informatics Study branch: 1802T007 – Information technology

Author: Bc. Daniel V´ıch

Supervisor: Ing. Jiˇr´ı Jen´ıˇcek, Ph.D.

(3)

(4)

(5)

(6)

Podˇ ekov´ an´ı

Na tomto m´ıstˇe bych rád podˇekoval vedouc´ımu mé diplomové práce, Ing. Jiˇr´ımu Jen´ıˇckovi, Ph.D., za vˇsechny rady, bohaté zkuˇsenosti a poznatky, které mnˇe pomohly k úspˇeˇsné realizaci této práce. Dále bych chtˇel podˇekovat své rodinˇe za jej´ı podporu a moˇznost studovat na vysoké ˇskole. Nakonec vˇsem svým bl´ızkým pˇrátel˚um, kteˇr´ı mnˇe pˇri studiu velice pomohli a motivovali.

(7)

Abstrakt

Tato práce se zabývá ˇreˇsen´ım streamován´ı ˇzivých panoramat zaob´ıraj´ıc´ı úhel pohledu 360^◦ pouˇzit´ım vˇetˇs´ıho mnoˇzstv´ı webkamer a jejich zobrazen´ım pomoc´ı aplikaˇcn´ı rozhran´ı WEBGL ve we- bovém prohl´ıˇzeˇci. Výsledkem této práce je aplikace s ˇreˇsen´ım typu server-klient, kde server zajiˇst’uje zpracován´ı a stream videa z webkamer a klient umoˇzˇnuje zobrazen´ı tohoto streamu na zaˇr´ızen´ıch disponuj´ıc´ıch webovým prohl´ıˇzeˇcem s podporou ap- likaˇcn´ıho rozhran´ı WEBGL.

Kl´ıˇcová slova: panoráma, videopanoráma, stream videa, stream videa v reálném ˇcase, WEBGL, aplikace server-klient

(8)

Abstract

This thesis deals with streaming 360 degree panoramas with mul- tiple webcams. The final view is provided by WebGL API in a web browser. The final outcome of this thesis is to find a solution for a server-client type of application, where the server side provide processing and webcam streams and the client side can view such streams on devices that are supported by a web browser with (an application interface) WEBGL API.

Keywords: panorama, videopanorama, video sream, realtime video stream, WEBGL, server-client application

(9)

Obsah

Seznam obr´azk˚u . . . 9

Seznam tabulek . . . 10

Seznam zkratek . . . 12

1 Uvod´ 13 2 Panor´ama 15 2.1 Technika poˇr´ızen´ı panoramatick´ych sn´ımk˚u . . . 15

2.1.1 Statick´e panor´ama . . . 15

2.1.2 Dynamick´e panor´ama . . . 16

2.1.3 Typy panoramat . . . 17

3 Streamován´ı videa 20 4 WebGL 22 5 Existuj´ıc´ı ˇreˇsen´ı 23 6 Návrh vlastn´ıho ˇreˇsen´ı 26 6.1 Seznámen´ı se s problematikou . . . 26

6.2 N´avrh vlastn´ıho ˇreˇsen´ı . . . 27

7 Vlastn´ı ˇreˇsen´ı 28 7.1 Hardwarov´a ˇc´ast . . . 28

7.1.1 Poˇzadavky na webkamery . . . 29

7.1.2 Pouˇzit´e webkamery . . . 30

(10)

7.1.3 Poˇzadavky na server . . . 31

7.1.4 Pouˇzit´a konfigurace serveru . . . 32

7.1.5 Pˇripojen´ı v´ıce kamer na rozhran´ı USB . . . 32

7.1.6 Poˇzadavky klienta . . . 33

7.2 Softwarov´a ˇc´ast . . . 34

7.2.1 Server . . . 34

7.2.2 Klient . . . 39

7.2.3 N´avrh ˇreˇsen´ı vyuˇz´ıvaj´ıc´ı stitching . . . 47

8 Z´avˇer 48 8.1 Sloˇzitost ˇreˇsen´ı . . . 48

8.2 Vliv kodek˚u a hardwarov´a n´aroˇcnost . . . 48

8.3 Celkov´a funkˇcnost a moˇzn´a vylepˇsen´ı . . . 50

8.4 Zhodnocen´ı . . . 51

(11)

Seznam obr´ azk˚ u

2.1 Objektiv PanoPro . . . 16

5.1 Verze ˇreˇsen´ı kamer Aliie od IC Realtech . . . 23

5.2 Nokia OZO . . . 24

5.3 Google JUMP camera rig . . . 25

6.1 N´avrh ˇreˇsen´ı . . . 27

7.1 Webkamera Logitech QuickCam PTZ . . . 30

7.2 Kalibrace pomoc´ı ˇsachovnice pro krychlov´e panorama . . . 31

7.3 Funkˇcn´ı ˇc´asti serveru . . . 34

7.4 Grafick´e uˇzivatelsk´e rozhran´ı . . . 39

7.5 Grafické uˇzivatelské rozhran´ı - spuˇstˇený stream . . . 39

7.6 Funkˇcn´ı ˇc´asti klienta . . . 40

7.7 Diagram otexturov´an´ı stran krychle . . . 44

7.8 Drátová schémata modelu panoramatu . . . 45

7.9 Ukázka výsledného zobrazen´ı v m´ıstnosti . . . 46

7.10 Ukázka výsledného zobrazen´ı venku . . . 46

(12)

Seznam tabulek

7.1 Zat´ıˇzen´ı pˇrenosov´eho p´asma . . . 33

8.1 Zat´ıˇzen´ı serveru . . . 49

8.2 V´ykon prohl´ıˇzeˇce Windows . . . 49

8.3 V´ykon prohl´ıˇzeˇce Linux . . . 50

8.4 Mnoˇzstv´ı pˇrenesen´ych dat . . . 50

(13)

Seznam zkratek

HTTP Hypertext transfer protocol - internetový protokol pro výmˇenu hypertextových dokument˚u

RTP Real-time transport protocol - protokol standardizuj´ıc´ı paketové doruˇcován´ı zvukových a obrazových dat po internetu

RTMP Real-time messaging protocol - protokol vyvinutý firmou Macromedia urˇcený pro streamován´ı audia a videa po internetu

MP4 Multimedi´aln´ı kontejner

HEVC High efficiency video coding - video kodek

VP8 video kodek vyvinut´y firmou Google

VP9 video kodek vyvinut´y firmou Google

WMV komprimovaný souborový videoformát vyvinutý firmou Microsoft

CMOS (fototechnika) typ sn´ımaˇce fotoap´ar´atu

FOV Field of view - ´uhel viditeln´eho pohledu

SSD Solid-state drive - vysokokapacitn´ı pamˇet’ové médium neobsahuj´ıc´ı pohyblivé souˇcásti

USB Universal serial bus - komunikaˇcn´ı sbˇernice

(14)

1 Uvod ´

Pokud se ohlédneme do nejmladˇs´ıch dob naˇs´ı civilizace, tak se vˇzdy lidé snaˇzili uloˇzit jisté výjevy a situace pomoc´ı obrázk˚u a maleb. Pravˇec´ı lidé tyto výjevy vyrývali do skal, pozdˇeji mal´ıˇri zaˇcali pouˇz´ıvat r˚uzné typy pláten, následnˇe pak vynález fotoa- parátu uˇcinil obrovský pokrok v rychlém zachycen´ı obrazu okamˇziku. Ve vˇsech tˇechto etapách vývoje se poˇrizovatelé snaˇzili zachytit ty nejd˚uleˇzitˇejˇs´ı ˇcásti daného výjevu, a to bud’ v úzkém, nebo ˇsirokém zábˇeru. Speciáln´ım typem je zobrazen´ı panoramat- ické, které umoˇzn´ı zobrazit celý prostor kolem pozorovatele.

Právˇe panoramatické zobrazen´ı je problém, který se m˚uˇze ˇreˇsit nˇekolika r˚uznými zp˚usoby. V pˇr´ıpadˇe mal´ıˇre je ˇreˇsen´ım ˇsiroké plátno, na nˇemˇz dokáˇze zachytit vˇetˇs´ı

´

uhel pohledu, mal´ıˇr je tedy limitován pouze ˇs´ıˇrkou plátna a nemá problém se zobrazen´ım i celého úhlu pohledu (360^◦). Ale v pˇr´ıpadˇe pouˇzit´ı fotoaparátu uˇz takové triviáln´ı ˇreˇsen´ı neexistuje. U analogového fotoaparátu existuje pouze ˇreˇsen´ı pomoc´ı speciáln´ıch optik. U digitáln´ıch fotoaparát˚u jiˇz existuje v´ıce variant stejnˇe jako u analogových fotoaparát˚u m˚uˇzeme zvolit pouˇzit´ı speciáln´ı optiky, nebo také dokáˇzeme se sn´ımkem, nebo i v´ıce sn´ımky dále pracovat pomoc´ı tzv. postprocesingu (zpracován´ı sn´ımku po jeho poˇr´ızen´ı).

Postprocesing pro panoramatické zobrazen´ı pomoc´ı digitáln´ıch zaˇr´ızen´ı m˚uˇzeme aplikovat jak na statické, tak i dynamické sn´ımky(video). Výhodou statických sn´ımk˚u je, ˇze obraz je vˇzdy stálý a v ˇcase se nemˇen´ı, t´ım se vytváˇren´ı panoramatických

(15)

sn´ımk˚u zjednoduˇsuje a existuje i mnoho nástroj˚u, které dokáˇz´ı vytvoˇrit z v´ıce sn´ımk˚u panoramatický obraz. Ale u dynamického zobrazen´ı uˇz nastávaj´ı právˇe komplikace se zmˇenou obrazu sn´ımk˚u v ˇcase, tyto komplikace jsou popsány také v této práci.

Ale i pro toto dynamick´e zobrazen´ı existuj´ı n´astroje.

Samostatnou problematikou je zobrazen´ıˇzivých panoramat. Touto problematikou se zabývá tato práce, proto je jej´ım c´ılem vytvoˇren´ı komplet´ıho ˇreˇsen´ı pro poˇr´ızen´ı tˇechto sn´ımk˚u a jejich zobrazen´ı jako interaktivn´ı aplikace v podporovaném webovém prohl´ıˇzeˇci.

(16)

2 Panor´ ama

Panoráma je ˇsiroký pohled na krajinu nebo na jakýkoliv objekt. Jedná se o kompozici se ˇsirokým zábˇerem. Velikost úhlu zábˇeru této kompozice nen´ı pˇresnˇe specifikována.

Pojem panoráma je znám uˇz z dávných dob a s panoramatickými sn´ımky se setkáme napˇr´ıklad v zámc´ıch a hradech, kde najdeme vˇetˇsinou výjevy z bitev. Panoramatické fotografie se ˇcasto i objevuj´ı jako sn´ımky krajin, mˇest a r˚uzných prostor.

2.1 Technika poˇ r´ızen´ı panoramatick´ ych sn´ımk˚ u

2.1.1 Statick´ e panor´ ama

Statické panoráma urˇcuj´ı sn´ımky, které se v rámci ˇcasu nemˇen´ı. Zejména reprezen- tuje poˇr´ızen´ı sn´ımk˚u fotaparátem s panoramatickým objektivem nebo poˇr´ızen´ı nˇekolika sn´ımk˚u navazuj´ıc´ıch v kompozici na sebe a jejich následným spojen´ım. Poˇrizován´ı sn´ımk˚u pomoc´ı speciáln´ıch objektiv˚u je tou nejjednoduˇsˇs´ı variantou, ale ovˇsem vyˇzaduje speciáln´ı a ˇcasto nákladné optiky. Jeden z tˇechto objektiv˚u je na obrázku 2.1, tento objektiv má pozorovac´ı úhly 60^◦ nad a pod horizontem a 360^◦ horizontálnˇe.

Levnˇejˇs´ı variantou je vytvoˇren´ı panoramatického sn´ımku pomoc´ı soustavy v´ıce sn´ımk˚u, které na sebe navazuj´ı, a jejich následném spojen´ı. Spojen´ı tˇechto sn´ımk˚u je zajiˇstˇeno pomoc´ı programu. Program˚u pro vytvoˇren´ı panoramatických sn´ımk˚u existuje hodnˇe, ale vˇzdy záleˇz´ı na jejich schopnostech. Nˇekteré vyˇzaduj´ı sn´ımky nafocené s pˇresnou návaznost´ı, kde software tyto sn´ımky pouze spoj´ı. Lepˇs´ı nástroje dokáˇz´ı sestavit

(17)

panoramatický sn´ımek i z nepˇresného napojen´ı jednotlivých sn´ımk˚u. V tˇechto pro- gramech se vyuˇz´ıvá spojován´ı a natáˇcen´ı obrazu dle nˇekolika specifických bod˚u spojovaných sn´ımk˚u. Jako pˇr´ıklad takového softwaru m˚uˇzu uvést bezplatné Easy- pano, ArcSoft Panorama Maker, Hugin, Picassa a mnoho dalˇs´ıch, mezi placené patˇr´ı napˇr´ıklad PanoramPlus X4, Adobe Photoshop. Funkce vytvoˇren´ı panoramat z v´ıce sn´ımk˚u je dnes i implementována ve vˇetˇsinˇe digitáln´ıch fotaparát˚u. Také lze nalézt velké mnoˇzstv´ı aplikac´ı pro chytré telefony.

Obr´azek 2.1: Objektiv PanoPro

2.1.2 Dynamick´ e panor´ ama

Dynamické panoráma oproti statickému vyuˇz´ıvá sn´ımky, které se v ˇcase mˇen´ı.

V tomto pˇr´ıpadˇe lze opˇet vyuˇz´ıt dvou moˇznost´ı pro poˇr´ızen´ı sn´ımk˚u, stejnˇe jako u statických vyuˇzit´ım speciáln´ıch panoramatických optik a také i poˇr´ızen´ım sn´ımk˚u v´ıce zaˇr´ızen´ımi a jejich následné spojen´ı. V rámci optik jsou vlastnosti stejné jako statické sn´ımky. Druhá varianta - spojován´ı sn´ımk˚u má v tomto pˇr´ıpadˇe rozd´ıl zda se kamery ve scénˇe pohybuj´ı ˇci ne.

V pˇr´ıpadˇe nepohybliv´ych kamer je spojov´an´ı sn´ımk˚u jednoduˇsˇs´ı z d˚uvodu stat-

(18)

ické pozice pro výpoˇcet spojovac´ıch bod˚u. V tomto pˇr´ıpadˇe staˇc´ı výpoˇcet spojovac´ıch bod˚u a natoˇcen´ı obrazu pouze pro jednu sadu sn´ımk˚u v jednom ˇcasovém okamˇziku.

Ostatn´ı sady sn´ımk˚u pak budou pouze aplikovat vytvoˇren´e rozloˇzen´ı a natoˇcen´ı.

2.1.3 Typy panoramat

Cylindrick´e panor´ama

Cylindrické panoráma zajiˇstuje rotace kolem horizontáln´ı osy. V podstatˇe si toto panoráma m˚uˇzeme pˇredstavit jako obraz vytvoˇrený uvnitˇr horizontáln´ı stˇeny válce.

Poˇr´ızen´ı sn´ımk˚u pro toto panoráma m˚uˇzeme realizovat speciáln´ım objektivem, nebo pomoc´ı poˇr´ızen´ı v´ıce sn´ımk˚u a jejich vzájemného stitchingu.

Prvn´ı zp˚usob vyuˇz´ıvá tzv. catadioptrický objektiv. Jedná se o objektiv, který je sloˇzen z nˇekolika ˇcoˇcek a zakˇrivených zrcadel, které odráˇzej´ı sv˚uj obraz do zorného pole optiky objektivu. Výhodou této metody je okamˇzité poˇr´ızen´ı celého panoramatu a kvalita obrazu. Nevýhodou samozˇrejmˇe je nákladnost a sloˇzitost výroby takového objektivu.

Druhý zp˚usob vyˇzaduje poˇr´ızen´ı v´ıce sn´ımk˚u tak, aby sn´ımaˇc byl na stejném m´ıstˇe a otáˇcel se po horizontáln´ı ose. V rámci tohoto otáˇcen´ı se poˇrizuj´ı postupnˇe sn´ımky. Poˇr´ızen´ı tˇechto sn´ımk˚u lze provést tak, ˇze jednotlivé sn´ımky budou na sebe tˇesnˇe napojeny nebo se budou navzájem ˇcásteˇcnˇe pˇrekrývat. V pˇr´ıpadˇe tˇesného napojen´ı m˚uˇze nastat problematika poˇr´ızen´ı celého 360^◦, kde posledn´ı sn´ımek mus´ı být oˇr´ıznut tak, aby nenastal pˇrekryv se sn´ımkem prvn´ım. Varianta ˇcásteˇcného pˇrekryt´ı vyuˇz´ıvá stitchingu. Podstatným parametrem je velikost pˇrekryt´ı a vzájemné natoˇcen´ı jednotlivých sn´ımk˚u.

(19)

Krychlov´e panor´ama

Krychlové panorama se vytváˇr´ı uvnitˇr krychle na jednotlivé stˇeny. Na kaˇzdou stˇenu této krychle je potˇreba samostatný sn´ımek, z toho vyplývá, ˇze je nutné pro vytvoˇren´ı takového panoramatu ˇsest sn´ımk˚u. Aby sn´ımky na sebe navazovaly mus´ı se poˇr´ıdit z jednoho bodu - stˇredu krychle. Dále je nutné, aby jednotlivé sn´ımky byly poˇr´ızeny optikou s úhlem zábˇeru 90^◦. Ve výsledném sloˇzeném obrazu lze zpozorovat pravoúhlé napojen´ı jednotlivých sn´ımk˚u. Výhoda tohoto ˇreˇsen´ı je v n´ızké nároˇcnosti na výkon pˇri zpracován´ı obrazu.

P˚ulkulov´e panor´ama

Vyuˇz´ıvá efektu ryb´ıho oka, to znamená, ˇze se sn´ımá obraz polokoule, kde v jej´ım kruhovém obvodu je zdrojový obraz hustˇs´ı a s pˇribliˇzován´ım ke stˇredu se postupnˇe stává ˇr´ıdkým. To má za d˚usledek velké mnoˇzstv´ı detail˚u uprostˇred a malé detaily pˇri úhlech zobrazen´ı vˇetˇs´ım jak 90^◦. Poˇr´ızen´ı sn´ımku lze zajistit optikou s efektem ryb´ıho oka nebo lze dopoˇc´ıtat z v´ıce sn´ımk˚u pomoc´ı stitchingu a deformace obrazu.

Kulov´e panor´ama

Kulové panoráma vyuˇz´ıvá stejnou techniku zpracován´ı jako p˚ulkulové, ale s rozd´ılem, ˇze se vyuˇzij´ı 2 poloukoule se spoleˇcným stˇredem a opaˇcným smˇerem vypouklé strany.

Stereografick´e panor´ama

Typ panoramatu vyuˇz´ıvaj´ıc´ı stereografické projekce. Nejˇcastˇeji se tato projekce vyuˇz´ıvá na kulové plochy. Výhodou této projekce je zachován´ı úhlu zobrazených objekt˚u v kruhovém obvodu, to má za následek lepˇs´ı zobrazen´ı detail˚u v tˇechto m´ıstech oproti klasickému p˚ulkulovému panoramatu.

(20)

Panografie

Technika zpracován´ı nˇekolika sn´ımk˚u tak, ˇze výsledný obraz je sestaven ze vzájemnˇe se pˇrekrývaj´ıc´ıch se sn´ımk˚u tvoˇr´ıc´ıch panoramatické zobrazen´ı. V této technice se neˇreˇs´ı oˇrezán´ı pˇrekryvu, ale pouze jen natoˇcen´ı a um´ıstˇen´ı jednotlivých sn´ımk˚u.

(21)

3 Streamov´ an´ı videa

Stream nebo ˇcesky proud je technologie pro pˇrenos audia a videa mezi serverem (zdrojem) a klienty. Existuj´ı 2 typy streamu, a to v reálném ˇcase nebo tzv. zp˚usobem video on demand. Stream v reálném ˇcase je zp˚usob, kdy se uˇzivatel˚um pos´ılá aktuáln´ı pˇrehrávané nebo vys´ılané video. V tomto streamu se nelze pohybovat dopˇredu po ˇcasové ose. Druhý zp˚usob video on demand je zp˚usob streamován´ı videa na vyˇzádán´ı uˇzivatele. To znamená, ˇze streamovac´ı server má uloˇzené video, o které si uˇzivatel poˇzádá a server poté uˇzivateli vys´ılá stream videa po médiu. Tento zp˚usob umoˇzˇnuje uˇzivateli pˇresouván´ı se po ˇcasové ose videa.

Nejd˚uleˇzitˇejˇs´ım parametrem pro streamován´ı videa je volba zp˚usobu pˇrenosu a kódován´ı dat. Pˇrenos dat urˇcuje pouˇzitý protokol. Protokol je standard, který urˇcuje pr˚ubˇeh komunikace mezi zaˇr´ızen´ımi. Mezi nejpouˇz´ıvanˇejˇs´ı protokoly patˇr´ı HTTP, RTP, RTMP, Adobe HTTP Dynamic Streaming, Microsoft Smooth Stream- ing a Shoutcast. Kódován´ı dat zajiˇstuj´ı kodeky. Kaˇzdý kodek má své specifické vlastnosti, jako jsou kompresn´ı pomˇer, rozliˇsen´ı, ˇr´ızen´ı datových tok˚u, rychlost komprese a dalˇs´ı. Pro streamován´ı videa je nejd˚uleˇzitˇejˇs´ı vlastnost´ı právˇe rychlost komprese.

C´ım rychleji dok´ˇ aˇze kodek data zkomprimovat, t´ım i výsledné video bude m´ıt menˇs´ı zpoˇzdˇen´ı oproti reálnému obrazu. Mezi vhodné formáty kodek˚u pro streamován´ı videa lze zaˇradit H.264(MP4), H.265(HEVC), RealVideo, Theora, VP8, VP9 a WMV.

(22)

Pro streamov´an´ı videa pro v´ıce klient˚u je duleˇzit´e pouˇzit´ı streamovac´ıho serveru.

Tento server zajiˇst’uje distribuci zdroj˚u mezi pˇripojenými klienty. Kromˇe této dis- tribuce vytváˇr´ı mezipamˇet’ mezi jednotlivými zdroji a klienty. Tato mezipamˇet’ oproti pˇr´ımému vys´ılán´ı videa umoˇzˇnuje jednotlivým klient˚um plynulé pˇrehráván´ı. M˚uˇze nastat situace, kdy napˇr´ıklad dva klienti A a B se pˇripoj´ı k serveru a poˇzaduj´ı stream videa. Server jim tento stream poskytne. U klienta B ale napˇr´ıklad nastane zpoˇzdˇen´ı pˇr´ıjmu o nˇekolik ms, aby klient B nepˇriˇsel o sn´ımky, které v rámci tohoto zpoˇzdˇen´ı klient A pˇrijmul, tak server v rámci pouˇzit´ı mezipamˇeti klientovi B tyto sn´ımky zaˇsle a vˇsechny následuj´ıc´ı sn´ımky bude zas´ılat posunuté právˇe o toto zpoˇzdˇen´ı. Právˇe velikost mezipamˇeti je jedn´ım z parametr˚u nastaven´ı serveru. Dalˇs´ımi vlastnosmi stream server˚u je kontrola a ˇr´ızen´ı pˇr´ıstupu k médi´ım, ˇreˇsen´ı ˇspatných pˇripojen´ı, statistika, ˇr´ızen´ı zdroj˚u. Mezi nejznámˇejˇs´ı servery pro streamován´ı videa patˇr´ı ze skupiny s volnou licenc´ı napˇr´ıklad Icecast, FFServer, Red5 a Darwin Streaming server. Mezi servery s placenou licenc´ı se ˇrad´ı QuickTime Broadcaster, WOWZA Streaming engine, Adobe Media server, Evostream.

(23)

4 WebGL

Je Javascriptové aplikaˇcn´ı rozhran´ı pro zobrazován´ı 3D grafiky ve webových prohl´ıˇzeˇc´ıch.

Vývoj WebGL zajiˇstuje nezisková organizace Khronos Group. WebGL pro svoji funkc´ı vyuˇz´ıvá shader˚u realizovaných v jazyce GLSL (OpenGL Shading Language) postavených na aplikaˇcn´ım rozhran´ı OpenGL ES 2.0. Implementaci tohoto rozhran´ı najdeme ve vˇsech dnes nejpouˇz´ıvanˇejˇs´ıch prohl´ıˇzeˇc´ıch. Pro zobrazen´ı grafické scény se vyuˇz´ıvá HTML elementu canvas. Mezi zaj´ımavé projekty realizované pomoc´ı We- bGL lze zaˇradit Google mapy, Zygote Body (model lidské anatomie), populárn´ı hru Angry birds, Autocad 360 WEB.

(24)

5 Existuj´ıc´ı ˇ reˇ sen´ı

Existuje nˇekolik ˇreˇsen´ı pro sn´ım´an´ı 360^◦ videa, ale vˇsechna tato ˇreˇsen´ı vyˇzaduj´ı

konkrétn´ı hardware anebo zpracovávaj´ı 360^◦video aˇz po poˇr´ızen´ı jednotlivých videosekvenc´ı.

V rámci reˇserˇse kompletn´ıho ˇreˇsen´ı jsem vybral zaˇr´ızen´ı Allie od firmy IC Real- tech, které bylo jako prvn´ı veˇrejnˇe prezentováno jako plnˇe funkˇcn´ı ˇreˇsen´ı s podporou streamu v reálném ˇcase. Toto zaˇr´ızen´ı se vyráb´ı v nˇekolika verz´ıch, rozd´ıl mezi nimi je zejména v rámci rozliˇsen´ı pouˇzitého fotosn´ımaˇce. Jedná se o konstrukci dvou fotosn´ımaˇc˚u um´ıstˇených zády k sobˇe s velmi ˇsirokoúhlou optikou. Výsledný panora- matický obraz je pak pomoc´ı softwaru spojen a distribuován do aplikace, která tento obraz zobraz´ı. Ovládán´ı je zajiˇstˇeno orbitáln´ım posuvem po obrazu anebo, pokud se jedná o zaˇr´ızen´ı s gyroskopem, ovládáno pomoc´ı naklápˇen´ı a rozpoznáván´ı dat pávˇe z tohoto gyroskopu. Zaˇr´ızen´ı dle výrobce umoˇzˇnuje streamován´ı videa v reálném ˇcase. Toto streamován´ı prob´ıhá opˇet do speciáln´ı aplikace od výrobce. V rámci pro- duktového videa na veletrhu CES 2015 je tento stream prezentován, ale nenab´ız´ı dostateˇcný poˇcet sn´ımk˚u za sekundu aby byl výsledný obraz plynulý.

Obr´azek 5.1: Verze ˇreˇsen´ı kamer Aliie od IC Realtech

(25)

Dalˇs´ı ze zaj´ımavých ˇreˇsen´ı nab´ız´ı firma Nokia se zaˇr´ızen´ım OZO. Jedná se o zaˇc´ınaj´ıc´ı projekt s vyrobeným prototypem. Zaˇr´ızen´ı dle oficiáln´ı zprávy výrobce um´ı nahrávat a i pomoc´ı specializovaného softwaru zobrazovat stream tohoto videa v reálném ˇcase.

Zaˇr´ızen´ı se skládá z osmi kamer um´ıstˇených v kouli. Na obrázku 5.2 je ukázka tohoto zaˇr´ızen´ı.

Obr´azek 5.2: Nokia OZO

Spoleˇcnost Google pro 360^◦ videa pˇrizp˚usobila svoji sluˇzbu YouTube. Podpora tˇechto vide´ı ale zat´ım nen´ı pro videa v reálném ˇcase. Pro nahrán´ı takového videa na servery YouTube mus´ı být video natoˇcené nˇekterou z doporuˇcených nebo pod- porovaných kamer. Nahrávan´ı tˇechto vide´ı lze také pomoc´ı obyˇcejných kamer a pomoc´ı specializovaného softwaru vytvoˇrit podporované video. Pˇr´ıkladem tohoto softwaru m˚uˇze být napˇr´ıklad Kolor Autopano nebo VideoStitch. V tomto roce spoleˇcnost Google na konferenci Google I/O pˇredstavila ˇreˇsen´ı, které by v budoucnu mˇelo umoˇzˇnovat zobrazen´ı videa v reálném ˇcase. Toto ˇreˇsen´ı nese název Google JUMP a pˇr´ıstup k nˇemu je zat´ım jen pro vybrané úzké testovac´ı skupiny. Jednou ze souˇcást´ı

(26)

je YouTube360. Na obrázku 5.3 je rámeˇcek JUMP camera rig osazený kamerami Go- PRO.

Obr´azek 5.3: Google JUMP camera rig

(27)

6 N´ avrh vlastn´ıho ˇ reˇ sen´ı

C´ılem práce bylo seznámen´ı se s problematikou streamován´ı videa na internetu a 3D WebGL aplikac´ı. Následnˇe dané znalosti uplatnit pro návrh a realizaci WebGL aplikace pro prohl´ıˇzen´ı ˇzivých 360^◦ panoramat.

6.1 Sezn´ amen´ı se s problematikou

Souˇcasná ˇreˇsen´ı nejˇcastˇeji zpracovávaj´ı tzv. offline video panoramata. To znamená, ˇze zaznamenaná videa se nahraj´ı a pak teprve zpracuj´ı, aby se mohla zobrazit. Soft- ware, který tyto videa zpracovává, ovˇsem nelze pouˇz´ıt pro videa v reálném ˇcase.

Dalˇs´ım problémem je, ˇze i tato ˇreˇsen´ı ˇcasto vyˇzaduj´ı specializovaný hardware pro své pouˇzit´ı (viz kapitola Existuj´ıc´ı ˇreˇsen´ı). Streamován´ı videa na webu je dnes jiˇz bˇeˇznou prax´ı, a to i v pˇr´ıpadˇe ˇzivých vide´ı. V letoˇsn´ım roce spustil portál YouTube streamován´ı 360^◦ vide´ı v rámci svého standardu, jedná se ale pouze opˇet o post- procesingem zpracované video. V pˇr´ıpadˇe streamován´ı 360^◦ vide´ı se pˇrenáˇs´ı velké mnoˇzstv´ı dat, to uˇz ale také nebývá problém z d˚uvodu neustálého zkvalitˇnován´ı rychlosti pˇripojen´ı k internetu. Tato práce tedy pˇrináˇs´ı ˇreˇsen´ı pro spojen´ı 360^◦ vide´ı a jejich ˇzivého pˇrenosu.

(28)

6.2 N´ avrh vlastn´ıho ˇ reˇ sen´ı

Pro návrh ˇreˇsen´ı jsem zvolil krychlové panorama. Pro záznam sn´ımk˚u bude tedy potˇreba 6 kamer um´ıstˇených ve spoleˇcném stˇredu. Celé ˇreˇsen´ı bude typu server- klient. Server bude zajiˇst’ovat zpracován´ı obrazu z jednotlivých kamer tak, aby ˇsly co nejlépe um´ıstit na virtuáln´ı krychli. Dále bude m´ıt na starosti distribuci tˇechto upravených sn´ımk˚u pˇres internet ke klientské ˇcásti aplikace a své grafické uˇzivatelské rozhran´ı. Server bude sestavený pro operaˇcn´ı systém Linux. Klienstská ˇcást aplikace bude postavena na technologi´ıch HTML páté verze, Javascriptu a ap- likaˇcn´ıho rozhran´ı WebGL. D´ıky tˇemto technologi´ım m˚uˇze být klientská aplikace co nejv´ıce multiplatformn´ı. Klient ˇreˇs´ı pˇr´ıjem streamu videa ze serveru a vytvoˇr´ı právˇe onu virtuáln´ı krychli, na kterou se jako textura pˇrilep´ı jednotlivé sn´ımky z kamer.

Uˇzivateli bude poskytnuto tzv. orbitáln´ı ovládán´ı ve stˇredu této krychle. Ovládán´ı klientské aplikace bude pˇrizp˚usobeno také pro uˇzivatele s dotykovými zaˇr´ızen´ımi jako telefony a tablety. Návrh ˇreˇsen´ı popisuje obrázek 6.1.

Obr´azek 6.1: N´avrh ˇreˇsen´ı

(29)

7 Vlastn´ı ˇ reˇ sen´ı

V následuj´ıc´ıˇcásti práce se budu zabývat popisem vytvoˇreného ˇreˇsen´ı. V Hardwarové ˇcásti bude popsána testovac´ı konfigurace, zejména pouˇzité kamery, jejich pˇripojen´ı, pouˇzité rozhran´ı a problematika pˇripojen´ı vˇetˇs´ıho mnoˇzstv´ı kamer k poˇc´ıtaˇci. Na to naváˇze softwarová ˇcást, kde pop´ıˇsi vytvoˇrenou aplikaci, jej´ı implementaci a nastaven´ı. Zároveˇn v této ˇcásti práce bude kapitola s návrhem ˇreˇsen´ı vyuˇz´ıvaj´ıc´ı stitchingu v reálném ˇcase, které umoˇzˇnuje volnˇejˇs´ı rozm´ıstˇen´ı kamer v prostoru. V závˇereˇcné kapitole této práce jsou výsledky testován´ı vliv˚u kodek˚u a nároˇcnosti na pˇrenosové médium v rámci testovac´ı hardwarové konfigurace.

7.1 Hardwarov´ a ˇ c´ ast

Uˇz z návrhu ˇreˇsen´ı je jako výsledný typ panoramatu zvolené krychlové panorama a koncepce server-klient. Pro tento pˇr´ıpad je tedy nutné pouˇzit´ıˇsesti kamer sn´ımaj´ıc´ıch daný prostor ze spoleˇcného stˇredu. Z d˚uvod˚u dostupnosti ˇreˇsen´ı ˇsirokému mnoˇzstv´ı uˇzivatel˚u byly zvoleny webové kamery pˇripojené pomoc´ı rozhran´ı USB k poˇc´ıtaˇci (serveru). Jednotlivé poˇzadavky na webkamery a serverový poˇc´ıtaˇc jsou popsány v následuj´ıc´ıch podkapitolách. V rámci klientského hardwaru nejsou kladeny ˇzádné speciáln´ı poˇzadavky, pouze zaˇr´ızen´ı disponuj´ıc´ı webovým prohl´ıˇzeˇcem podporuj´ıc´ım standard HTML5, Javascript a WebGL. V dneˇsn´ı dobˇe existuje obrovské mnoˇzstv´ı zaˇr´ızen´ı s touto podporou, od mobiln´ıch telefon˚u po chytré televize.

(30)

7.1.1 Poˇ zadavky na webkamery

Jako hlavn´ı poˇzadavek na webkameru se v pˇr´ıpadˇe krychlového panoramatu ˇrad´ı zobrazovac´ı úhel. V nejideálnˇejˇs´ım pˇr´ıpadˇe je nejlepˇs´ı zobrazovac´ı úhel (FOV) 90^◦, právˇe z d˚uvodu jednoduchého sloˇzen´ı výsledného panoramatického obrazu. Výsledný obraz z jednotlivých kamer je poté pomoc´ı softwaru sloˇzen do tzv. krychlové mapy.

Dalˇs´ı vlastnosti kamer jako rozliˇsen´ı sn´ımaˇce, typ sn´ımaˇce, svˇetelnost uˇz záleˇz´ı na individuáln´ıch potˇrebách. Výsledná aplikace dokáˇze pracovat s webovými kamerami pˇripojenými pˇres libovolná rozhran´ı, ale s podm´ınkou, ˇze v operaˇcn´ım systému se k nim bude pˇristupovat jako ke standardn´ımu video zaˇr´ızen´ı. Tento parametr v pod- statˇe splˇnuj´ı veˇskeré USB webkamery. Jelikoˇz pro výsledné panorama potˇrebujeme ˇsest kamer, tak je vhodné, aby tyto kamery mˇely stejné vlastnosti, nejlépe byly totoˇzné.

(31)

7.1.2 Pouˇ zit´ e webkamery

Pro testován´ı aplikace bylo zap˚ujˇceno ˇsest webových kamer Logitech QuickCam PTZ z Ústavu informaˇcn´ıch technologi´ı a elektroniky Technické univerzity v Liberci.

Parametry tˇechto kamer:

• Maxim´aln´ı rozliˇsen´ı: 1600x1200 (2MP)

• Typ senzoru: CMOS

• Bit˚u na pixel: 12

• Zobrazovac´ı ´uhel (FOV): 75^◦ diagon´alnˇe

• Komprese: MJPEG

• Max. sn´ımkovac´ı rychlost:

– 30 sn´ımk˚u/s pˇri rozliˇsen´ı 320x240, 640x480, 800x600 – 15 sn´ımk˚u/s pˇri rozliˇsen´ı 960x720, 1280x960, 1600x1200

• Rozhran´ı: High Speed USB 2.0

Obr´azek 7.1: Webkamera Logitech QuickCam PTZ

(32)

Rozm´ıstˇen´ı kamer

Pro usnadnˇen´ı pˇresného rozm´ıstˇen´ı, tak aby byl sn´ımán prostor kop´ıruj´ıc´ı pohled ze stˇredu krychle na jej´ı jednotlivé strany, je vhodné kamery kalibrovat. Jednou z moˇznost´ı kalibrace je ˇsachovnicové schéma. Pouˇzit´ıˇsachovnice pro krychlové panorama ukazuje obrázek 7.2. Samotná kalibrace se provád´ı natoˇcen´ım a um´ıst’ován´ım kamer tak, aby jednotlivˇe vˇsechna krajn´ı pole ˇsachovnice na sebe v náhledu pˇr´ımo navazo- vala a jejich natoˇcen´ı bylo shodné.

Obr´azek 7.2: Kalibrace pomoc´ı ˇsachovnice pro krychlov´e panorama

7.1.3 Poˇ zadavky na server

Pro variantu krychlového panoramatu s pˇresným rozm´ıstˇen´ım kamer popsaných výˇse nen´ı minimáln´ı hardwarová konfigurace pˇr´ıliˇs nároˇcná. Pro spuˇstˇen´ı výsledné aplikace postaˇc´ı souˇcasná konfigurace bˇeˇzné kanceláˇrské sestavy. Jedinou podm´ınkou je dostatek rozhran´ı pro pˇripojen´ı daného mnoˇzstv´ı kamer tak, aby vˇsechny mohly pracovat najednou. Pro návrh ˇreˇsen´ı vyuˇz´ıvaj´ıc´ı stitching v reálném ˇcase je výkon sestavy pˇr´ımo zavislý na kvalitˇe a plynulosti výsledného obrazu.

(33)

7.1.4 Pouˇ zit´ a konfigurace serveru

Testovac´ı konfigurace serveru m´a tyto parametry:

• Procesor: Intel Core i3 4010U Hasswell (1.7 GHz)

• Operaˇcn´ı pamˇet’: 4GB DDR3

• Pevn´y disk: 500GB (5400rpm) + 16GB SSD Cache

• Pouˇzit´e rozhran´ı pro pˇripojen´ı kamer: 2 xUSB 3.0

• Dalˇs´ı zaˇr´ızen´ı: aktivn´ı USB3.0 rozboˇcovaˇc

7.1.5 Pˇ ripojen´ı v´ıce kamer na rozhran´ı USB

Z d˚uvodu, ˇze pro testovac´ı konfiguraci byly zvoleny webkamery na rozhran´ı USB, jsem se setkal právˇe s problematikou pˇripojen´ı v´ıce webkamer. Problém nastává v ˇs´ıˇrce komunikaˇcn´ıho pásma sbˇernice USB, jelikoˇz se standardnˇe sn´ımky z webkamer odes´ılaj´ı do poˇc´ıtaˇce v nekomprimovaném formátu, tak pro pouˇzit´ı vˇetˇs´ıho rozliˇsen´ı sn´ımk˚u a v´ıce kamer tato ˇs´ıˇrka pásma je nedostaˇcuj´ıc´ı. ˇCásteˇcným ˇreˇsen´ım je vyuˇzit´ı novˇejˇs´ıho standardu USB3.0, který má pˇrenosové pásmo ˇsirˇs´ı. Ovˇsem pokud chceme vyuˇz´ıvat nekompresn´ı pˇrenos sn´ımk˚u, nastane jeˇstˇe problém s nemoˇznost´ı vytvoˇren´ı v´ıce komunikaˇcn´ıch kanál˚u na jednom ˇradiˇci pos´ılaj´ıc´ı tato surová data.

Optimáln´ım ˇreˇsen´ım by tedy bylo m´ıt na kaˇzdou pˇripojenou webkameru samostatný ˇradiˇc, ovˇsem tuto moˇznost nelze aplikovat na vˇsech zaˇr´ızen´ıch z d˚uvodu absence adekvátn´ıch pˇripojen´ı. ˇReˇsen´ı se tedy nacház´ı jiˇz ve výbˇeru kamer, a to takových, aby mˇely hardwarovou podporu kompresn´ıho pˇrenosu. Nejˇcastˇejˇs´ı kompresn´ı pˇrenos zajiˇst’uje komprese typu MJPG (motion JPEG). Výhoda této komprese je v jej´ı rychlosti, která je zajiˇstˇena pomoc´ı intra-frame komprese. Nejlepˇs´ı kompresn´ı pomˇer, kterého lze doc´ılit, je 1:20. Tato komprese, pokud nen´ı nastavena jako výchoz´ı typ

(34)

pˇrenosu na webkameˇre, se mus´ı aktivovat softwarovˇe pˇred vytvoˇren´ım datového ko- munikaˇcn´ıho kanálu. V tabulce 7.1 je pˇrehled zat´ıˇzen´ı jednou testovac´ı kamerou pˇrenosového pásma pro vybraná rozliˇsen´ı bez a s kompres´ı MJPG. Výpoˇcet je dán následuj´ıc´ım vzorcem:

Zat´ıˇzen´ı p´asma = sn´ımk˚u za sekundu (fps)∗ˇs´ıˇrka sn´ımku∗v´yˇska sn´ımku∗bit˚u na pixel

Komprese MJPEG je ve výpoˇctu v tabulce 7.1 brána jako maximáln´ı moˇzná. Na reálných sn´ımc´ıch bude komprese niˇzˇs´ı.

Tabulka 7.1: Zat´ıˇzen´ı pˇrenosov´eho p´asma

Aby bylo moˇzné pˇripojit vˇsech ˇsest webkamer k testovac´ı konfiguraci serveru, byl zvolen pro zvýˇsen´ı poˇctu port˚u aktivn´ı USB3.0 rozbovaˇc. Volba právˇe rozboˇcovaˇce standardu USB3.0 byla d˚uleˇzitá, aby byla zaruˇcena poˇzadovaná datová propustnost.

7.1.6 Poˇ zadavky klienta

Klienstká aplikace vzhledem ke svému univerzáln´ımu pouˇzit´ı na zaˇr´ızen´ıch disponuj´ıc´ıch webovým prohl´ıˇzeˇcem s podporou HTML5, Javascriptu a WebGL pˇr´ıliˇs omezuj´ıc´ıch parametr˚u nemaj´ı. Omezen´ı se ovˇsem nalézá v nutnosti podpory grafického adaptéru pro OpenGL ES 2.0. Tuto podporu ale najdeme ve vˇetˇsinˇe c´ılových zaˇr´ızen´ı zm´ınˇených výˇse.

(35)

7.2 Softwarov´ a ˇ c´ ast

Z návrhu ˇreˇsen´ı je pouˇzita koncepce server-klient. Jak uˇz bylo výˇse zmiˇnováno v návrhu, server bude zaˇrizovat zpracován´ı obrazu z kamer a jeho streamován´ı.

Klient pˇrijme stream a pˇridá grafické uˇzivatelské rozhran´ı pro pohyb po výsledném panoramatu.

7.2.1 Server

Serverová aplikace je realizována pro operaˇcn´ı systém Linux. Jako programovac´ı jazyk byla zvolena Java, z d˚uvodu jednoduché pˇrenositelnosti kódu pro pˇr´ıpadného budouc´ı rozˇs´ıˇren´ı na jiné platformy. Pro spuˇstˇen´ı aplikace je nutné tedy Java JDK minimálnˇe verze 1.8, FFmpeg minimálnˇe verze 2.2.x se vˇsemi zavislými knihovnami (zejména jsou nutné knihovny libavutil, libavcodec, libavdevice) a VLC(konkrétnˇe postaˇcuje konzolová verze CVLC) . Blokové zobrazen´ı funkˇcn´ıch ˇcást´ı aplikace popisuje obrázek 7.3. Jednotlivé bloky a samotná funkce aplikace budou popsány v následuj´ıc´ıch podkapitolách. Samotná aplikace a zdrojové kódy jsou zaznamenány na pˇriloˇzeném CD této práce.

Webkamera

Server (JAVA)

FFMPEG Capture

JavaCV (úprava snímku)

Instance webkamery

Konﬁgurace od uživatele (konﬁgurační soubor, GUI)

GUI

Parametry

Konﬁgurace

Stream server OGV (Theora) Stream server MP4 (H.264) Stream

server WEBM

Jádro aplikace Ovládání

WEBSERVER

HTTP

Parametry

Ovládání

Snímky

Internet

Obr´azek 7.3: Funkˇcn´ı ˇc´asti serveru

(36)

Funkce aplikace

Dle obrázku 7.3 aplikace umoˇzˇnuje dvˇe moˇznosti nastaven´ı parametr˚u. Za prvé pomoc´ı konfiguraˇcn´ıho souboru, tato varianta je vhodná pro nasazen´ı na terminálovém (negrafickém) serveru. A za druhé pomoc´ı grafického uˇzivatelského rozhran´ı. Obˇe moˇznosti budou popsány n´ıˇze. Po nastavaven´ı konfigurace se vytvoˇr´ı instance jed- notlivých pˇripojených webkamer. Kaˇzdá tato instance má pro sebe vytvoˇrený samostatný proces pˇrijmu sn´ımk˚u pomoc´ı FFmpeg nebo CVLC. Pro budouc´ı rozˇs´ıˇren´ı je v kaˇzdé instanci webkamery implementován blok úpravy sn´ımk˚u pomoc´ı JavaCV, o tomto rozˇs´ıˇren´ı se budu zmiˇnovat v kapitole Návrh ˇreˇsen´ı vyuˇz´ıvaj´ıc´ı stitching. Sn´ımky z kaˇzdé webkamery poté aplikace dle zadaných parametr˚u odes´ılá vhodnému streamovac´ımu serveru. Tento server je vˇzdy vybrán dle zvoleného výstupn´ıho kodeku. Pro formáty

WEBM a MP4 je pouˇzit upravený open source stream server Stream-M. Pro OGV se vyuˇz´ıvá ˇreˇsen´ı Icecast 2 distribuované pod licenc´ı GNU GPL v2. Veˇskeré výstupn´ı streamy vyuˇz´ıvaj´ı pˇrenosového protokolu HTTP. Aplikace zároveˇn obsahuje inte- grovaný webserver, který host´ı klientskou ˇcást aplikace a zároveˇn poskytuje konfiguraci této ˇcásti.

Instance webkamery

V této ˇcásti se ˇreˇs´ı veˇskerá obsluha webkamer. V programu je kaˇzdá webkamera reprezentac´ı instance jednoduché tˇr´ıdy webcam, která má dva atributy - název a oznaˇcen´ı zaˇr´ızen´ı v operaˇcn´ım systému. Pˇri spuˇstˇen´ı aplikace se vytvoˇr´ı právˇe tyto instance dle aktuálnˇe pˇripojeného hardwaru. Pro vyhledán´ı kamer pˇripojených k poˇc´ıtaˇci slouˇz´ı metoda getListWebcams(), pro svoji funkci vyuˇz´ıvá programu v4l2- ctl. Samotné z´ıskán´ı sn´ımk˚u z kamer a jejich nastaven´ı poté obstarává výkonná ˇcást v jádru aplikace reprezentována tˇr´ıdami commandMaker a streamProcess, tyto tˇr´ıdy budou popsány dále.

(37)

Stream server

Aplikace v sobˇe integruje dvˇe moˇznosti stream serveru. Prvn´ı moˇznost pomoc´ı open source n´astroje StreamM, kter´y zajiˇst’uje stream pomoc´ı kodek˚u WebM a MP4(h.264).

A druhá moˇznost slouˇz´ı pro kodek OGV(Theora), kde se vyuˇz´ıvá nástroje Icecast.

Aplikace vytvoˇr´ı dle nastavené konfigurace parametry k tˇemto nástroj˚um a spust´ı jejich instanci za pomoci tˇr´ıdˇe serverProcess. Samotné nastaven´ı a pˇredán´ı vstupn´ıch sn´ımk˚u poté zajiˇstuje opˇet pˇr´ısluˇsná instance tˇr´ıdy commandMaker. Dle typu zv- oleného kodeku, a tud´ıˇz i streamovac´ıho nástroje aplikace vybere pˇr´ısluˇsný nástroj pro z´ıskán´ı sn´ımk˚u. Pro kodeky WebM a MP4 se jako zdrojový nástroj vybere ffmpeg, pro kodek OGV je vyuˇzito cvlc. V tˇechto obou pˇr´ıpadech aplikace nastav´ı vhodné parametry kamerám a nástroj˚um pˇredá jejich konfiguraci. V obou pˇr´ıpadech stream prob´ıhá po protokolu HTTP na zvoleném portu v konfiguraci aplikace. Mezi nejdl˚uleˇzitˇejˇs´ı parametry patˇr´ı rozliˇsen´ı, sn´ımkovac´ı rychlost, nastaven´ı kompresn´ıho pˇrenosu a synchronizace kl´ıˇcových sn´ımk˚u.

J´adro aplikace

Jádro aplikace zpostˇredkovává ˇr´ızen´ı vˇsech jednotlivých souˇcást´ı. Zajiˇst’uje ˇr´ızen´ı a sledován´ı stavu jednotlivých souˇcást´ı dle blokového diagramu na obrázku 7.3.

Samotné metody jsou obsaˇzeny v hlavn´ı tˇr´ıdˇe celé aplikace. Kaˇzdá jednotlivá souˇcást aplikace obsahuje metodu pro zjiˇstˇen´ı jej´ıho aktuáln´ıho stavu a metodu pro kompletn´ı zastaven´ı. Tˇr´ıdy, které aplikace obsluhuje, jsou popsány zde:

• commandMaker - urˇcuje formát a parametry daným pˇr´ıkaz˚um dle nastavené konfigurace

• serverHTTP - integrovan´y jednoduch´y HTTP server

• serverProcess - obsluha a ˇr´ızen´ı streamovac´ıch server˚u

• settingsClient - nastaven´ı klienstk´e ˇc´asti del parametr˚u serveru

(38)

• streamProcess - obsluha a ˇr´ızen´ı samotn´eho streamu

• webcam - tˇr´ıda urˇcuj´ıc´ı vlastnosti kamer

Kaˇzdá instance kamery a aktuálnˇe pouˇz´ıvaný stream server pro svou práci vytvoˇr´ı samostatný proces. Výhodou tohoto rozvrˇzen´ı je, ˇze v pˇr´ıpadˇe chyby jednoho z tˇechto kl´ıˇcových prvk˚u nenastane pád celé aplikace, ale pouze jednotlivé ˇcásti. Aplikace právˇe d´ıky kontroln´ım metodám nad jednotlivými procesy graficky oznám´ı uˇzivateli stavy daných funkc´ı. Uˇzivatel poté m˚uˇze zkusit znovu spustit právˇe jenom urˇcitou ˇcást aplikace. Výmˇena dat(sn´ımk˚u) mezi streamovac´ım serverem a streamem kamer se provád´ı vˇzdy pomoc´ı rour mezi jednotlivými vytvoˇrenými procesy.

Webserver

Funkci zajiˇstuje tˇr´ıda serverHTTP. Jedná se o nenároˇcný server, který slouˇz´ı pro

´

uˇcely hostován´ı klientské aplikace. Výchoz´ı adresáˇr var/www se nacház´ı ve zdrojové sloˇzce aplikace. V této sloˇzce se i nacház´ı zdrojové soubory klientské ˇcásti aplikace.

Maximáln´ı poˇcet spojen´ı je omezen na 201 a urˇcuje ho promˇenná maxConections, aktuáln´ı poˇcet spojen´ı je dán promˇenou actualConections.

Konfiguraˇcn´ı soubor

Jak uˇz bylo výˇse zm´ınˇeno aplikace lze spouˇstˇet i pˇr´ımo z konzole. Tato funkce je vhodná pro terminálové servery. Na to, aby ˇsla aplikace t´ımto zp˚usobem spustit, mus´ı se j´ı jako parametr pˇredat konfiguraˇcn´ı soubor. Vzorový konfiguraˇcn´ı soubor je obsaˇzen na pˇriloˇzeném CD této práce. Pokud aplikace bude m´ıt právˇe tento parametr, automaticky se nezobraz´ı grafické uˇzivatelské rozhran´ı ale zaˇcnou se pos- tupnˇe s nˇekolika sekundovým zpoˇzdˇen´ım spouˇstˇet jednotlivé funkce programu s parametry nastavenými právˇe v konfiguraˇcn´ım souboru.

(39)

Grafick´e uˇzivatelsk´e rozhran´ı

Grafické uˇzivatelské rozhran´ı (GUI) je koncipováno tak, aby po uˇzivateli nevyˇzadovalo ˇzádné velké moˇznosti nastaven´ı. Obrázek 7.4 znázorˇnuje obrazovku aplikace pˇri spuˇstˇen´ı. GUI se skládá ze tˇr´ı ˇcást´ı moˇzných nastaven´ı, konkrétnˇe jde o nastaven´ı server˚u, nastaven´ı kamer a nastaven´ı videa. Nastaven´ı server˚u urˇcuje volba pouˇzitého kodeku, internetové adresy, port stream a webového serveru. Internetová adresa je d˚uleˇzitý parametr pro nastaven´ı klientské aplikace, pokud by totiˇz server nemˇel pˇr´ımou adresu do internetu a byl napˇr´ıklad um´ıstˇen za NATem, tak adresa zadaná v tomto poli je právˇe adresou viditelnou z internetu. Standardnˇe pˇri spuˇstˇen´ı programu se vol´ı aktuáln´ı adresa výchoz´ıho adaptéru. Adresa v tomto poli m˚uˇze být zadána bud’ v klasickém numerickém formátu, nebo i pomoc´ı doménového názvu.

Nastaven´ı port˚u lze nastavit jak pro stream server, tak i pro webový server. Stan- dardnˇe jsou voleny porty pro stream server 8080 a pro web server 8888. Nastaven´ı videa urˇcuje základn´ı parametry videa, jako jsou rozmˇery videa (ˇs´ıˇrka a výˇska), tyto rozmˇery ovlivˇnuj´ı jak samotný pˇr´ıjem sn´ımk˚u z webkamer, tak i velikost zo- brazovaného videa v klentské ˇcásti. Parametr FPS urˇcuje jaká bude nastavená sn´ımkovac´ı rychlost webkamer a samotného pˇrenosu. Hodnoty sn´ımkovac´ı rychlosti pˇr´ımo ovlivˇnuj´ı poˇzadovanou rychlost pˇrenosu, výsledky testován´ı pˇrenosových rychlost´ı budou uvedeny v závˇeru této práce. Nastaven´ı cache urˇcuje velikost vyrovnác´ı pamˇeti streamovac´ıho serveru. V nastaven´ı kamer se nastavuje pˇridˇelen´ı jednotlivých kamer pˇripojených k poˇc´ıtaˇci ke stranám výˇse zm´ınˇené virtuáln´ı krychle. Jednotlivé ˇcásti aplikace se spouˇstˇej´ı bud’ samostatnˇe pomoc´ı pˇr´ısluˇsných tlaˇc´ıtek, nebo pomoc´ı takzvaného hromadného spuˇstˇen´ı v doln´ı ˇcásti GUI. V pˇr´ıpadˇe ruˇcn´ıho spouˇstˇen´ı je vhodné, aby se jednotlivé kamery spouˇstˇely s ˇcasovým zpoˇzdˇen´ım alespoˇn pˇet sekund. V pˇr´ıpadˇe automatického spuˇstˇen´ı aplikace automaticky zpoˇzdˇenˇe spouˇst´ı jednotlivé kamery.

GUI umoˇzˇnuje i kontrolu funkˇcnosti jednotlivých stream˚u. Jak uˇz bylo psáno výˇse v popisu aplikace, zajiˇst’uje to vizuáln´ı signalizace. Pokud daný stream kamery byl spuˇstˇen a funguje, je pod jeho názvem zbarveno pozad´ı zelenˇe, pokud je stream

(40)

Obrázek 7.4: Grafické uˇzivatelské rozhran´ı

spuˇstˇen, ale nefunguje, zbarven´ı má ˇcervenou barvu, a pokud stream nebyl spuˇstˇen pozad´ı, splývá s pozad´ım GUI. Obrázek 7.5 ukazuje moˇzné situace.

Obrázek 7.5: Grafické uˇzivatelské rozhran´ı - spuˇstˇený stream

7.2.2 Klient

Klientská aplikace vyuˇz´ıvá jazyky HTML5, CSS3, JavaScriptu, knihovny THREE.js a aplikaˇcn´ıho rozhran´ı WebGL. Z tohoto d˚uvodu je moˇzné ji spustit na ˇsirokém mnoˇzstv´ı platforem, které maj´ı webový prohl´ıˇzeˇc podporuj´ıc´ı tyto jazyky a aplikaˇcn´ı

(41)

rozhran´ı WebGL. Blokové zobrazen´ı funkˇcn´ıch ˇcást´ı aplikace popisuje obrázek 7.6.

Jednotlivé bloky a samotná funkce aplikace budou popsány v následuj´ıc´ıch pod- kapitolách. Samotná aplikace a zdrojové kódy jsou obsaˇzené na pˇriloˇzeném CD této práce. Klientská aplikace vytvoˇr´ı z dodaných stream˚u ve WebGL objekt krychle, na kterou se jednotlivé streamy budou zobrazovat dle urˇcených stran. Uˇzivatel se pohybuje pomoc´ı ovládac´ıho rozhran´ı v prostoru krychle (uvnitˇr krychle).

Klient (HTML5, WEBGL, Javascript) Internet

Konﬁgurace Načtení konﬁgurace

HTML

Layout Canvas

WEBGL Javascript

Objekt

Video element Skybox

Textura (cubemap)

Ovládání

Příprava dat

Video stream

Obr´azek 7.6: Funkˇcn´ı ˇc´asti klienta

Implementace klienta

Klientská aplikace je hostována na stranˇe serveru v integrovaném webserveru. Z toho d˚uvodu nen´ı nutné na klientské zaˇr´ızen´ı instalovat ˇzádnou aplikaci, ale pouze pˇristupovat k této aplikaci pomoc´ı webového prohl´ıˇzeˇce s výˇse zm´ınˇenou podporou. Adresa pˇr´ıstupu k aplikaci je dána nastaven´ım serveru, konkrétnˇe v poli Internetová adresa

(42)

a také portem webového serveru zadaným v poli Port webového serveru.

Konfigurace

Jak uˇz bylo zmýnˇeno výˇse, konfigurace klientské aplikace se vytvoˇr´ı spoleˇcnˇe s nastaven´ım serveru. Tud´ıˇz nen´ı nutné, aby uˇzivatel klientské aplikace musel nastavo- vat nˇekteré z parametr˚u. Jelikoˇz se konfigurace vymˇeˇnuje mezi dvˇema r˚uznými aplikacemi, zvolil jsem jako formát výmˇeny dat jazyk JSON. Základn´ı struktura konfigurace m˚uˇze vypadat napˇr´ıklad takto:

{"defaultPath":"video/video.webm","globalCodec":"video/webm",

"globalWidth":320,"globalHeight":240,

"pathTextureRight":"http://192.168.0.30:8080/consume/videoRight",

"pathTextureLeft":"http://192.168.0.30:8080/consume/videoLeft",

"pathTextureFront":"http://192.168.0.30:8080/consume/videoFront",

"pathTextureBack":"http://192.168.0.30:8080/consume/videoBack",

"pathTextureTop":"http://192.168.0.30:8080/consume/videoTop",

"pathTextureBottom":"http://192.168.0.30:8080/consume/videoBottom"}

Parametr defaultPath urˇcuje, jaké video se bude pˇrehrávat v pˇr´ıpadˇe neak- tivn´ıho streamu pro jednotlivé strany. Dalˇs´ı parametry jako globalCodec,globalWidth a globalHeight udávaj´ı pouˇzitý kodek a rozmˇery videa na jednotlivých stranách virtuáln´ı krychle. Posledn´ımi parametry jsou adresy k jednotlivým stream˚um oznaˇcované jako pathTexture a poˇzadovaná strana.

Knihovna THREE.js

Knihovna THREE.js je volnˇe ˇsiˇritelná knihovna implementuj´ıc´ı aplikaˇcn´ı rozhran´ı WebGL. Tato knihovna obsahuje nejˇcastˇeji pouˇz´ıvané metody a objekty pouˇz´ıvané právˇe ve WebGL, vytvoˇrené tak, aby se k nim pˇristupovalo co nejjednoduˇseji.

(43)

Struktura a funkce klientsk´e aplikace

Jednotlivé moduly v rámci klientské aplikace na sebe navazuj´ı. ˇR´ıd´ıc´ı ˇcást obstarává Javascript. Pˇri spuˇstˇen´ı aplikace se naˇcte nejprve defaultn´ı tmavý vzhled pozad´ı, zjist´ı se velikost zaˇr´ızen´ı a nastav´ı se zobrazen´ı. Zjiˇstˇen´ı velikosti a zároveˇn nastaven´ı zobrazen´ı tak, aby se zabránilo zmˇenám velikosti v pr˚ubˇehu zobrazován´ı streamu, je zajiˇstˇeno pomoc´ı meta tagu viewport. Nastaven´ı tohoto tagu je následuj´ı:

V tˇele stránky poté následuje element div s identifikátorem container, do kterého se budou um´ıst’ovat vygenerované elementy pro vykreslován´ı grafiky. Jeˇstˇe pˇred spuˇstˇen´ım samotného zpracován´ı panoramatu je provedena kontrola pˇr´ıtomnosti a správného spuˇstˇen´ı WebGL, bez kterého se aplikace neobejde. Po této kontrole následuje naˇcten´ı parametr˚u aplikace z konfiguraˇcn´ıho souboru uloˇzeném na serveru.

Pro toto naˇcten´ı se vyuˇz´ıvá XMLHttpRequest()pro naˇcten´ı souboru JSON popiso- vaného výˇse.

Po této základn´ı inicializaci se zpracuje konfigurace. Prvn´ım krokem je pˇr´ıprava textur jednotlivých stran virtuáln´ı krychle. Tuto pˇr´ıpravu zajiˇstuje funkce getTexture() pro kaˇzdou stranu samostatnˇe. Funkce vytvoˇr´ı HTML5 element video a pˇridˇel´ı mu nastaven´ı, zároveˇn naˇcte zdroj tohoto videa a spust´ı jeho pˇrehráván´ı. Zároveˇn se vytvoˇr´ı dalˇs´ı element canvas, který slouˇz´ı jako plocha pro kreslen´ı grafiky do webové stránky. Velikost této plochy je stejná jako velikost videa. Abychom mohli pouˇz´ıt tento canvas pro zobrazen´ı videa, mus´ıme z´ıskat pˇr´ıstup k jeho obsahu, pro z´ıskán´ı pˇr´ıstupu k tomuto obsahu slouˇz´ı v aplikaci promˇenná context opˇet vytvoˇrená pro kaˇzdou stranu samostatnˇe. V tomto pˇr´ıpadˇe uˇz je vˇse pˇripravené na vytvoˇren´ı textury pro krychli, která se vytvoˇr´ı ve funkci init(). Samotné vytvoˇren´ı textury pak

(44)

má jako parametr zdroje vˇzdy pˇr´ısluˇsný vytvoˇrený canvas. V následuj´ıc´ı ukázce kódu je zobrazena funkce z´ıskán´ı textury pro levou stranu krychle.

function getTextureLeft(path){

videoLeft = document.createElement( ’video’ );

videoLeft.id = ’videoLeft’;

videoLeft.type = globalCodec;

videoLeft.src = path;

videoLeft.load();

videoLeft.play();

canvasLeft = document.createElement( ’canvas’ );

canvasLeft.id = "canvasLeft";

canvasLeft.width = globalWidth;

canvasLeft.height = globalHeight;

contextLeft = canvasLeft.getContext( ’2d’ );

contextLeft.fillStyle = ’#000000’;

contextLeft.fillRect( 0, 0, canvasLeft.width, canvasLeft.height );

textureLeft = new THREE.Texture( canvasLeft );

textureLeft.minFilter = THREE.LinearFilter;

textureLeft.magFilter = THREE.LinearFilter;

return textureLeft;}

(45)

Celou tuto srukturu skládán´ı textury pro jednotlivé strany vystihuje diagram na obrázku 7.7.

Obr´azek 7.7: Diagram otexturov´an´ı stran krychle

Inicializaci scény, kamery a samotné krychle, na kterou se budou vkládat vytvoˇrené textury, obstarává funkce init(). V této metodˇe se vytvoˇr´ı scéna. To je v podstatˇe jen prostor, do kterého se vkládaj´ı objekty. Do této scény se poté pˇridá kamera, neboli pohled do scény. Úhel pohledu kamery je zvolen na 75^◦. ˇS´ıˇrka a výˇska tohoto pohledu se kv˚uli moˇznosti zobrazen´ı na v´ıce typech zaˇr´ızen´ı vypoˇc´ıtává z aktuáln´ı velikosti okna, to má za d˚usledek stále optimáln´ı zobrazen´ı pohledu. Kamera je po vytvoˇren´ı objektu krychle pˇresunuta dovnitˇr do stˇredu krychle. Pˇred vytvoˇren´ım objektu krychle je nutné aplikovat vytvoˇrené textury uvedené výˇse jako samostatné plochy, které budou pokrývat strany krychle. Toho je doc´ıleno zmapován´ım výˇse uvedeného vytvoˇren´ı textur na tyto plochy, opˇet pro jednotlivé strany samostatnˇe.

Poté se vytvoˇr´ı samotný objekt krychle a um´ıst´ı se na nˇej jako jednotlivé textury právˇe tyto plochy.

Pro renderován´ı (znovunaˇcten´ı) scény se vyuˇz´ıvá CanvasRenderer(), který volá funkci render(). Ve funkci render se obnovoj´ı jednotlivé textury a pohyb krychle.

V pˇr´ıpadˇe pohybu po tomto panoramatu se jednotlivé textury stran deformuj´ı tak, aby vytváˇrely dojem pohybu v prostoru. Nejlépe tuto deformaci vystihuj´ı tzv. drátová schémata vytvoˇreného modelu panoramatu na obrázku 7.8 , jednotlivé

(46)

strany krychle jsou zv´yraznˇeny tuˇcnˇe.

Obrázek 7.8: Drátová schémata modelu panoramatu

Ovl´ad´an´ı

V pˇr´ıpadˇe spuˇstˇen´ı klientské aplikace se automaticky spust´ı automatické posouván´ı po panoramatu, kde rozhled kolem dokola trvá pˇribliˇznˇe tˇri minuty. Aplikaci vˇsak lze ovládat dvˇema zp˚usoby, a to pomoc´ı myˇsi, anebo pomoc´ı dotykové obrazovky. Po- moc´ı myˇsi pˇri stisknutém levém tlaˇc´ıtku a následném pohybu se posouváme v rámci obou os. Pˇribliˇzován´ı a oddálován´ı pohledu se provád´ı koleˇckem myˇsi. Pˇri dosaˇzen´ı maximáln´ıho oddálen´ı a pˇribl´ıˇzen´ı se pohled pˇrevrát´ı. Dotykové ovládán´ı funguje na pˇrirozeném pohybu prstu po zobrazeném pohledu. V podstatˇe kamera sleduje a kop´ıruje pohyb prstu po obrazovce. Pˇribl´ıˇzen´ı a oddálen´ı v tomto pˇr´ıpadˇe ovládán´ı nen´ı implementováno.

(47)

V´ysledn´e zobrazen´ı

Obrázek 7.9 znázorˇnuje ˇcást výsledného zobrazen´ı v m´ıstnosti. Obrázek 7.10 pˇredstavuje také ˇcást výsledného zobrazen´ı, ale ve venkovn´ım prostoru. Videa pohybu po tˇechto zobrazen´ıch jsou um´ıstˇená na pˇriloˇzeném CD ve sloˇzce ukázky. Kvalita návaznosti výsledného zobrazen´ı je vˇzdy pˇr´ımo závislá na pˇresném rozm´ıstˇen´ı kamer.

Obrázek 7.9: Ukázka výsledného zobrazen´ı v m´ıstnosti

Obrázek 7.10: Ukázka výsledného zobrazen´ı venku

(48)

7.2.3 N´ avrh ˇ reˇ sen´ı vyuˇ z´ıvaj´ıc´ı stitching

Nad rámec ˇreˇsen´ı této práce jsem testoval ˇreˇsen´ı, které by vyuˇz´ıvalo stitching sn´ımk˚u v reálném ˇcase. Výhoda tohoto ˇreˇsen´ı spoˇc´ıvá ve volném rozm´ıstˇen´ı kamer bez nutnosti kalibrace. V tomto ˇreˇsen´ı je pˇri inicializaci kamer na stranˇe serveru pˇrijat jeden sn´ımek z kaˇzdé kamery. Tyto sn´ımky se pomoc´ı funkce stitchingu obsaˇzených v kni- hovnˇe JavaCV (OpenCV) spoj´ı a z´ıskaj´ı se jejich koordinaˇcn´ı parametry, natoˇcen´ı a oˇr´ıznut´ı. Tyto kordinaˇcn´ı parametry se pak budou aplikovat na vˇsechny následuj´ıc´ı sn´ımky. Po urˇcitém ˇcasovém intervalu se opˇet vybere jeden sn´ımek z kaˇzdé kamery a znovu se pˇrepoˇc´ıtaj´ı tyto parametry. Pˇrepoˇcet nastává z d˚uvod˚u zmˇen scény a pˇr´ıpadného pohybu kamer. Nevýhodou ovˇsem je, ˇze výsledné sn´ımky maj´ı vˇzdy promˇenlivé rozliˇsen´ı. Toto promˇenlivé rozliˇsen´ı pak je problematické pro stream výsledných sn´ımk˚u na stranu klienta. Testovac´ı aplikace dokázala odeslat jen velmi malé mnoˇzstv´ı sn´ımk˚u, a tedy z d˚uvod˚u nestability nen´ı ani obsahem v této práci.

(49)

8 Z´ avˇ er

Pˇri vytváˇren´ı aplikace pro zobrazován´ı 360^◦ panoramat se autor snaˇzil vytvoˇrit ˇreˇsen´ı, které bude jednoduché pro uˇzivatele. Jak z hlediska um´ıstˇen´ı kamer, tak i z hlediska jednoduchého nastaven´ı aplikace. Hlavn´ım c´ılem bylo vytvoˇren´ı prohl´ıˇzeˇce tˇechto panoramat dostupném pˇres webové rozhran´ı.

8.1 Sloˇ zitost ˇ reˇ sen´ı

Výsledná aplikace se skládá ze dvou ˇcást´ı serveru a klienta. Obˇe tyto ˇcásti poskytuj´ı stabiln´ı základ pro moˇznost dalˇs´ıho rozˇs´ıˇren´ı. Pˇri vytváˇren´ı této práce musel autor ˇreˇsit nˇekolik problém˚u, které se objevovaly postupnˇe s vývojem. Mezi nejpodstatnˇejˇs´ı problémy patˇrilo zprovoznˇen´ı v´ıce webových kamer na jednom poˇc´ıtaˇci, odes´ılán´ı velkého mnoˇzstv´ı dat na stranu klienta a nastaven´ı rozm´ıstˇen´ı a kalibrace kamer.

8.2 Vliv kodek˚ u a hardwarov´ a n´ aroˇ cnost

Pouˇzité kodeky byly vybrány, tak aby mˇely co nejlepˇs´ı vlastnosti pro pouˇzit´ı streamován´ı videa na internetu. Vybrané kodeky maj´ı m´ırné odliˇsnosti v hardwarové nároˇcnosti.

Odliˇsnosti jsou zp˚usobené také i rozd´ılnými pouˇzitými nástroji pro dané kodeky. Pro srovnán´ı výkonu jednotlivých kodek˚u na zvoleném testovac´ım hardwaru serveru uve- deném v kapitole 7.1.4 bylo provedeno mˇeˇren´ı spotˇrebované operaˇcn´ı pamˇeti a pro- centuáln´ı konzumace výkonu procesoru. Jako testovac´ı nastaven´ı bylo zvoleno ro-

(50)

zliˇsen´ı 320x240 pˇri sn´ımkovac´ı rychlosti 10 sn´ımk˚u za sekundu a velikost vyrovnávac´ı pamˇeti 1 000KB. Vˇsechna výsledná data jsou pr˚umˇerné hodnoty za ˇcasový interval jedné minuty. K serveru byl v dobˇe mˇeˇren´ı pˇripojen jeden klient. Tyto výsledky jsou uvedeny v tabulce 8.1

Tabulka 8.1: Zat´ıˇzen´ı serveru

Pro mˇeˇren´ı na stranˇe klienta bylo pouˇzito stejné nastaven´ı. V tomto pˇr´ıpadˇe mˇeˇren´ı prob´ıhalo na dvou testovac´ıch sestavách. Pro klientskou ˇcást byla provedena dvˇe mˇeˇren´ı. Prvn´ı slouˇz´ı pro otestovan´ı implementace v r˚uzných prohl´ıˇzeˇc´ıch na platformˇe Windows (verze 10) a Linux (Fedora 22). Bylo tedy provedeno mˇeˇren´ı procentuáln´ı konzumace výkonu a velikosti spotˇrebované pamˇeti na prohl´ıˇzeˇc´ıch Mi- crosoft Internet Explorer 11, Mozzila Firefox a Google Chrome verze 44. Prohl´ıˇzeˇc In- ternet Explorer pro chod kodeku WEBM mus´ı m´ıt integrované roˇs´ıˇren´ı pro podporu tohoto formátu. Výsledky tohoto mˇeˇren´ı jsou uvedeny v tabulce 8.2 pro systém Win- dows a v tabulce 8.3 pro systém Linux. Testovac´ı sestava pro operaˇcn´ı systém Linux je stejné konfigurace jako uvedená testovac´ı sestava serveru. Sestava pro systém Windows má následuj´ıc´ı parametry:

• Procesor: Intel Core 2 Duo T5870 (2.00 GHz)

• Operaˇcn´ı pamˇet’: 2GB DDR2

• Pevn´y disk: 500GB (5400rpm)

Tabulka 8.2: V´ykon prohl´ıˇzeˇce Windows

(51)

Tabulka 8.3: V´ykon prohl´ıˇzeˇce Linux

Druhé provedené mˇeˇren´ı poukazuje na zat´ıˇzen´ı pˇrenosového pásma. Bylo zvoleno mˇeˇren´ı mnoˇzstv´ı pˇrenesených dat za daný ˇcasový interval. ˇCasový interval byl urˇcen na jednu minutu. Výsledky mˇeˇren´ı jsou znázornˇeny v tabulce 8.4.

Tabulka 8.4: Mnoˇzstv´ı pˇrenesen´ych dat

V rámci provedených mˇeˇren´ı se jako nejvhodnˇejˇs´ı pouˇzitelný kodek jev´ı WEBM.

Oproti namˇeˇreným hodnotám má v˚uˇci kodeku MP4 podstatnou výhodu právˇe v rámci streamován´ı dat, a to konkrétnˇe v rychlém naˇcten´ı pˇr´ıchoz´ıho streamu. Tato vlastnost je zp˚usobena velmi n´ızkou velikost´ı startovac´ı vyrovnávac´ı pamˇeti tzv. precache.

Nev´yhodou tohoto form´atu je nutnost rozˇs´ıˇren´ı pro prohl´ıˇzeˇc Internet Explorer.

Oproti kodek˚um WEBM a MP4 má kodek OGV n´ızké zat´ıˇzen´ı serveru. Rozd´ıl v kvalitˇe výstupn´ıho videa nebyl v porovnán´ı vˇsech tˇechto tˇr´ı moˇznost´ı kodek˚u znatelný. Pro pouˇzit´ı na zaˇr´ızen´ıch maj´ıc´ıch omezen´ı v rychlosti a mnoˇzstv´ı dat se opˇet nejlepˇs´ı výsledky ukázal kodek WEBM.

8.3 Celkov´ a funkˇ cnost a moˇ zn´ a vylepˇ sen´ı

V rámci této práce bylo vytvoˇreno ˇreˇsen´ı server-klient, kde server zprostˇredkovával sn´ımky z kamer a zajiˇst’oval jejich stream ke klientovi. Klient byl vytvoˇren tak, aby byl pˇr´ıstupný z webového rozhran´ı a zajiˇst’oval jednoduchost ovládán´ı. Celkové

(52)

ˇreˇsen´ı bylo odzkouˇseno a v rámci provedených mˇeˇren´ı zaznamenaných výˇse byly zpracovány poznatky z tˇechto mˇeˇren´ı. Aplikace je vhodná pro pouˇzit´ı streamován´ı velkých prostor˚u a krajin. Autorovým impulsem k vytvoˇren´ı této práce bylo streamován´ı 360^◦ ˇzivého pohledu na Liberec.

Autor chce na této problematice dále pracovat a bude se snaˇzit vylepˇsit nˇekteré ˇcásti, které uvádˇel v textu této práce. Jednou z moˇznost´ı zkvalitnˇen´ı je moˇznost volného rozm´ıstˇen´ı kamer a ˇzivého stitchingu obrazu. Dalˇs´ı navrhované vylepˇsen´ı se týká sn´ıˇzen´ı mnoˇzstv´ı pˇrenáˇsených dat, kde pˇr´ıjem streamu videa by byl odeb´ırán jen pouze z kamer v aktuáln´ım náhledu. Výhodným vylepˇsen´ım m˚uˇze v budoucnosti také být vytvoˇren´ı serverové aplikace na platformu Windows.

8.4 Zhodnocen´ı

V pr˚ubˇehu této práce musel autor ˇreˇsit stále se objevuj´ıc´ı problémy jak hard- warové, tak i softwarové, a tud´ıˇz výsledná aplikace pˇri svém vývoje procházela ˇradou razantn´ıch zmˇen. Stanovené c´ıle práce byly splnˇeny a v rámci z´ıskaných poznatk˚u byly navrˇzeny moˇznosti vylepˇsen´ı. Vˇsechny body zadán´ı této práce byly splnˇeny a je vytvoˇreno funkˇcn´ı ˇreˇsen´ı s jednoduchou implementac´ı. Aplikace proˇsla testován´ım na uvedené hardwarové konfiguraci s oˇcekávaným funkˇcn´ım výsledkem.

(53)

Literatura

[1] Makzan: Programujeme hry v HTML5, Computer Press, 2012, EAN:9788025137314

[2] Zakas, Z. N.: JavaScript pro webové vývojáˇre, Computer Press, 2009, EAN:9788025125090

[3] COMPUPHASE,. Panoramic images. Panoramic images [online]. 2000, (7) [cit.

2015-09-09]. Dostupn´e z: http://www.compuphase.com/panorama.pdf

[4] DIRKSEN, Jos. Learning Three The JavaScript 3D Library for WebGL. New Edition. Birmingham: Packt Publishing, 2013. ISBN 17-821-6628-9.

[5] MATSUDA, Kouchi a Rodger LEA. WebGL programming guide: interactive 3D graphics programming with WebGL. xxv, 516 pages. Always learning. ISBN 03- 219-0292-0.

[6] PARISI, Tony. Programming 3D applications with HTML5 and WebGL. First edition. xv, 384 pages. ISBN 978-144-9362-966.

[7] AUSTERBERRY, David. The technology of video and audio streaming. 2nd ed.

Burlington, MA: Focal Press, 2004. ISBN 02-408-0580-1.

[8] SIMPSON, Wes. Video over IP: a practical guide to technology and applications.

2nd ed. Boston: Focal Press, c2006, xix, 493 p. ISBN 978-024-0805-573.

[9] ThreeJS Docs. MRDOOB. ThreeJS Docs [online]. [cit. 2015-09-09]. Dostupn´e z:

http://threejs.org/docs/

[10] OpenCV [online]. 2015 [cit. 2015-09-09]. Dostupn´e z: http://opencv.org/

[11] WEITZ, Allan. The Tools and Techniques of Panoramic Pho- tography [online]. (1) [cit. 2015-09-09]. Dostupn´e z: http://www.

bhphotovideo.com/explora/photography/tips-and-solutions/

tools-and-techniques-panoramic-photography

[12] CLARK, Richard. Beginning HTML5 and CSS3: the Web evolved : next gen- eration Web standards. New York: Distributed to the book trade worldwide by Springer Science+Business Media, c2012, xx, 600 p. Expert’s voice in Web de- velopment. ISBN 1430228741.

(54)

[13] HAGGAR, Peter. Practical Java: programming language guide. Reading, Mass.:

Addison-Wesley, c2000, xxx, 279 p. ISBN 0201616467-.

[14] SOUKUP, Roman. ˇSkola digit´aln´ı fotografie. 1. vyd. Praha: Grada, 2006, 146 s., 28 s. barev. obr. pˇr´ıl. Pr˚uvodce (Grada). ISBN 80-247-1077-3.

WebGL aplikace pro prohl´ıˇzen´ı ˇziv´ych 360