Jak ve Frontendisti.cz děláme online meetupy na YouTube: hardware, software a zkušenosti

Všechno zlé je k něčemu dobré. Určitě jste si všimli, že se meetupy Frontendisti.cz na čas přehouply čistě do online podoby.

V tomhle textu se podíváme, jak jsme to dělali, co nám to přineslo a jaká jsou specifika online přednášek. Covidové období nás všechny posunulo blíže online životu, takže to pro vás bude snad užitečné, i když srazy nepořádáte a na streamování se nechystáte.

Díky kolegům v organizačním štábu byl přechod komunity frontendistů a frontendistek do streamování úplně plynulý. Během korona-krize jsme od března udělali 6 online akcí a po prázdninách v nich hodláme pokračovat, už bok po boku s běžnými srazy.

Naše akce se v mnohém stály vzorem pro ostatní, soudě podle otázek, které hlavní realizátoři dostávají, což je další důvod, proč tenhle text vznikl.

Ukázalo se nám, že online akce velmi dobře oslovují nové skupiny lidí – jednak ty stydlivější, pro které je představa hospody nabité frontendisty a frotnendistkami nepříjemná a jednak lidi v regionech, kteří se na naše pražské, brněnské a jen občas jinde umístěné akce nedostanou. Chybělo nám pivo a osobní kontakt, ale i s tím jsme se pokusili nějak vypořádat. Však uvidíte.

Za online meetupy stáli především Martin Kolář, Martin Pešout a David Czernín. Udělali jsme pro vás rozhovor, který má cíl ostatní tvůrce obsahu (nejen) pro webaře nakopnout směrem do onlajnu.

Představení kluků

Kluci, můžete se představit a říct nám, kdo má co na starosti?

David Czernín: Ahoj, já aktuálně pracuji jako frontenďák v Seznamu na platformě videoportálu televizeseznam.cz. Společně s klukama stojím za organizací {F} piva v Brně. S příchodem koronaviru a vládních opatření jsme i my začali přemýšlet, jaká opatření zvolíme a jak dál uchopit naše srazy. Vzdát se úplně všeho a nic nepořádat? To se nám úplně nezamlouvalo a tak přišla myšlenka o přechodu na online scénu. Zpočátku to byl pro mě naivní nápad, který po několika iteracích vyústil v pravidelné streamy s řečníky, moderátorem a kvalitním obsahem na YouTube.

Martin Kolář: Jak říká David, už v době, kdy nebylo ještě nic zakázané nám bylo jasné, že budeme muset do onlinu. To jsme ale netušili, že co vymyslíme v sobotu už bude v neděli zakázané a co v pondělí nebude zase reálné v úterý. Nakonec jsme všichni online.

Zase jsem se nepředstavil, jako na streamech. Jsem Martin Kolář, aktuálně jsem frontend kodér na volné noze a teď nově nyní i streamer. Na streamech jsem asi nejvíce vidět, takže moje role je jednak moderátor a druhak takový technický guru. Prakticky dělám sám to, co v televizi dělá moderátor, osvětlovač, maskér, režisér a scénárista.

Martin Pešout: Jsem frontendový vývojář ze společnosti ContentKing a pomáhám Frontendistům s organizací srazů cca od roku 2018. David už to zmínil, ještě před koronavirovou krizí jsme společně pořádali brněnské hospodské srazy. A to nám zůstalo i během karantény. Jen s tím rozdílem, že jsme se přesunuli do online prostředí.

Já mám hlavně na starost výběr vhodného tématu a sestavování řečníků. Snažím se také, aby každý sraz byl tematicky laděný a zároveň hlídám, aby dva přednášející nehovořili úplně o stejné věci. Je to sice více práce, ale myslím, že výsledek je znát. Když divák večer usedne k monitoru, má jasno, co se ten večer bude probírat (např. typografie na webu).

Softwarový a hardwarový setup

David Czernín: Celkový setup ze strany moderátora určitě prozradí Martin Kolář, ten jej totiž za tu dobu značně vymazlil. Já si tady dovolím doplnit fotku z doby, kdy jsme plánovali celý sraz zkrouhnout na setkání řečníků a jejich přednes před plátnem odvysílat poprvé živě.

Vypadá to následovně:

• Dva MacBooky.
• Do prvního je připojen USB-C hub a do něj vede mikrofon a webkamera, která snímá prostor pro řečníka a moderátora. Dále je sem zapojený externí monitor, na kterém běží scény v OBS Studiu a co aktuálně vysíláme, iPhone v krabičce zatížený peněženkou, který snímá prostor s plátnem a řečníkem v ideální výšce, která je přesně výška stolu a třech poskládaných židlí na sobě.
• Z druhého MacBooku vede výstup pro prezentaci do projektoru, který jej promítá na plátno pro řečníka a zároveň MacBooku sdílí obrazovku s prezentací do prvního MacBooku, abychom zaručili obrazovou kvalitu prezentace.
• Na fotku se už nevešel rozmontovaný věšák, který byl oporou pro další mikrofon.

Martin Kolář: Náš setup historicky vychází ze software OBS Studio. S Davidem jsme zkoušeli projekt streamů DevelTalks, kde jsem se naučil základy práce s OBS. Přechod do online byl tak rychlý, že nebyl čas zkoušet něco nevyzkoušeného, takže OBS byla jistota.

Setup se stále mění, zlepšuje a vychytává. Židle jsme vyměnili za krabice, ale určitá improvizace stále zůstala. Stream vysíláme z prostorů SuperKodérů v Brně kde máme to nejdůležitější – stabilní internet s rychlým uploadem. Nicméně k samotnému setupu, nejprve hardware:

• MacBook Pro 16” – můj aktuální pracovní stroj. Během streamu zajišťuje vysílání přes OBS, připojení řečníků přes Skype a zobrazení scénáře.
• MacBook Pro starší – můj starší pracovní stroj. Aktuálně slouží ke sledování youtube (chatu, vysílaného videa a analytiky), Frontendisti Slack pro komunikaci s kluky.
• Webkamera Logitech Webcam C922 Pro Stream, ale také došlo na využití iPhone (pomocí appky Camera for OBS Studio) nebo integrované webky přímo v MacBooku.
• Mikrofon Samson Q2U 2017.
• Celé jsme to propojili pomocí 2 hyper-drive USB-C redukcí.
• iPad - slouží jako dotykové ovládání pro OBS přes doplněk obs-websocket.
• Telefon, který slouží jen na stopky.

Softwarově je základ OBS, ale i v něm se nachází několik doplňků:

• Již zmíněný obs-websocket
• obs-ndi - připojení řečníka přes Skype a technologii NDI
• Mimo samotný OBS pak používám Loopback (odposlech mikrofonu do sluchátek), MyStreamTimer (odpočet)

Martin Pešout: Možná jen doplním, že ne pokaždé jsme byli všichni tři fyzicky v jedné místnosti. Já osobně jsem se během těch dvou měsíců připojoval z různých koutů ČR. Pro stream jsem chystal úvodní část s novinkami ze světa frontendu.

Někdy jsem byl ale na špatném připojení k internetu a musel jsem improvizovat. Dvakrát jsem proto svůj vstup předtáčel a posílal předem do studia. Martin pak záznam pustil během živého vstupu. Ve výsledku nebylo nic poznat a já mohl být plně k dispozici na chatu jako moderátor diskuze. Jediný hardware, který jsem si sebou vždy vozil byl externí mikrofon (konkrétně Superlux E205U), abych zlepšil kvalitu zvuku.

Specifika přednášení do streamu

A co přednášející? Jaká jsou specifika přednášení takhle do streamu? Všiml jsem si, že někomu tento formát sedí více, jinému méně. Co podle vás funguje a na co by si naopak měli přednášející dát pozor?

David Czernín: Stream má pochopitelně své specifika a ne každému sedne přednášení do kamery. Mě osobně v tomhle ohledu nejvíce chybí zpětná vazba z publika, nevidím jak se lidé tváří a jak reagují na prezentaci.

Jinak platí pořád to stejné jako na ostatních srazech, které jsou na živo. Tedy zajímavá přednáška, která je svižná, krátká je samozřejmě více vítaná. Pokud přednášející začne přetahovat svůj časový limit, zacházet příliš do hloubky a nebo není jeho prezentace záživná, pak se to může projevit dost rychle.

Když už dorazíte na jeden z našich srazů a přednáška vám nesedne, tak co uděláte? Zvednete se klidně uprostřed prezentace a jdete domů? To asi těžko, minimálně počkáte na konec přednášky a poté odejdete. Ale na streamu tohle jde jedním kliknutím a to je to právě to úskalí. Stačí málo a divák vás jednoduše vypne.

Martin Kolář: Technicky jsou přednášející vybaveni. S nikým jsme nemuseli řešit nefunkční webku nebo mikrofon. Díky streamu jsem se ale naučil vysvětlit, kde ve Skype hledat sdílení plochy. Takže: „Hej Microsofte, fakt je to neviditelný!“.

Ale jak píše David, na online prostě chybí zpětná odezva. Chybí mi pán ve třetí řadě, kterého to nebaví a hraje Candy Crush. Z hospody nám chybí servírka, která vstoupí v tu nejvíc wow-chvíli apod.

Nicméně po těch 6 streamech už pro řečníky máme připravený dokument, který je má uvést do online světa. Dává jim spoustu rad, od samotné přípravy prezentace až po jejich samotný výstup.

Martin Pešout: Souhlasím s Davidem. Kratší formát přednášek je v online prostředí nutností. Předem řečníkům říkáme, že 10 minut (maximálně 15 minut) je ideální délka pro jejich prezentaci. Pokud některá část streamu začne diváky nudit a jednotlivé přednášky budou dlouhé, tak ne každý to vydrží. Vypnout prohlížeč v takové situaci lze opravdu snadno.

Během streamu funguje naživo chat u YouTube a po streamu zkoušíte místnost s moderátorem. Co se osvědčilo a co ne při  zapojování publika?

Martin Pešout: Hodně se nám osvědčilo sdílení odkazů přímo do chatu hned v průběhu přednášky. A to pokaždé, když přednášející zmíní něco zajímavého. Z naší strany to vyžaduje opět nějakou tu přípravu dopředu. Musíme od přednášejícího zjistit, co by chtěl do chatu poslat a hlavně kdy bude ten pravý moment na sdílení. Za tento přístup nám publikum už ale několikrát děkovalo.

–

Na závěr klukům poděkuju za rozhovor a jejich skvělou práci na streamech. Ale děkuju také všem ze štábu Frontendisti.cz a přednášejícím, kteří se do našich streamů zapojili.

Od začátku března se klukům povedlo udělat šest online setkání, které označujeme jako „Frontendisti live“:

• o médiích na webu,
• o Bootstrapu atd.,
• o JavaScriptu,
• o designu,
• o typografii,
• a JAMstacku.

Hodláme v tom souběžně s běžnými srazy dále pokračovat, takže Frontendisty můžete sledovat od podzimu znovu také na YouTube.