{"id":30842,"date":"2019-10-31T21:37:44","date_gmt":"2019-10-31T18:37:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/ot-skype-do-webrtc-kak-my-organizovali-videosvyaz-cherez-veb\/"},"modified":"2021-02-01T11:37:06","modified_gmt":"2021-02-01T09:37:06","slug":"ot-skype-do-webrtc-kak-my-organizovali-videosvyaz-cherez-veb","status":"publish","type":"post","link":"https:\/\/prohoster.info\/cs\/blog\/administrirovanie\/ot-skype-do-webrtc-kak-my-organizovali-videosvyaz-cherez-veb","title":{"rendered":"Od Skype k WebRTC: jak jsme zorganizovali videohovor p\u0159es web","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Od<\/p>\n

Videozvuk je hlavn\u00edm zp\u016fsobem komunikace u\u010ditele a studenta na platform\u011b Vimbox. D\u00e1vno jsme opustili Skype, vyzkou\u0161eli jsme n\u011bkolik extern\u00edch \u0159e\u0161en\u00ed a nakonec jsme se rozhodli pro kombinaci WebRTC a Janus-gateway. N\u011bjakou dobu jsme byli spokojeni, ale n\u011bkter\u00e9 negativn\u00ed momenty se st\u00e1le objevovaly. Nakonec bylo vytvo\u0159eno samostatn\u00e9 odd\u011blen\u00ed pro video.<\/p>\n

Po\u017e\u00e1dal jsem Kirilla Rogovsk\u00e9ho, vedouc\u00edho nov\u00e9ho odd\u011blen\u00ed, aby n\u00e1m vypr\u00e1v\u011bl o evoluci videozvuku v Skyeng, o zji\u0161t\u011bn\u00fdch probl\u00e9mech, \u0159e\u0161en\u00edch a improvizac\u00edch, kter\u00e9 jsme nakonec pou\u017eili. Douf\u00e1me, \u017ee \u010dl\u00e1nek bude u\u017eite\u010dn\u00fd tak\u00e9 pro firmy, kter\u00e9 se sna\u017e\u00ed zav\u00e9st video p\u0159es webovou aplikaci.<\/p>\n

<\/a><\/noindex><\/p>\n

Trocha historie<\/h2>\n

V l\u00e9t\u011b 2017 se \u0161\u00e9f v\u00fdvoje Skyeng Sergey Safonov p\u0159edstavil na Backend Conf s prezentac\u00ed o tom, jak jsme \"opustili Skype a implementovali WebRTC\". Ti, kdo maj\u00ed z\u00e1jem, si mohou z\u00e1znam jeho vystoupen\u00ed prohl\u00e9dnout na odkazu<\/a><\/noindex> (~45 min), a zde stru\u010dn\u011b shrnu jeho obsah.<\/p>\n

Pro \u0161kolu Skyeng byla videokomunikace v\u017edy prioritn\u00edm zp\u016fsobem komunikace u\u010ditel-\u017e\u00e1k. Zpo\u010d\u00e1tku jsme pou\u017e\u00edvali Skype, ale ten n\u00e1m z mnoha d\u016fvod\u016f zcela nevyhovoval, zejm\u00e9na kv\u016fli absenci log\u016f a nemo\u017enosti integrace p\u0159\u00edmo do webov\u00e9 aplikace. Proto jsme prov\u00e1d\u011bli r\u016fzn\u00e9 experimenty.<\/p>\n

Po\u017eadavky na videokomunikaci jsme m\u011bli p\u0159ibli\u017en\u011b n\u00e1sleduj\u00edc\u00ed:
\n\u2014 stabilita;
\n\u2014 n\u00edzk\u00e1 cena za lekci;
\n\u2014 nahr\u00e1v\u00e1n\u00ed lekc\u00ed;
\n\u2014 sledov\u00e1n\u00ed, kolik kdo mluv\u00ed (je pro n\u00e1s d\u016fle\u017eit\u00e9, aby studenti mluvili v\u00edc ne\u017e u\u010ditel b\u011bhem lekc\u00ed);
\n\u2014 line\u00e1rn\u00ed \u0161k\u00e1lovatelnost;
\n\u2014 mo\u017enost pou\u017e\u00edvat jak UDP, tak TCP.<\/p>\n

Prvn\u00edm krokem v roce 2013 bylo pokusit se implementovat Tokbox. V\u0161echno fungovalo dob\u0159e, ale bylo to velmi drah\u00e9 \u2013 113 rubl\u016f za lekci \u2013 a to v\u00fdrazn\u011b sni\u017eovalo zisk.<\/p>\n

Pak v roce 2015 jsme integrovali Voximplant. Toto \u0159e\u0161en\u00ed m\u011blo pot\u0159ebnou funkci sledov\u00e1n\u00ed, kdo kolik mluv\u00ed, a z\u00e1rove\u0148 bylo v\u00fdrazn\u011b levn\u011bj\u0161\u00ed: s podm\u00ednkou nahr\u00e1v\u00e1n\u00ed pouze zvuku to vy\u0161lo na 20 rubl\u016f za lekci. Fungovalo to v\u0161ak pouze p\u0159es UDP, p\u0159epnout na TCP to neum\u011blo. P\u0159esto ho nakonec pou\u017e\u00edvalo kolem 40 % student\u016f.<\/p>\n

Po roce jsme za\u010dali m\u00edt firemn\u00ed klienty se sv\u00fdmi specifick\u00fdmi po\u017eadavky. Nap\u0159\u00edklad v\u0161e mus\u00ed fungovat p\u0159es prohl\u00ed\u017ee\u010d, v spole\u010dnosti jsou otev\u0159eny pouze http a https; t. j. \u017e\u00e1dn\u00e9 \u201eSkype\u201c a UDP. Firemn\u00ed klienti = pen\u00edze, proto jsme se vr\u00e1tili k Tokboxu, ale probl\u00e9m s cenou nezmizel.<\/p>\n

\u0158e\u0161en\u00ed \u2014 WebRTC a Janus<\/h2>\n

Rozhodli jsme se pou\u017e\u00edt prohl\u00ed\u017ee\u010dovou platformu pro peer-to-peer videohovory WebRTC<\/a><\/noindex>. Ta zaji\u0161\u0165uje nav\u00e1z\u00e1n\u00ed spojen\u00ed, k\u00f3dov\u00e1n\u00ed a dek\u00f3dov\u00e1n\u00ed tok\u016f, synchronizaci stop a kontrolu kvality s \u0159e\u0161en\u00edm s\u00ed\u0165ov\u00fdch probl\u00e9m\u016f. Na na\u0161\u00ed stran\u011b mus\u00edme zajistit na\u010d\u00edt\u00e1n\u00ed tok\u016f z kamery a mikrofonu, vykreslov\u00e1n\u00ed videa, spr\u00e1vu spojen\u00ed, nastaven\u00ed WebRTC p\u0159ipojen\u00ed a p\u0159ed\u00e1v\u00e1n\u00ed mu tok\u016f, stejn\u011b jako p\u0159ed\u00e1v\u00e1n\u00ed sign\u00e1ln\u00edch zpr\u00e1v mezi klienty pro nav\u00e1z\u00e1n\u00ed spojen\u00ed (s\u00e1m WebRTC popisuje pouze form\u00e1t dat, nikoli mechanismus jejich p\u0159enosu). V p\u0159\u00edpad\u011b, \u017ee se klienti nach\u00e1zej\u00ed za NAT, WebRTC p\u0159ipojuje STUN servery, pokud to nepom\u00e1h\u00e1, pak TURN servery.<\/p>\n

Obvykl\u00e9 p2p spojen\u00ed n\u00e1m nesta\u010d\u00ed, proto\u017ee chceme nahr\u00e1vat lekce pro dal\u0161\u00ed anal\u00fdzu v p\u0159\u00edpad\u011b st\u00ed\u017enost\u00ed. Proto pos\u00edl\u00e1me toky WebRTC p\u0159es retransl\u00e1tor Janus Gateway od Meetecho<\/a><\/noindex>. V d\u016fsledku toho klienti neznaj\u00ed adresy jeden druh\u00e9ho, vid\u00ed pouze adresu serveru Janus; ten z\u00e1rove\u0148 pln\u00ed funkce sign\u00e1ln\u00edho serveru. Janus m\u00e1 mnoho po\u017eadovan\u00fdch funkc\u00ed: automaticky p\u0159ech\u00e1z\u00ed do TCP, pokud je UDP u klienta blokov\u00e1no; um\u00ed nahr\u00e1vat toky jak UDP, tak TCP; je \u0161k\u00e1lovateln\u00fd; dokonce m\u00e1 vestav\u011bn\u00fd plugin pro echo testy. V p\u0159\u00edpad\u011b pot\u0159eby se automaticky p\u0159ipojuj\u00ed STUN a TURN servery od Twilio.<\/p>\n

V l\u00e9t\u011b roku 2017 jsme m\u011bli v provozu dva servery Janus plus dal\u0161\u00ed server pro zpracov\u00e1n\u00ed nahran\u00fdch surov\u00fdch soubor\u016f audio a video, abychom nezat\u011b\u017eovali procesory hlavn\u00edch. P\u0159i p\u0159ipojen\u00ed byly servery Janus vyb\u00edr\u00e1ny na z\u00e1klad\u011b principu sud\u00fd - lich\u00fd (\u010d\u00edslo spojen\u00ed). V t\u00e9 dob\u011b to sta\u010dilo, podle na\u0161ich pocit\u016f to poskytovalo p\u0159ibli\u017en\u011b \u010dty\u0159n\u00e1sobn\u00e9 rezervy, m\u00edra implementace byla kolem 80. Cena se p\u0159itom sn\u00ed\u017eila na ~2 rubly za lekci, plus v\u00fdvoj a \u00fadr\u017eba.<\/p>\n

\"Od<\/p>\n

N\u00e1vrat k t\u00e9matu videohovoru<\/h2>\n

St\u00e1le monitorujeme zp\u011btnou vazbu od student\u016f a u\u010ditel\u016f, abychom v\u010das identifikovali a \u0159e\u0161ili probl\u00e9my. K l\u00e9tu 2018 se kvalitn\u00ed p\u0159ipojen\u00ed stalo nej\u010dast\u011bj\u0161\u00ed st\u00ed\u017enost\u00ed. Na jedn\u00e9 stran\u011b to znamenalo, \u017ee jsme \u00fasp\u011b\u0161n\u011b vy\u0159e\u0161ili jin\u00e9 nedostatky. Na stran\u011b druh\u00e9 bylo t\u0159eba okam\u017eit\u011b n\u011bco ud\u011blat: p\u0159i p\u0159eru\u0161en\u00ed lekce riskujeme ztr\u00e1tu jej\u00ed hodnoty, n\u011bkdy spolu se ztr\u00e1tou hodnoty n\u00e1kupu dal\u0161\u00edho bal\u00ed\u010dku a p\u0159i p\u0159eru\u0161en\u00ed \u00favodn\u00ed lekce dokonce ztr\u00e1tu potenci\u00e1ln\u00edho klienta.<\/p>\n

V t\u00e9 dob\u011b byla na\u0161e videokomunikace st\u00e1le v re\u017eimu MVP. Jin\u00fdmi slovy, spustili jsme to, fungovalo to, jednou jsme to roz\u0161\u00ed\u0159ili, pochopili jsme, jak to d\u011blat \u2013 a to je skv\u011bl\u00e9. If it works, don\u2019t fix it. Nikdo se c\u00edlen\u011b nezab\u00fdval ot\u00e1zkou kvality p\u0159ipojen\u00ed. V srpnu bylo jasn\u00e9, \u017ee to takhle nem\u016f\u017ee pokra\u010dovat, a spustili jsme samostatnou oblast, abychom zjistili, co vlastn\u011b nen\u00ed v po\u0159\u00e1dku s WebRTC a Janus.<\/p>\n

Na za\u010d\u00e1tku tato oblast dostala: \u0159e\u0161en\u00ed MVP, \u017e\u00e1dn\u00e9 metriky, \u017e\u00e1dn\u00e9 c\u00edle, \u017e\u00e1dn\u00e9 procesy pro zlep\u0161en\u00ed a p\u0159itom 7% u\u010ditel\u016f si st\u011b\u017eovalo na kvalitu p\u0159ipojen\u00ed (nebyly \u017e\u00e1dn\u00e9 \u00fadaje o studentech).<\/p>\n

\"Od<\/p>\n

Nov\u00e1 oblast se pustila do pr\u00e1ce<\/h2>\n

T\u00fdm vypad\u00e1 p\u0159ibli\u017en\u011b takto:<\/p>\n