HTTP videó streaming

Átírás

1 HTTP videó streaming Mérési utasítás Multimédia technológiák és rendszerek laboratórium (VIHIAC06) Villamosmérnöki, BSc Infokommunikációs rendszerek specializáció Infokommunikáció laboratórium II. (VIHIAD01) Mérnök informatikus, BSc Infokommunikáció specializáció Kidolgozta: Dr. Huszák Árpád Hálózati Rendszerek és Szolgáltatások Tanszék MediaNETS Laboratórium, 2017

2 1 Mérés célja Az elmúlt évtizedben jelentős változások történtek a videó tartalom fogyasztók szokásaikban, mely leginkább az okostelefonok és tablet-ek elterjedésének, illetve a nagy átviteli sebességet nyújtó hozzáférési hálózatok megjelenésének köszönhető. A vezeték nélküli hálózati technológiák, mint a WLAN, 3G, 4G és jövőben 5G mobilhálózatok gyors fejődése is elősegítette ezt a folyamatot. A mobilizálódás következménye, hogy a felhasználók a hálózatok között barangolva is a lehető legjobb minőségű médiafolyam kiszolgálást kapják, az eltérő hálózati körülményekhez alkalmazkodva, miközben a felhasználók eszközei is rendkívül különbözőek (kijelző méret, támogatott felbontás, CPU teljesítmény, rádiós interface, stb.) Azt a médiatechnológiai megoldást, amely megszakadásmentesen képes a hálózati körülményekhez igazítani a médiafolyam minőségét adaptív bitsebességű streaming-nek, röviden adaptív streaming-nek nevezik. Többféle médiaátvitelt támogató protokoll létezik, mint például az RTP/RTCP, RTSP, RTMP, WebRTC, stb., melyek különböző igényeket részesítenek előnyben, attól függően, hogy on-demand, egyirányú valósidejű (pl. online TV) vagy interaktív valósidejű (pl. videó konferencia) médiaszolgáltatásról van szó. Az on-demand, illetve egyirányú valósidejű szolgáltatások esetén a HTTP alapú megoldások váltak a legelterjedtebbé. A mérés célkitűzése, hogy a hallgatók megismerkedjenek az adaptív videótovábbítás alapjaival, különös tekintettel a RTMP és HTTP alapú megoldásokra. A mérés során szerzett tapasztalatok alapján pedig maguk is képesek legyenek streaming szolgáltatás nyújtására. 2 RTMP streaming A Macromedia cég által kifejlesztett zárt, majd később az Adobe cég tulajdonába került, és részben nyílttá tett RTMP (Real Time Messaging Protocol) ígéretes jelölt volt arra, hogy videómegosztó portálok streaming alrendszerének megvalósítsák. Az RTMP egy TCP alapú protokoll, melynek köszönhetően perzisztens, hatékony kommunikáció építhető fel segítségével a kliens és szerver között. Annak érdekében, hogy a felhasználói élmény a lehető legmagasabb legyen, és ne akadozzon a lejátszás, a protokoll felszeleteli az adatfolyamot. Ezen szeletek méretét egy előzetes szerver-kliens közötti egyeztetési (negotiation) fázis során határozza meg. A Flash alapú RTMP streaming nemrég még a legelterjedtebb multimédia tartalom streamelési megoldás volt, azonban a Flash hanyatlásával kezd háttérbe szorulni. Az RTMP videó lejátszását a legnépszerűbb videólejátszó szoftverek is ismerik és hálózati folyamként képesek megnyitni, pl. VLC: rtmp:// :1935/vod1/movie.mp4 3 HTTP streaming áttekintése A korábbi streaming technológiák hátrányai, hogy bonyolult szerveroldali támogatást igényelnek, skálázhatóságuk korlátozott és a kliens szoftverek sem minden esetbe szabványosak, ezért két új irányzat jelent meg: HTML5 és HTTP adaptív streaming. HTML5 A HTML5 kifejlesztésének fő motivációja az volt, hogy a böngészőbe beépülő modulok (plug-in, pl. Adobe Flash Player) használata nélkül is elérhetők legyenek a webes alkalmazások, illetve hogy a webes tartalmak multimédia támogatását erősítsék. A HTML5 támogatás a webes tartalmakhoz mára szorosan kapcsolódó videótartalmak megjelenítésére és lejátszására is lehetőséget ad. Azonban míg a plug-in modul (pl. Flash, QuickTime) általában komplett megoldást ad a médiatartalmak vezérléséhez, a HTML5 önmagában erre nem képes, ehhez JavaScript és CSS (Cascading Style Sheets)

3 támogatásra is szükség van. HTML5 esetén a videótartalom lejátszásához szükséges videó dekódoló is nélkülözhetetlen, mely a böngésző részét képezi. Ebből adódóan a támogatott videóformátumok böngészőnként eltérő lehet. Általánosságban azonban elmondható, hogy a HTML kódba natívan, <video> és <audio> tag-ek közé illesztett multimédia tartalmak alapvetően 3 fő videóformátumforrásból képesek dolgozni: MP4 (H.264), Ogg (Theora), WebM (VP8). Egy egyszerű <video> tag a HTML kódban a következőképp néz ki, a három különböző formátumú videóforrás esetén: <video controls poster="pict.jpg" width="480"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> Your browser doesn't support HTML5 video tag. </video> A <video> tag-ben különböző paramétereket és funkciókat is megadhatunk. A mérés során csupán a következőkre lesz szükség, azonban a lehetőségek ennél sokkal széleskörűbbek [2]: <source> elemmel jelöljük ki, hogy az adott videólejátszó mely tartalmakat játssza le. Az src paraméter a fájl nevére, a type az adott fájl ún. MIME (Multipurpose Internet Mail Extensions) típusát határozza meg. A kód kiértékelése fentről lefelé történik, így a böngésző a felsorolás első sorában megadott forrás lejátszásával próbálkozik, amennyiben képes annak megnyitására. Sikertelen kísérletet követően a következő sorban megadott forrást próbálja megnyitni, és így tovább. Amennyiben egyik forrás sem megnyitható, erről egy hibaüzenetben tájékoztatatjuk a felhasználót. controls kulcsszó határozza meg a lejátszó számára, hogy a felhasználó felé megjelenítse-e a vezérlő elemeket (lejátszás, megállítás, előre és hátra tekercselés). poster= pict.jpg paraméterrel megadható a HTML5 videó lejátszó számára egy kezdő állókép, amely addig látható a weboldalon, amíg el nem indítjuk a lejátszást. width= 480" height= 360 a lejátszóablak méretei állíthatók be. muted a hang elnémítása. autoplay az oldal betöltésekor a videó azonnal indul onmouseover="this.play()" ha az egérmutató a lejátszóablak fölé kerül, a videó lejátszása azonnal megkezdődik. onmouseout="this.pause()" ha az egérmutató a lejátszóablak fölé kerül, a videó lejátszása szünetel. A HTML5 alapú videólejátszás számos előnnyel és természetesen hátránnyal is rendelkezik. Előnyök: külső beépülő modulok (pl. Flash plug-in) nélkül képes megjeleníteni multimédia tartalmakat alacsonyabb kliensoldali erőforrásigény natív kliens oldali támogatás átláthatóbb kódhasználat, már meglévő technológiák (pl. JavaScript) továbbfejlesztése, használata mobil támogatottság Hátrányok: böngészők általi támogatás nem teljes különböző minőségű videó szerveroldali tárolása nem támogatott videó formátum lejátszása a böngészőre hárul, ami előidézhet kompatibilitási kérdéseket codec licensz kérdések nem tisztázottak, nincs eldöntött egyeduralkodó videó formátum

4 A HTML5 videó megjelenítés és vezérlés minden böngészőben másképpen van implementálva, így kinézetük is eltérő, ahogy azt az 1. ábra is mutatja. 1. ábra Alapértelmezett vezérlési funkciók böngészőnként eltérnek A HTML5 lehetőségek kínál a webfejlesztőknek, hogy egyedi megjelenésű lejátszókat készítsenek a JavaScript nyelv és CSS leírók segítségével. A HTMLMediaElement JavaScript interface segítségével egyedileg vezérelhetjük a lejátszást, és grafikus elemeket hozhatunk létre a vezérlő GUI megvalósításához [3]. A lehetőségnek köszönhetően számos JavaScript alapú fizetős és ingyenesen is használható médialejátszó érhető el, melyek a támogatott technológia szempontjából is eltérhetnek egymástól [4]. A mérés során két ingyenesen használható lejátszót fogunk használni: PlayR [5] és VideoJS [6]. A mérésekhez szükséges lejátszók JavaScript és CSS kódjai a streaming szerver /usr/local/nginx/html/ megfelelő könyvtáraiban (Playr-master és Videojs) már elő vannak készítve. PlayR A PlayR [5] egy egyszerű, könnyen integrálható, mégis sokoldalú lejátszó. A lejátszó beillesztése könnyedén megtehető, csupán a szükséges.js és.css fájlok importálását kell megtenni, a.html fájl leíró részében, a <HEAD> </HEAD> tag-ek között. <HEAD> <link href="playr-master/playr.css" rel="stylesheet"> <script type="text/javascript" src="playr-master/playr.js"></script> </HEAD> Következő lépésben pedig a HTML kód <HEAD> </HEAD> részében kell a videó forrását megadni a <video> tag segítségével. <video class="playr_video" src="movie.mp4"> </video> VideoJS A VideoJS [6] egy nyílt forráskódú lejátszó keretrendszer, amely széles körben elterjedt, jól dokumentált és személyre szabható megoldás web alapú médiaalkalmazások számára. Több JavaScript kiegészítő is elérhető, amelyekkel a HLS (HTTP Live Streaming) és MPEG-DASH (Dynamic Adaptive Streaming over HTTP) lejátszás is támogatott. Alkalmazásának első lépése a szükséges.js és.css fájlok importálása.

5 <HEAD> <link href="videojs/video-js.css" rel="stylesheet"> <script src="videojs/video.js"></script> </HEAD> A következő lépés pedig, hogy a HTML kód <BODY> </BODY> részében beillesszük a videót a vezérlő gombokkal, ahogy azt a következő mintakód mutatja: <video id="video_1" class="video-js" controls> <source src="movie.mp4"> </video> <script> var player = videojs('video_1'); </script> Ha több lejátszó ablakot is meg akarunk jeleníteni a weboldalon, akkor minden videóhoz egyedi id azonosítót kell megadni VideoJS HLS és MPEG-DASH támogatás A HLS támogatáshoz a videojs.hls.min.js az MPEG-DASH-hez pedig a dash.all.js JavaScript kiegészítő importálására van szükség, ami szintén a <HEAD> </HEAD> tag-ek között adható meg. <HEAD> <!-- HLS plugin --> <script src="videojs/videojs.hls.min.js"></script> <! MPEG-DASH plugin --> <script src="videojs/dash.all.js"></script> <script src="videojs/videojs-dash.min.js"></script> </HEAD> Az importálást követően pedig már csak a HTML kódba kell beilleszteni a lejátszót, megadva forrásként az.m3u8 HLS vagy az.mpd MPEG-DASH manifest fájlt. HLS: <source src="videohls/movie.m3u8" type="application/x-mpegurl"> MPEG-DASH: <source src="videodash/movie.mpd" type="application/dash+xml"> HTTP adaptív streaming Adaptív videó lejátszásról akkor beszélhetünk, ha a letöltött videó minősége a kliens paramétereinek megfelelően alkalmazkodik. A megoldás lényege, hogy a tartalmat a kliens alkalmazás felméri a felhasználó eszközének hálózati tulajdonságait (rendelkezésre álló sávszélesség, ping értékek) és a releváns hardver erőforrásait (rendelkezésre álló CPU teljesítmény, megjeleníteni képes felbontás), majd a kiértékelést követően a megfelelő minőségű példányt tölti le a kiszolgáló szerverről. A hálózati és hardver erőforrások monitorozása folyamatos, annak érdekében, hogy a felhasználó a lehető legjobb minőségű szolgáltatást élvezhesse. Az adaptív streaming megoldások megkövetelik, hogy a szerver tároljon, illetve élő stream esetén valós időben transzkódoljon eltérő minőségű példányokat, amelyek közül a kliens a számára megfelelőt jelenítheti meg.

6 A HTTP protokoll használata esetén nincs szükség külön protokollra a vezérléshez és a média átviteléhez, ezáltal könnyen megvalósítható a legegyszerűbb eszközön is. Emellett a tűzfalakon való átjutás sem okoz problémát, hiszen a WWW forgalommal azonos, 80-as hálózati porton zajlik az átvitel. Az adaptivitást a különböző minőségben kódolt videó szegmensei (chunk) közötti váltással, vagy fájlokon belüli kulcsképre pozícionálással hajtják végre. Azt, hogy a szerver milyen minőségű szolgáltatási példányokkal rendelkezik az adott tartalomból, minden esetben egy ún. manifest (leíró) fájl adja meg. Ezen manifest fájlban a kliens többek között olyan vezérlési információkról tájékozódhat, mint az adott médiából milyen felbontású, bitsebességű példányok érhetőek el, milyen hosszúak a szeletek, stb. Többféle HTTP streaming megoldást dolgoztak ki, azonban az ismertetett alapelvek minden esetben ugyanazok. HTTP Live Streaming (HLS) Az Apple úttörő volt az adaptív HTTP Live Streaming megoldás 2009-ben való bemutatásával, és azóta is alapját képezi a HTTP alapú adaptív streaming technológiáknak. Az Apple elsősorban a saját mobil eszközeinek támogatására fejlesztette ki a HLS-t, mivel azok egyikében sincs natív Flash támogatás. Egy videó tartalom lejátszásának első lépése, hogy a kliens letölti a közvetítéshez tartozó.m3u8 manifest fájlt, amiben megtalálhatóak a különböző stream változatok meta adatai. Az adaptivitást a kliens által használt lejátszóban végzi, ami képes alkalmazkodni a hálózati viszonyokhoz és a felhasználói eszközhöz. A média tartalmat először kisebb darabokra (chunk) kell bontani, melyek HLS esetén 10 másodperces szegmenseket jelent, H.264 kódolású MPEG-TS (Transport Stream) formátumban. A kliens eszköz a manifest fájlból tájékozódva és ezeket a chunk-okat tölti le HTTP protokoll segítségével. Lejátszáskor a chunk váltásánál van lehetőség átállni egy más minőségű változatra, ha szükséges. A manifest (.m3u8) fájl tartalmazza a chunk-ok elérési útvonalát, ahogy azt a 2. ábra mutatja. 2. ábra HTTP Live Streaming manifest fájl és chunk-ok HLS médiaszolgáltatás biztosításához, első feladatunk, hogy létrehozzunk a H.264 kódolású MPEG-TS (Transport Stream) chunk-okat (.ts) és a manifest (.m3u8) fájlt. Szerencsére az FFMPEG kódoló segítségével ez könnyedén megtehető, azonban ügyelni kell a megfelelő audió és videó kódoló beállítására (-acodec és -vcodec), GoP (Group of Picture) méretre (-g), felbontás (-s), képváltási gyakoriság (-r) és videó bitsebesség (-b:v) értékre. A GoP amiatt fontos, hogy a minden chunk I- képpel (önmagában kódolt) kezdődjön. A kimeneti formátumot (-f), a chunk méretet (-hls_time) és a generálandó chunk-ok számát (-hls_list_size) szintén meg kell adni. Ha például csak 60 másodpercnyi videót szeretnénk átkódolni, akkor azt a t 60 kapcsolóval tehetjük meg. Az FFMPEG

7 következő paraméter beállításait alapul véve elő tudjuk állítani a mérés során szükséges a.ts fájlokat és a manifest fájlt: ffmpeg t 60 -i input.mp4 -acodec libfdk_aac -ac 2 -vcodec libx264 -b:v 2000K -r 30 -g 30 -f hls -hls_time 10 -hls_list_size 0 -s 1920x1080 out.m3u8 Eredményként kapott out.m3u8 manifest fájlból kiolvashatók a lényegi információk: #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:11 #EXT-X-MEDIA-SEQUENCE:0 #EXTINF: , out0.ts #EXTINF: , out1.ts #EXTINF: , out2.ts #EXTINF: , out3.ts #EXTINF: , out4.ts #EXTINF: , out5.ts #EXT-X-ENDLIST Abban az esetben, ha több felbontásban/minőségben is előállítjuk a tartalmat, akkor az FFMPEG által létrehozott manifest fájlok elérési útvonalát egy új.m3u8 fájlban sajátkezűleg foghatjuk össze, megadva a bitsebesség adatokat, melyet majd a lejátszó számára elérhetővé teszünk: #EXTM3U #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH= /out.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH= /out.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH= /out.m3u8 A mérésekben az ingyenesen elérhető VideoJS playert használjuk a megfelelő HLS kiegészítővel, ahogyan azt a fejezetben bemutattuk. MPEG Dynamic Adaptive Streaming over HTTP (MPEG-DASH) Az MPEG-DASH egy kizárólag HTML5 alapokon működő, szabványos és nyílt technológia, melyet az MPEG (Motion Picture Experts Group) mutatott be 2011-ben. Abban tér el a többi adaptív HTTP technológiáktól (Apple HTTP Live Streaming, Adobe HTTP Dynamic Streaming, Microsoft Smooth Streaming), hogy nincs szigorúan szabályozva, mely formátumokat kell támogatni. Az egyedüli kritérium, hogy ezek szabványos médiafájlok legyenek (MP4, MPEG2 TS, WebM). Hasonlóan a többi adaptív streaming technikákhoz az MPEG-DASh is XML alapú manifest állományt alkalmaz (.mpd). A különböző adaptív streaming technológiák által támogatott, MPEG-DASH esetén pedig csupán javasolt formátumokat a 1. táblázat foglalja össze.

8 1. táblázat Támogatott formátumok és codec-ek Adobe HDS Apple HLS MPEG-DASH Konténerformátum.F4V MPEG2.TS WEBM,.MP4, MPEG2.TS Manifest formátum.fmf.m3u8.mpd,.xml Videó codec VP6, H.264 H.264 VP8, H.264 Audió codec MP3, AAC MP3, AAC Vorbis, AAC Platform Flash Flash, HTML5 HTML5 Egy MPEG-DASH alapú médiaszolgáltatás feltétele, hogy a böngésző videó megjelenítője támogassa azt. Ma már elérhetők olyan HTML5/JavaScript alapú lejátszók, amelyek támogatják az MEG-DASH szabványt. A mérésekhez az ingyenes VideoJS player-t használjuk a megfelelő kiegészítővel, ahogyan azt a fejezetben bemutattuk. A HLS-hez hasonlóan itt is létre kell hozni a chunk-okra bontott videótartalmat, illetve a manifest fájlt (.mpd). Szerencsére megvannak erre is megvannak a megfelelő segédalkalmazások. Annak érdekében, hogy a böngészőnk meg tudja jeleníteni a tartalmat, megfelelően kódolást kell alkalmaznunk, amiben az FFMPEG lesz segítségünkre. Nem megfelelő codec választása esetén a tartalom lejátszása sikertelen lesz. Az FFMPEG-et most csupán a videó átkódolására használjuk, a manifest fájl előállítása pedig az MP4Box alkalmazással történik. Videó átkódolása a megfelelő beállításokat használva: ffmpeg -t 60 -i input.mp4 -acodec libfdk_aac -ac 2 -vcodec libx264 -r 30 -g 30 -b:v 2000K -s 1920x1080 out_ffmpeg.mp4 Majd jöhet a chunk-ok és az.mpd fájl létrehozása: MP4Box -dash rap -profile dashavc264:live out_ffmpeg.mp4#audio out_ffmpeg.mp4#video A mérés teljesítéséhez szükséges FFMPEG és MP4Box programok már telepítve vannak a streaming szerveren. 4 Streaming szerver A videótartalom hálózaton való megosztásának nélkülözhetetlen feltétele, hogy a multimédia tartalmat egy megfelelően konfigurált szerveren elhelyezzük, amely ismeri a streameléshez szükséges protokollokat. Nagyon sok kész megoldás érhető el a piacon (Wowza, Unreal Media Server, LIVE555 Media Server, stb.) azonban ebben a mérésben egy általános Linux HTTP szervert fogunk használni, a megfelelő kiegészítőkkel. A választás az ingyenes, nyílt forráskódú Nginx-re [1] esett, mert hatékony, jól dokumentált, és a HLS és az MPEG-DASH média streaming szerver kiegészítővel (nginx-rtmp-module) is rendelkezik az ingyenes verzióhoz. Ráadásul olyan nagynevű szolgáltatók, mint a Netflix, Hulu is ezt használják. Az Nginx üzemeltetés szempontjából a következő útvonalak fontosak, melyek csak rendszergazdai (root) jogosultsággal módosíthatók! /usr/local/nginx/conf/nginx.conf az Nginx szerver konfigurációs fájlja /usr/local/nginx/html/ HTML oldal megvalósítás és médiatartalmak a HTTP streameléshez (HLS, MPEG-DASH, progresszív letöltés) /usr/local/nginx/html/playr-master és /usr/local/nginx/html/videojs a mérésekhez szükséges lejátszók (PlayR és VideoJS) JavaScript és CSS kódjai /var/mp4s/ médiatartalom elhelyezése RTMP streamelés esetén (módosítható a nginx.conf-ban)

9 A nginx.conf konfigurációs fájl, illetve a /var/mp4s/ és /usr/local/nginx/html/ médiatartalma (bbb_1800p.mp4) már elő van készítve a méréshez, így azokat nem kell módosítani, de azért érdemes ellenőrizni. A feladat a /usr/local/nginx/html/ könyvtárban lévő.html fájl szerkesztése lesz. A konfiguráció fájl alapbeállítást az RTMP stream kezelése miatt kellett csupán kiegészíteni a következő sorokkal: rtmp { server { listen 1935; chunk_size 4000; application vod1 { play /var/mp4s; } } 5 Mérés eszközei A mérés során a hallgatók feladata, hogy az előkészített virtuális gépként (VirtulaBox VM) megvalósított média szerveren (Ubuntu, Nginx) előállítsák a szükséges médiatartalmat és a kezdeti HTML kódot kiegészítsék a feladatok szerint. A kliens oldalon pedig böngészőben jelenítsék azt meg. wireshark Mac OS X kliens wondershaper 3. ábra Mérési elrendezés Linux (Ubuntu) szerver Nginx A hálózati forgalom vizsgálatához a Wireshark forgalomelemző programot kell használni (kliens oldalon érhető el). Szükség van a hálózat kapacitásának is változtatására, amivel az ingadozó átviteli sebesség modellezhető, és a HTTP alapú streaming megoldások adaptivitása vizsgálható. Labor körülmények között erre a Linux médiaszerverre telepített wondershaper alkalmazás nyújt támogatást. Fontos megjegyezni, hogy a VirtualBox Ubuntu szerver hálózati beállításainál Bridged Adapter-t kell beállítani. Bejelentkezési azonosító és jelszó a VirtualBox-os Ubuntu szerverre: meres / streaming 6 Mérési feladatok Mielőtt nekilátnánk a feladatoknak, az első lépés, hogy indítsuk el az Apple imac gépeket, és végezzük el a következő teendőket: indítsunk Word szövegszerkesztőt a mérési jegyzőkönyv készítéséhez, melyet a mérés végén kell elküldeni a mérésvezetőnek! futtassuk a VirtualBox-ot, és indítsuk el az Ubuntu virtuális szerver gépet o ifconfig paranccsal derítsük ki a szerver gép IP címét o a média szerveren több olyan feladatot is el kell végezni, amihez rendszergazdai jogosultság kell: root / streaming

10 o az Nginx HTTP szerver indítása és leállítása a következő parancsokkal tehető meg: sudo /usr/local/nginx/sbin/nginx sudo /usr/local/nginx/sbin/nginx -s stop szükség esetén indítsunk egy böngészőt, melyben a médiatartalmat jelenítjük majd meg a szerver IP címét és az általunk szerkesztett.html oldal elérhetőségét megadva A mérési feladatokat érdemes külön.html fájlban megvalósítani, hogy csak a vizsgált videófolyam forgalma jelenjen meg lejátszáskor! A feladatokhoz szükséges lab.html sablon, videó és képfájlok a /home/meres/httpstreaming/ könyvtárban találhatók. Feladatok 1. feladat: RTMP streaming a) Vizsgálja meg a /usr/local/nginx/conf/nginx.conf konfigurációs fájlt, szükség esetén módosítsa, hogy az Nginx szerver képes legyen RTMP streamelésre. b) Ellenőrizze, hogy a médiatartalom (bbb_1080p.mp4) a megfelelő könyvtárban elérhető-e a szerveren! Vesse össze a nginx.conf fájlban megadott könyvtárral! c) Kliens oldalon indítsa el a VLC lejátszót és játssza le a médiatartalmat hálózati folyamként, a megfelelő IP címet beállítva (Media/Open network stream ): rtmp:// :1935/vod1/bbb_1080p.mp4 d) Wireshark forgalomelemző programmal vizsgálja meg az adatfolyamot! o Melyik szállítási protokollt használja az RTMP? o Milyen audio és video codec-kel tömörített videó kerül streamelésre (RTMP Body)? 2. feladat: Progresszív letöltés és lejátszás a) Gondoskodjon róla, hogy legyen HTTP-vel elérhető médiatartalom (bbb_1800p.mp4) a szerveren a megfelelő könyvtárban: /usr/local/nginx/html/ b) Vizsgálja meg, hogyan jeleníti meg a böngésző a médiatartalmat, ha a szerveren elérhető videó linkjét adjuk meg! c) Hogyan jelenik meg ugyanaz a link különböző böngészőkben? 3. feladat: HTML5 streaming A függelékben megadott és a HTTP szerveren is elérhetővé tett /usr/local/nginx/html/lab.html fájl módosításával végezze el a következő feladatokat: a) Illessze be a bbb_1080p.mp4 videót 500px szélességben, a vezérlők megjelenítésével és engedélyezze az automatikus lejátszást hang nélkül! Annak érdekében, hogy ne zavarjuk a többi kollégát, a hang némítása a minden feladatokban is szükséges! b) Tiltsa le az automatikus lejátszást és állítsa be poszterképként a bbb.png-t! c) Valósítsa meg, hogy a videó csak akkor induljon, ha az egérmutató a videó fölé kerül! Ha a mutató elhagyja a videó területét, a lejátszás szüneteljen (pause)! d) Cserélje le a vezérlőt Playr player-re! e) Cserélje le a vezérlőt VideoJS player-re! 4. feladat: HTTP Live Streaming (HLS) a) Készítse elő a HLS videó chunk-okat (.ts) és az.m3u8 manifest fájlt az FFMPEG segítségével! Paraméterként GoP=30, chunk size 10 s, bitsebesség 2 Mb/s adjon meg, illetve 1 percnyi videót kódoljon át! Készítsen különböző felbontású példányokat külön könyvtárakba helyezve azokat!

11 /usr/local/nginx/html/videohls/1080 felbontás 1080p (1920x1080) /usr/local/nginx/html/videohls/720 felbontás 720p (1280x720) /usr/local/nginx/html/videohls/480 felbontás 480p (720x480) b) Illessze be a VideoJS HLS lejátszót és forrásnak adja meg az videohls/1080/out.m3u8 index fájlt! Wireshark-kal kapja el az átvitt.m3u8 információt! c) Különböző felbontás támogatásához (adaptív streaming) hozza létre az /usr/local/nginx/html/videohls/adaptiv.m3u8 manifest fájlt, amely tartalmazza a három különböző felbontást (1080p, 720p, 480p)!! A különböző felbontáshoz adja meg a következő sávszélesség értékeket: 1080p: bit/s 720p: bit/s 480p: bit/s d) Illessze be a VideoJS HLS lejátszót és adja meg forrásként a több felbontást is tartalmazó adaptiv.m3u8 index fájlt! e) Törölje a böngésző cache-t (Firefox: Előzmények menü -> Előzmények törlése...), hogy ne a gyorsító tárból játssza le a tartalmat, majd a videó lejátszása előtt, esetleg közben is szerver oldalon korlátozza az átviteli az uplink sebességet 1000 kb/s, downlink 5000 kb/s és figyelje meg a HLS adaptivitását! Annak érdekében, hogy ne keveredjen a forgalom, csupán ez az egy videó lejátszá ablak legyen a HTML oldalon. Forgalom korlátozása: sudo wondershaper eth Korlátozás megszüntetése: sudo wondershaper clear eth0 Figyelje meg mely videó szegmenseket próbálja a böngésző letölteni! A böngésző webfejlesztői eszközeinek segítségével nyomon tudja követni az adatforgalmat (Firefox: Eszközök Webfejlesztő menü vagy F12 gyorsbillentyű) 5. feladat: MPEG-DASH Streaming a) Hozza létre az MPEG-DASH számára megfelelően kódolt videót, illetve készítse elő az MPEG- DASH videó szegmenseket és.mpd manifest fájl! Videó felbontás legyen 1920x1080, GoP=30, chunk size 2 s, bitsebesség 2 Mb/s, illetve 1 percnyi videót kódoljunk át! b) Illessze be a VideoJS lejátszót és adja meg forrásként a kapott.mpd index fájlt! Tesztelje működését! 7 Irodalom [1] [2] Ian Devlin, HTMLS Multimedia Develop and Design, The Pragmatic Bookshelf, [3] Powers, Shelley, HTML5 media, O'Reilly Media, Inc., [4] [5] [6]

12 Függelék A feladatokat a /home/meres/httpstreaming/lab.html fájl kibővítésével kell elvégezni: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ip streaming Lab!</title> <style> body { width: 50em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } </style> <!--.js és.css beillesztes - BEGIN --> <!--.js és.css beillesztes - END --> </head> <body> <h1>ip streaming mérés!</h1> <p>html5, HLS, MPEG-DASH videó tesztelése Nginx szerver + RTMP-modul kiegészítő alkalmazásal.</p> <p><b>referencia</b></br> HTML5 video tag: <a href=" US/docs/Web/HTML/Element/video"> US/docs/Web/HTML/Element/video</a><br> Event handlers: <a href=" US/docs/Web/API/GlobalEventHandlers"> US/docs/Web/API/GlobalEventHandlers</a><br> Events: <a href=" US/docs/Web/Events"> Players: <a href=" x.php</a></p> <! HTML5 streaming feladatok > <h2>html5 player</h2> <! a feladat > <h3>3.a feladat</h3> Illessze be a bbb_1080p.mp4 videót 500px szélességben, a vezérlők megjelenítésével és engedélyezze az automatikus lejátszást hang nélkül! Annak érdekében, hogy ne zavarjuk a többi kollégát, a hang némítása a minden feladatokban is szükséges!<br><br> <! b feladat > <h3>3.b feladat</h3> Tiltsa le az automatikus lejátszást és állítsa be poszterképként a bbb.pngt!<br><br> <! c feladat > <h3>3.c feladat</h3>

13 Valósítsa meg, hogy a videó csak akkor induljon, ha az egérmutató a videó fölé kerül. Ha a mutató elhagyja a videó területét a lejátszás szüneteljen (pause)!<br><br> <! d feladat > <h3>3.d feladat</h3> Cserelje le a vezérlőt Playr player-re!<br><br> <! e feladat > <h3>3.e feladat</h3> Cserelje le a vezérlőt VideoJs player-re!<br><br> <! HLS feladatok > <h2>4. HTTP Live Streaming (HLS)</h2> <! a feladat > <h3>4.a feladat</h3> Készítse elő a HLS videó szegmenseket és index fájlokat! Hozza létre a HLS chunk-okat (.ts) és az index fájlt (.m3u8) a következők szerint, a megfeleő könyvtárakat létrehozva: <ul> <li>/videohls/1080: felbontás 1080p (1920x1080), GoP=30, chunk size 10 s, bitsebesség 2 Mb/s, illetve 1 percnyi videót kódoljunk át <li>/videohls/720: felbontás 720p (1280x720), GoP=60, chunk size 10 s, bitsebesség 1,3 Mb/s, illetve 1 percnyi videót kódoljunk át <li>/videohls/480: felbontás 480p (720x480), GoP=60, chunk size 10 s, bitsebesség 0,8 Mb/s, illetve 1 percnyi videót kódoljunk át </ul> <! b feladat > <h3>4.b feladat</h3> Készítse elő a HLS videó szegmenseket és index fájlokat különböző felbontás támogatásához! Hozza létre a video.m3u8 index fájlt, amely tartalmazza a 3 különböző felbontást! (/usr/local/nginx/html/videohls/video.m3u8) <! c feladat > <h3>4.c feladat</h3> Illessze be a VideoJs HLS lejátszót és adja meg forrásként a "videohls/1080/out.m3u8" fájlt!<br> Wireshark-kal kapja el az átvitt.m3u8 információt!<br><br> <! d feladat > <h3>4.d feladat</h3> Törölje a böngésző cache-t (Firefox: Előzmények menü -> Előzmények törlése...), hogy ne a gyorsító tárból játssza le a tartalmat, majd a videó lejátszása előtt, esetleg közben is szerver oldalon korlátozza az átviteli az uplink sebességet 1000 kb/s, downlink 5000 kb/s és figyelje meg a HLS adaptivitását! Annak érdekében, hogy ne keveredjen a forgalom, csupán ez az egy videó lejátszá ablak legyen a HTML oldalon. Forgalom korlátozása:<br> sudo wondershaper eth <br> Korlátozás megszüntetése:<br>

14 sudo wondershaper clear eth0<br> Figyelje meg mely videó szegmenseket próbálja a böngésző letölteni! A böngésző webfejlesztői eszközeinek segítségével nyomon tudja követni az adatforgalmat (Firefox: Eszközök -> Webfejlesztő menü vagy F12 gyorsbillentyű) <br> Figyelje meg a HLS adaptivitását! <br><br> <! MPEG-DASH feladatok > <h2>5. MPEG-DASH streaming</h2> <h3>5.a feladat</h3> Készítse elő az MPEG-DASH videó szegmenseket és index fájlokat!<br> Hozza létre a megfelelően kódolt videót és az.mpd fájlt!<br> Videó felbontás 1920x1080, GoP=30, chunk size 2 s, bitsebesség 2 Mb/s, illetve 1 percnyi videót kódoljunk át! <! c feladat > <h3>5.b feladat</h3> Illessze be a VideoJs HLS lejátszót és adja meg forrásként a "videodash/1080/out1080_dash.mpd" fájlt!<br><br> </body> </html>