Uspeh in uporaba katere koli spletne aplikacije je danes zelo odvisna od njene zmogljivosti, prilagodljivosti in enostavnosti uporabe.

Še posebej v današnjem svetu ADHD, uporabniki bodo hitro izgubili potrpljenje z aplikacijo, če nalaganje strani traja predolgo . Pri spletnih aplikacijah, ki morajo podpirati obdelavo videa - ki je že sama po sebi računalniško in intenzivno vhodno-izhodna - je ta izziv še posebej oster. Uporabniki kljub temu postajajo vse bolj zahtevni in želijo, da so njihovi videoposnetki kakovostni in naloži hitro, tudi če deluje na pametnem telefonu ali tabličnem računalniku.

Uporabniki tudi izgubljajo strpnost do spletnih aplikacij, ki ne delujejo v želenem brskalniku ali napravi ali ki ne podpirajo podatkovne oblike, ki jo potrebujejo za nalaganje ali izvoz. Zaradi raznolikosti video formatov, ki jih je treba podpirati, je vključevanje video podpore v spletno aplikacijo še posebej zahtevno.

Ta objava opisuje, kako sem učinkovito uporabil odprtokodne tehnologije in storitve v oblaku za vključitev video zmogljivosti v spletno aplikacijo, ki temelji na PHP.

Primer uporabe

Bil sem del ekipe, ki je morala razviti spletno mesto, podobno YouTubu, kamor so lahko registrirani uporabniki nalagali in delili svoje videoposnetke.

Sistem je moral registriranim uporabnikom omogočiti, da svoje videoposnetke naložijo v različnih podprtih oblikah, ki jih nato pretvorijo v skupno obliko (MP4). Prav tako smo morali ustvariti nabor sličic in kolaž slike, ki ga bomo v video predvajalniku uporabili za prikaz okvirjev v vrstici napredka videoposnetka.

Stvari je še bolj zapletlo dejstvo, da nam zahteve odjemalca preprečujejo uporabo kakršnih koli razpoložljivih API-jev CDN ali prekodiranja, zato smo morali svojo rešitev razviti iz nič.

Video Upload

Ker sam postopek nalaganja ni bil potreben samo za video (potrebovali smo le enostavno zmožnost nalaganja datotek), je bilo smiselno, da namesto lastnega uporabljamo obstoječo odprtokodno rešitev. Izbrali smo jQuery-File-Upload , predvsem zato, ker je podpiral dve funkciji, ki sta bili v našem primeru bistveni; in sicer vrstica napredovanja nalaganja in razporejeni prenosi.

Preneseno na prenos nam je omogočil, da uporabniku naložimo video datoteko skoraj vseh velikosti (še posebej pomembno za podporo video datotek v ločljivosti HD). S tem pristopom je datoteka razdeljena na več 'kosov' na čelni strani, ki pri vsakem odseku podatkov prikliče dejanje nalaganja (skupaj z metapodatki za vsak kos, na primer številko kosa in skupno velikost datoteke). Potem se celotna video datoteka ponovno sestavi na hrbtni strani. Mimogrede, izkazalo se je, da je vključitev števila kosov v metapodatke še posebej pomembna, saj nekateri brskalniki (na primer Mobile Safari) nagibajo k pošiljanju kosov v naključnem vrstnem redu.

Spletna obdelava videoposnetkov

Obdelava videa je lahko tako preprosta kot zajemanje okvirjev kot fotografij ali pa vključuje bolj zapletene postopke, kot so izboljšanje slike, stabilizacija video toka itd. V našem primeru so bile edine zahteve za obdelavo videoposnetkov (a) izvleči video kodeke in druge ključne metapodatke in (b) ustvariti nabor sličic in kolaž slike (za uporabo v predvajalniku videoposnetkov za prikaz okvirjev v napredku videoposnetka bar).

FFmpeg - široko uporabljena, prosto razširjena, odprtokodna knjižnica - je bila izjemno koristna pri izpolnjevanju teh zahtev. FFmpeg ponuja celovito rešitev na več platformah za snemanje, pretvorbo in pretakanje avdio in video datotek. Uporablja se lahko tudi za pretvorbo videoposnetkov in enostavno urejanje (npr. Obrezovanje, rezanje, dodajanje vodnega žiga itd.).

Za naše namene smo lahko uporabili FFmpeg, da smo video razdelili na deset odsekov in nato zajeli vsak sličico za vsak odsek, da smo zagotovili potrebno funkcionalnost.

Na žalost za knjižnico FFmpeg ni nobenih vezav na jezik PHP. Posledično je edini način, da izkoristite FFmpeg iz PHP, priklicati binarno datoteko iz ukazne vrstice z uporabo sistemskih ukazov. V bistvu obstajata dva načina uporabe FFmpeg v PHP:

• libav . Libav je projekt brezplačne programske opreme, razdeljen od FFmpeg leta 2011 , ki proizvaja knjižnice in programe za obdelavo večpredstavnostnih podatkov. Na primer v Ubuntuju je to mogoče namestiti z ukazom sudo apt-get install libav-tools. ukazi libav so združljivi s FFmpeg in avconv . PHP mora imeti dostop do ukazne vrstice do ffmpeg/avconv uporabiti to programsko.
• PHP-FFMpeg . PHP-FFMpeg je objektno usmerjen gonilnik PHP za binarno datoteko FFMpeg. Do njega je mogoče dostopati s preprostim izvajanjem composer update 'php-ffmpeg/php-ffmpeg'.

Uporabili smo PHP-FFMpeg, saj omogoča enostaven dostop do funkcionalnosti FFmpeg, ki nas je zanimala. Na primer FFProbe class iz tega paketa omogoča prejemanje informacij o kodekih ali dolžini določene video datoteke, kot sledi:

$ffprobe = FFMpegFFProbe::create(); $ffprobe ->format('/path/to/video/mp4') // extracts file informations ->get('duration');

FFmpeg prav tako olajša shranjevanje katerega koli video okvirja:

$ffmpeg = FFMpegFFMpeg::create(); $video = $ffmpeg->open('video.mpg'); $video ->frame(FFMpegCoordinateTimeCode::fromSeconds(10)) ->save('frame.jpg');

Na voljo je podrobnejša vzorčna koda tukaj .

Previdnost: Zaradi nekaterih patentnih zakonov FFmpeg ne more obdelati vseh kodekov in nekateri formati niso pravilno (ali v celoti) podprti. Spomnim se, da sem se pred nekaj leti boril, na primer z .3gp format, ko je bila podpora za funkcijske telefone nujna

Čakanje v čakalni vrsti

Po pridobitvi kodekov in drugih metapodatkov videoposnetka potisnemo v čakalno vrsto za pretvorbo FIFO (prvi v prvem izhodu). Čakalna vrsta je bila izvedena s preprostim skriptom cron, ki ob vsakem zagonu izbere določeno število nepredelanih videoposnetkov in jih posreduje pripomočku za pretvorbo (na voljo je vzorčna izvorna koda tukaj ).

Pripomoček za pretvorbo pokliče FFMpeg za izvedbo pretvorbe in označi vsak videoposnetek kot obdelanega.

Razvili smo tudi preprost mehanizem za določanje časa čakanja, ki izračuna povprečni čas pretvorbe 1 minute videoposnetka. S pomočjo tega povprečja lahko uporabniku izračunamo in prikažemo predvideni preostali čas obdelave po končanem nalaganju videoposnetka glede na to, koliko minut videoposnetka je še treba obdelati.

Pretvorba video formata

Za fotografije, ki jih v bistvu podpirajo vse naprave in programska oprema za obdelavo slik, so se pojavile nekatere splošno priznane oblike (na primer JPEG in GIF). Nekatere oblike videoposnetkov so pogostejše kot druge, vendar takšna splošno podprta oblika za videoposnetke še ni nastala.

V našem primeru smo poleg pretvorbe iz različnih formatov v enotno skupno obliko (MPEG-4) morali pretvorjene videoposnetke optimizirati za pretakanje v mobilne naprave.

Za pretvorbo video formata (vsaj za naše kratkoročne potrebe) z uporabo oblaka Amazon Elastic Transcoder je bila najboljša možnost na voljo. Transcoder storitev poleg splošne enostavnosti uporabe skrbi za optimizacijo in vse nastavitve kodiranja. Na srečo an AWS SDK za PHP je na voljo, kar poenostavlja klicanje storitve iz naše kode PHP.

Opomba: Uporaba storitve v oblaku, kot je Amazon Elastic Transcoder, je odlična, če želite hitro začeti delovati. Upoštevajte pa, da lahko ta možnost za vašo stranko postane draga, še posebej, če bo njihov poslovni model verjetno zahteval obsežno uporabo velikih videoposnetkov. Upoštevati je treba tudi to, da ne bi smeli nujno domnevati, da bodo videoposnetki ali poslovni model vaše stranke združljivi s pogoji storitve.

Amazon uporablja svoje osnovne elemente za shranjevanje in računanje, S3 (enostavna storitev shranjevanja) in EC2 (Elastični računalniški oblak) - v kombinaciji z Samodejno skaliranje in SNS (enostavna storitev obveščanja) - omogočiti praktično takojšnje povečanje in zmanjšanje.

Namestitev aws-sdk je preprosto, saj Amazon vzdržuje Skladatelj -instalacijska različica paketa. Preprosto dodajte ”aws/aws-sdk-php': '2.*' na vaš composer.json datoteko in naredite composer update.

Očitno je za dostop do Amazon Elastic Transcoder potreben Amazon račun, zato ga boste morali nastaviti tudi, če ga (ali vaša stranka) še nimate.

Naša uporaba storitve Amazon Elastic Transcoder je pomenila prvo nalaganje video datotek v ustrezno vedro na S3. Nato smo opravili delo transkoderja, ki je odgovoren za dekodiranje in generiranje sličice, ki po zaključku objavi zahtevo HTTP na določen naslov. To sicer zahteva določeno konfiguracijo na plošči AWS, vendar je povsem preprosto in Amazon ponuja dobro dokumentacijo o tem.

Prosto uporabite naš paket transkoderjev , ki pomaga poenostaviti integracijo za Symfony 2 . Vključuje opis uporabe in ponuja krmilnik za hitro izvedbo storitve obveščanja, ki jo pošlje Amazon za zbiranje informacij o obdelanem videoposnetku. Na voljo je primer uporabe tukaj .

Poleg tega je na voljo primer krmilnika, ki obdeluje Amazonova obvestila tukaj ki izvaja tudi potrditev naročniškega naslova. Storitev bo najprej objavila URL za obisk, da se potrdi, da je to veljaven prejemnik obvestil. Vse, kar je v resnici potrebno, je, da video označimo kot obdelan. Od takrat naprej lahko uporabljamo prekodirani video, ki je shranjen v oblaku.

Pretakanje

Pretočno predvajanje videa je zmogljivost, ki zahteva visoko zmogljivost: pričakovanja uporabnikov glede neprekinjenega pretakanja so velika, toleranca do zakasnitve pa izjemno nizka. Ta izziv pogosto poslabša potreba po pretočnem predvajanju video posnetkov več odjemalcem hkrati v realnem času.

V našem primeru smo morali podpreti vsakega uporabnika, da je lahko sam ustvaril svoj video kanal in začel oddajati. Naša rešitev je bila sestavljena iz treh komponent:

• Armaturna plošča. Aplikacija, ki služi kot nadzorna plošča strežnika in zagotavlja možnost prikazovanja videoposnetkov.
• Gledalec. Video odjemalec, ki porabi in prikaže video tok.
• Pretočni motor. Storitev pretakanja videoposnetkov v oblaku.

Poleg tega, da se tehnologija Video on Demand (VOD) še vedno razvija, smo se soočili še s tem, da dostop do kamere ni bil dobro podprt in je ponujal le povezavo P2P. Naš cilj je bil tudi zagotoviti spletno oddajanje za več sočasnih uporabnikov. Poleg tega je podpora za getUserMedia/Stream API (prej zamišljen kot element) v sodobnih brskalnikih še ni skladen. Na podlagi teh dejavnikov sem se odločil za uporabo tehnologije Flash, saj je bila to res edina razumna izbira. Obe aplikaciji (nadzorna plošča in pregledovalnik) sta bili zato implementirani z uporabo Flex in ActionScript .

Za pretočni mehanizem smo uporabili Wowza . Čeprav obstajajo tudi druge, nekomercialne rešitve (kot npr Rdeča5 , ki se trži kot v bistvu nadomestna kapljica za Wowza), je bila v našem primeru pomemben dejavnik podpora komercialnim izdelkom. Vsaj v času, ko smo gradili sistem, je Wowza ponudil boljšo dokumentacijo, kar je bila dodatna prednost. (Upoštevajte, da lahko poskusno različico Wowze dobite brezplačno 30 dni, obstaja pa tudi preizkusna različica razvijalca, ki jo lahko uporabljate do 180 dni. Vendar obstajajo nekatere omejitve; pretakanje lahko deluje samo za dve stranki in obstaja omejitev na največje število povezav.)

Wowza Streaming Engine

Uporabili smo aplikacijo LiveStream, ki je priložena Wowzi. Če ga želite konfigurirati, pustite applications/app_name prazno in v conf/app_name kopiraj Application.xml datoteka iz conf katalog. Uredite datoteko tako, da nastavite ta odstavek na naslednji način:

live ${com.wowza.wms.context.VHostConfigHome}/content ${com.wowza.wms.context.VHostConfigHome}/keys

Ključni parameter je live ki opredeljuje, da bo to tok iz video vira v živo (npr. iz kamere). Po urejanju in shranjevanju te datoteke boste morali znova zagnati Wowza.

Aplikacije Flash (Flex / ActionScript)

Flash ponuja popolnoma integriran sistem za povezavo kamere in mikrofona s strežnikom za pretakanje Wowza. To je še posebej koristno, če imate izkušnje z ActionScript je omejena.

Celotna aplikacija v osnovi temelji na interakciji med naslednjimi predmeti:

• NetConnection. The NetConnection razred ustvari dvosmerno povezavo med odjemalcem in strežnikom. Stranka je lahko Flash Player ali AIR aplikacija. Strežnik je lahko spletni strežnik, strežnik Flash Media Server, aplikacijski strežnik z nameščenim Flash Remoting ali storitev Adobe Stratus.
• Kamera. The Kamera class se uporablja za zajem videa iz odjemalskega sistema ali kamere naprave.
• Mikrofon. The Mikrofon class se uporablja za spremljanje ali zajemanje zvoka iz mikrofona.
• NetStream. The NetStream class odpre enosmerni pretočni kanal prek NetConnection.

Najprej se povežemo s strežnikom za pretakanje Wowza s primerkom NetConnection in nato priključimo poslušalec dogodkov, ki bo poslušal spremembe stanja omrežne povezave:

nc = new NetConnection(); nc.connect(serverAddress:string); nc.addEventListener( NetStatusEvent.NET_STATUS, // event type eNetStatus, // listener function false, // use capture? 0, // priority true // use weak reference? );

Tu je minimalističen primer poslušalca dogodkov, ki poveže kamero in mikrofon s strežnikom za pretakanje:

private function eNetStatus(e:NetStatusEvent):void { switch (e.info.code) { case 'NetConnection.Connect.Success': camera = Camera.getCamera(); mic = Microphone.getMicrophone(); ns = new NetStream(nc); ns.publish(streamName, 'live'); ns.attachCamera(camera); ns.attachAudio(mic); break; case 'NetConnection.Connect.Closed': // debug trace... display user message break; }

Koda odjemalca je zelo podobna, le da na uporabniški strani prikazujemo samo video vhod. To naredimo tako, da tok povežemo z Video objekt, kot je prikazano v tem preprostem primeru:

if(event.info.code == 'NetConnection.Connect.Success') { ns = new NetStream(nc); ns.client = nsClient; ns.addEventListener(NetStatusEvent.NET_STATUS, nsClient.onNetStatus); ns.play(streamName); video = new Video(); addChild(video); // this will display video video.attachNetStream(ns); // connect NetStream to video }

Zaviti

Pričakujemo lahko, da bosta pretočno predvajanje v živo in video posnetki vedno pomembnejša v mobilnih in spletnih aplikacijah. Zato je pomembno za spletni razvijalci da se seznanite s transkodiranjem, obdelavo in pretakanjem video posnetkov. Danes obstajajo številna orodja, knjižnice in storitve za vključitev teh zmožnosti v spletne aplikacije. Ta članek prikazuje, kako smo izkoristili in integrirali številne te tehnologije, da smo z lahkoto uspešno ustvarili osnovno spletno mesto, podobno YouTubu.