15578289_10154386604679794_3859230793316891605_o

DIY: streaming live na cztery kamery

2017/01/26

Cześć. Jestem Michał, od ponad 10 lat gram i organizuję w zespole Cinemon. Podobnie jak wielu z Was, przez ten czas, wszystko co da się robić z zespołem, robiliśmy samodzielnie: bookowaliśmy koncerty, promowaliśmy je, nagrywaliśmy płyty i klipy, miksowaliśmy je i wydawaliśmy, organizowaliśmy dystrybucję i sprzedaż, projektowaliśmy merch, grafikę, plakaty, koszulki… Tym razem zrobiliśmy coś, czego nie robiliśmy jeszcze nigdy – streaming live koncertu z czterech kamer.

Na jesień 2016 wysmażyliśmy supertrasę promującą naszą najnowszą płytę Masters of Second-guessing. Pechowo odwołano nam parę koncertów (to temat na osobną historię – być może cz. 2 pamiętnika bookera), ale nie poddaliśmy się i mimo wszystko postanowiliśmy dotrzeć do ludzi, którzy nie mogli nas zobaczyć na żywo. Wchodząc w dwudziesty pierwszy wiek (z lekkim poślizgiem) wymyśliliśmy, że zrobimy koncert na sali prób, który wyślemy w świat za pomocą streamingu.

Koncert odbył się 18 grudnia, na FB dotarł do ponad 24 tys. odbiorców, do dziś ma prawie 6 tys. wyświetleń. Na żywo oglądało go do 150 osób.

Sam zobacz, jak to wyglądało:

Dwadzieścia parę lat, które minęło od pierwszej transmisji wideo przez internet (95 rok! sic!) zmieniło tyle, że zamiast studia, kilkunastu (dziesięciu? set?) osób zaangażowanych i poważnej infrastruktury, streaming “na cały świat” możesz odpalić z własnej komórki. Więc właściwie… czemu tego nie robisz? Jeśli tylko dlatego, że nie wiesz jak, to tutaj się dowiesz. Przygotuj się na długą lekturę 🙂

ZAŁOŻENIA:
1. DIY – coś co można zrobić samemu (tj. ze znajomymi, bez ekipy specjalistów)
2. “Za darmo” – czyli nie licząc własnej (i znajomych) pracy i posiadanej już infrastruktury/sprzętu
3. Video w przyzwoitej jakości, bez opóźnień
4. Priorytet na jakość dźwięku tj. “dobrze nagłośniony” koncert
5. Obraz w czasie rzeczywistym “montowany” z 4 kamer – żeby wyglądało zajebiście
6. Dotrzeć z tym zarówno do stałej, jak i nowej publiczności

CZAS PRZYGOTOWAŃ: 6h (łącznie z posprzątaniem sali, wniesieniem i ustawieniem sprzętu grającego, nagłośnieniem, próbą, konfiguracją, szkoleniem operatorów 🙂 i naprawianiem awarii 10 minut przed koncertem)

Zasuwamy. Uchwycił Rafał na HTC.

Start uchwycił Rafał na HTC.

SKŁADNIKI:
1. Komputer / laptop + software
2. Łącze internetowe
3. Router Wi-Fi
4. Dowolna liczba komórek-kamer (u nas sztuk 4) + software
5. Realizator dźwięku + stół + mikrofony + okablowanie, itd.
6. Realizator wideo + operator
7. Zespół

Komputer / laptop + software

Dla pewności skorzystaliśmy z dość mocnego laptopa gamingowego Dell, niemniej jednak wydajność komputera raczej nie jest tutaj wąskim gardłem. Z obserwacji: większość opóźnienia/straty generuje się na samej komórce lub transferze wideo z komórki do komputera (przez WiFi).

UWAGA 1: jeśli korzystasz z Windows 10 lub innego systemu, który wie lepiej, pamiętaj o WYŁĄCZENIU AUTOMATYCZNYCH AKTUALIZACJI (sic!) – na 15 minut przed planowanym rozpoczęciem streamu system stwierdził, że się zaktualizuje i zajęło mu to 40 minut. Bez komentarza 🙂
UWAGA 2: jeśli masz drugi laptop – weź go ze sobą i na nim też wszystko zainstaluj/skonfiguruj 🙂

Software’owo będziesz potrzebował właściwie jednego programu oraz platformy do wysłania tego w świat.

Program to Open Broadcaster Software. To, jak nazwa wskazuje, open-source’owe oprogramowanie do transmisji wideo – szczegółowy opis jego konfiguracji TUTAJ.

Jeśli chodzi o wybór platformy, padło na Facebooka. Ze względu na to, że usługa streamingu jest nowością, jest ona promowana i ma gigantyczne zasięgi (w porównaniu do innego rodzaju treści na FB). Inne platformy to oczywiście YouTube, Periscope i masa innych – nie mam o nich zielonego pojęcia 🙂 Szczegółowa konfiguracja FB TUTAJ.

2. Łącze internetowe

Kamera ogólna z krzywo ustawionym kadrem :-) Sony Xperia E4

Kamera ogólna z kadrem obcinającym nogi 🙂 Sony Xperia E4.

Skorzystaliśmy z mobilnego internetu Play (LTE). Podczas prób mieliśmy bardzo dobry zasięg usługi: 50 Mbit/s download, 20 Mbit/s upload. Identyczne parametry osiągnąłem… na telefonie w Virgin Mobile – więc pewnie dałoby się i tak. Efektywnie zużywaliśmy ok. 2 Mbit/s na wysyłkę danych i 5 Mbit/s na ich pobieranie, więc mieliśmy bardzo daleko do limitu łącza. Jeśli chodzi o zużycie danych: stream trwał 1:40 minut. Przesłaliśmy ok. 2GB.

UWAGA 1: Orange blokuje port 8080, którym przesyłamy dane do serwera Facebook’a, ergo streaming via LTE od tego dostawcy NIE DZIAŁA. Nie polecam (i kamieni kupę).
UWAGA 2: W niedzielę o g. 20 łącza są dość mocno obciążone. Maksymalny transfer, który wcześniej sięgał 50 Mbit/s spadł nam do ok. 20 Mbit/s downloadu. Choć do maksimum wykorzystania łącza było daleko, to jednak warto o tym pomyśleć zawczasu i nie nastawiać się na 4k w 60 klatkach 😉

3. Router Wi-Fi

Routera Wi-Fi potrzebujemy do komunikacji między komórkami-kamerami i komputerem, oraz, jeśli nie korzystamy z internetu mobilnego, do internetu 🙂 Skorzystaliśmy z Linksys EA2700, na którym działała również komunikacja ze stołem mikserskim (sterowanym iPadem).

UWAGA 1: Warto korzystać z routerów obsługujących pasmo 5 GHz. Większość telefonów dobrze się z nimi dogaduje, a my pozbywamy się “tłoku” w typowym paśmie 2,4 GHz. Jeżeli musimy zostać przy podstawowym paśmie przeskanujmy eter apką Wifi Analyzer – pokaże nam ona rozkład widocznych sieci podzielonych na kanały transmisyjne, znajdźmy lukę i wpiszmy w ustawieniach routera wybrany przez nas kanał. Niby drobna rzecz, a ma decydujący wpływ na szybkość transferu z telefonów do routera. Uwaga tyczy się też samego sterowania stołem, który na 5 GHz działa sprawniej.
UWAGA 2: mimo wszystko zasięg Wi-Fi na komórkach działających w jednym, małym pomieszczeniu był NIEPEŁNY. Nie wiem czy to kwestia routera, czy kwestia ruchu na nim (4 telefony + iPad). Do zbadania/rozważenia/przyuważenia na próbach. Jakość połączenia Wi-Fi ma wpływ na opóźnienia/jakość obrazu którą możemy przesyłać telefonem więc uwaga.

4. Dowolna liczba komórek-kamer.

Najbardziej zaskakująca część programu: obraz zbierany był komórkami (sic!). Mieliśmy sztuk 4. I działało to bardzo przyzwoicie, choć, jak się można domyślić, różnie w zależności od modelu telefonu.

Dysponowaliśmy następującymi telefonami:
LG G4C
Xiaomi Redmi 3
Sony Xperia E4 (E2105)
Htc 9 Prime Camera

Drumcam tzn. LG.

Drumcam tzn. LG.

To telefony z różnej półki. Oznacza to różne aparaty/matryce = różne rozdzielczości, kolory i możliwości ustawień, różne czasy i jakości transmisji. Warto “uśrednić” je zawczasu (metodą prób i błędów ustawiając temperatury/jakości w programie przesyłającym obraz dalej). Stąd brak transmisji w full-hd (bo nie wszystkie telefony dawały radę).

Software, z którego korzystaliśmy do przesyłania obrazu z telefonu do komputera to IP Webcam – darmowy program, który zamienia Twój telefon w kamerkę internetową (dostępną z poziomu przeglądarki, po wpisaniu odpowiedniego IP) – do pobrania STĄD. Nota bene: jeśli dysponujesz kamerką internetową, możesz wykorzystać również i ją (a nawet GoPro w niektórych wersjach). Szczegółowe ustawienia IP Webcam TUTAJ.

UWAGA 1: nie zapomnij naładować telefonów 🙂
UWAGA 2: nie zapomnij włączyć trybu samolotowego – z tego co wiem dzwoniący telefon NIE przerywa pracy IP Webcam, ale jednak trochę lipa.
UWAGA 3: Redmi 3 nie dawał rady, więc po jakimś czasie rzadko są z niego ujęcia.
UWAGA 4: Telefony przykleiliśmy (na różne sposoby) do statywów taśmą. DIY FTW.

5. Realizator dźwięku + stół + mikrofony + kable, itd.

W związku z tym, że chcieliśmy mieć dobry dźwięk, a nie “dźwięk z komórki”, zrobiliśmy to tak jak należy, z naszym realizatorem Arkiem :* Każdy instrument był omikrofonowany tak, jak na “dużym koncercie”, dźwięk do “odsłuchów” był realizowany osobno, osobno była realizowana suma do wysyłki do komputera (wchodziła via Focusrite Scarlet 2i2, ale mogła wchodzić choćby i zintegrowaną kartą – Open Broadcaster Software pozwala wybrać źródło). Do miksu korzystaliśmy ze stołu Soundcraft Ui16, który Arek poleca, a który możecie kupić np. w SkładMuzyczny.pl

Ambient w ręku, żeby było słychać żywiołową reakcję publiczności. Uchwycone na HTC.

Słychać żywiołową reakcję publiczności? Uchwycone na HTC.

UWAGA: Nie zapomnijcie o mikrofonie na ambient – fajnie by ludzie przed komputerami słyszeli co mówicie do siebie między kawałkami albo Wasze dialogi z ew. publicznością 🙂 U nas dołożyliśmy to na ostatnią chwilę i… oj no…

6. Realizator wideo + operator

Realizator czyli osoba, która “zmienia kamery” w OBS. U nas robił to Krystian i nauczył się tego w pół godziny (jaki jest efekt – sami oceńcie). Dokładny opis “jak się to robi” – TUTAJ.

Operatorem jedynej dynamicznej kamery był Rafał, ze wspomnianego SkładMuzyczny.pl, który przedzierał się tam, gdzie inni nie dawali rady.

7. Zespół

To my! W tym krótkim punkcie tak naprawdę kilka szybkich, złotych rad:
– zostaw sobie DUŻO czasu na próbę dźwięku – nie chcesz się stresować, a realizator musi mieć czas ukręcić fajny sound (a jeśli kręci to w tym samym pomieszczeniu wymaga to metody prób i błędów, która jest czasochłonna)
– jeśli nie masz mikrofonu ambientowego, pamiętaj, że to co mówicie do siebie nawzajem jest praktycznie niesłyszalne w internecie
– jeśli coś ma się wysypać, wysypie się – vide update Windowsa 10 kilka minut przed transmisją 🙂 więc jeszcze raz: daj sobie dużo zapasu. DIY jest stresujące samo w sobie i tak 🙂

ZACZYNAMY

Części “muzycznej” przedsięwzięcia nie będę opisywał, bo na pewno przechodziłeś przez nią setki (tysiące) razy. Cenne uwagi dot. próby dźwięku są wyżej. Zatem: zespół jest zwarty, gotowy, omikrofonowany, sound ukręcony – suma wchodzi na wejściu w laptopie (u nas via wspomniany Focusrite Scarlet 2i2).

KONFIGURACJA ROUTERA

Bez wdawania się w zbędne szczegóły: router musi udostępniać Wi-Fi. W jednej sieci musi znajdować się Twój komputer oraz komórki-kamery. Router może udostępniać też internet, z którego komputer będzie korzystał do streamingu, ale poszczególne telefony potrzebują jedynie sieci lokalnej by połączyć się z komputerem.

KONFIGURACJA TELEFONÓW i  IP WEBCAM

#happydrummer via Xiaomi Redmi 3.

#happydrummer via Xiaomi Redmi 3.

Pobierz i zainstaluj IP Webcam z Google Play. To prosta aplikacja zamieniająca Twój telefon w kamerkę IP – dostęp do niej uzyskujesz przez wpisanie odpowiedniego adresu w przeglądarce internetowej.

Uruchom w telefonie Wi-Fi i połącz się ze swoim routerem (uruchamiając też – dla bezpieczeństwa – tryb samolotowy). Uruchom IP Webcam.

Interesują nas ustawienia jakości wysyłania – to część, z którą będziesz musiał poeksperymentować później, po uruchomieniu całej komunikacji telefon-komputer-serwer FB. By od razu zacząć nadawanie wideo przejdź do ostatniej opcji “Uruchom serwer” – uruchamia ona serwer wideo na Twoim telefonie, z którym będzie się łączył komputer.

Po uruchomieniu transmisji na ekranie wyświetla się adres IP telefonu, np.: 192.168.1.105:8080 (8080 to numer portu – taki jest domyślny).

Ten adres + dodatkowe informacje, będziesz musiał wpisać w OBS.

UWAGA 1: inne przydatne opcje to np. ustawienie ostrości. Dokonuje się tego po uruchomieniu serwera transmisji wideo na telefonie (“operacje/ustaw ostrość”).
UWAGA 2: różne opcje (temperatura barw, jakości, kompresje, itp.) dostepne są też po wpisaniu IP telefonu w przeglądarce na komputerze (np. http://192.168.1.105:8080/)

KONFIGURACJA OBS

Open Broadcaster Software to opensource’owy program do “nadawania wideo” – czyli do streamingu (choć również do nagrywania takiego wideo na dysk). Paleta jego możliwości jest spora, ale w wypadku koncertu będziemy wykorzystywać praktycznie jedynie trzy opcje: pobieranie sygnału wideo z komórek, wybór interesującej nas kamery i wysyłanie w świat – na serwer Facebooka.

Instalacja to odpalenie jednego pliku, który można pobrać STĄD. Dziękuję za uwagę 😉

KONFIGURACJA SCEN I ŹRÓDEŁ OBRAZU

Po uruchomieniu programu, przełączamy w tryb studio – umożliwi to jednoczesny podgląd z kamer “przed wysyłką” oraz obrazu “po wysyłce” – czyli to co widzi docelowy odbiorca (w pewnym uproszczeniu, bo dopiero na FB zobaczymy to co *naprawdę* widzi docelowy odbiorca).

Interfejs programu nie jest super-intuicyjny, ale nie jest źle: to mieszanka scen i źródeł, pogrupowanych w kolekcje scen. Kolekcje scen (menu “Scene collection”) to najogólniej rzecz biorąc “zapisanie ustawień kilku scen”. Pojedyncza scena to, z kolei, jedno lub kilka “źródeł, ich konfiguracja i położenie na ekranie”. Źródło zaś to pojedynczy plik z grafiką, z filmem, przechwytywanie ekranu i wiele innych, a w naszym wypadku – źródło internetowe czyli adres kamerki IP, którą są nasze telefony. Brzmi to groźnie, ale wystarczy zobaczyć na własne oczy i już nie jest tak źle.

UWAGA: by przyspieszyć i ułatwić sobie życie, możesz pobrać przykładową kolekcję scen, którą utworzyłem specjalnie dla Ciebie 🙂 Po pobraniu wrzucasz ją do katalogu C:\Users\NAZWA_UZYTKOWNIKA\AppData\Roaming\obs-studio\basic\scenes
Łatwiej się do niego dostać z menu File\Show Profile Folder – i wyskoczyć poziom wyżej (nie pytaj mnie czemu to takie trudne).

Od lewej u dołu: sceny i źródła, a dalej mikser audio (będziesz musiał ustawić własne źródło), ustawienia przejścia scen i inne ciekawostki.

Owa kolekcja scen zawiera cztery źródła z komórek-kamer (musisz jedynie podmienić adresy IP na Twoje kamery), utworzoną scenę z podglądem z wszystkich kamer i “stronę tytułową” (film od którego rozpoczynamy stream). Posiada przypisane skróty klawiszowe: A (podgląd wszystkich kamer), 1, 2, 3, 4 (do wyboru kamery), S czyli “zaakceptowanie zmian” – wysłanie wybranego obrazu w świat.

Jeśli zaś chcesz utworzyć wszystko samodzielnie…

Do sceny pierwszej dodaj więc źródło danych (media source). Odznaczamy “plik” (domyślnie źródło jest plikiem, a nasze jest adresem internetowym). Wpisujemy adres pierwszego telefonu-kamery np. http://192.168.1.105:8080/video
UWAGA: ważne po adresie :8080 (port transmisji) oraz /video

Odhaczamy “restart source…” i “hide source…”.

Oczom naszym ukazuje się obraz z pierwszej kamery. Jeśli się nie okazuje, bo działa to wszystko jak chce :-), odpalamy w przeglądarce testowo adres naszej kamery – powinny ukazać się ustawienia wideo. Z kolei po odpaleniu http://adres:8080/video – powinniśmy zobaczyć obraz z kamery. Jest? To powinien być też w OBS.

Jeśli nadal go nie ma, eksperymentujemy z “restart source…” i “hide source…”. Działało to u nas nieco w kratkę, ale po kilku klikach w tę i we w tę było jak należy (uroki darmowego oprogramowania i DIY – całe życie tak…).

Po lewej stronie, w części podglądowej ustalamy wielkość podglądu i jego położenie na ekranie. Podobnie ustawiamy pozostałe kamery i przechodzimy do sceny drugiej, do której ponownie dodajemy odpowiednie kamery. Itd.

By “zaakceptować” wybór sceny/źródła, który widzimy po lewej, musimy kliknąć w przycisk pomiędzy ekranami podglądów “Transition”. Dopiero wtedy na ekranie po prawej, pojawi się “sygnał wysyłany” – to co, ogląda widz.

KONFIGURACJA DŹWIĘKU

To właściwie prosta sprawa: musisz wybrać źródło, z którego dźwięk będzie streamowany. Z dwoma uwagami.

Ale zasuwa! By Rafał i HTC.

Ale zasuwa! By Rafał i HTC. W tle niebieski LG (w kolorze okładki płyty!) taśmą przytwierdzony do statywu.

UWAGA 1: pamiętaj by wyciszyć wszystkie inne źródła. Również dźwięk “generowany” przez komputer. Inaczej możesz niechcący uruchomić pętlę zwrotną – dźwięk wysyłany z OBS trafia na FB po czym znowu trafia do OBS i tak w kółko. Typowe going deeper.
UWAGA 2: w przeciwieństwie do obrazu, dźwięk streamowany jest praktycznie bez opóźnień. Dlatego musimy go opóźnić. W menu “Edycja/zaawansowane ustawienia dźwięku” możesz ustawić opóźnienie dla danych źródeł dźwięku, tak by dźwięk mógł “poczekać” na obraz. U nas idealnie zadziałało 250 ms. Wymaga to kilku prób i błędów – na faktycznym streamie wygląda to nieco inaczej niż na podglądzie!

KONFIGURACJA STREAMINGU I ODPALENIE CAŁOŚCI

Ustawiliśmy już nasze źródła i dźwięk, teraz musimy ustawić “wyjście” czyli co ma dziać się z obrazem, gdy opuści (i by mógł to zrobić) nasz komputer. Jak pisałem wcześniej, my skorzystaliśmy ze streamingu na Facebooku.

Na potrzeby prób (i błędów) proponuję utworzyć nowy fanpage, którego zawartość nie będzie publiczna (tj. będziesz ją widział jedynie ty i inni admini danego fanpage’a). To właśnie tam będziesz mógł robić próbne streamy i wrzucać inne głupoty by zobaczyć, jak wyglądają po opublikowaniu (generalnie przydatna rzecz, nie tylko przy streamie, ale i “przymierzaniu grafik w tle”, itp.).

Streaming na FB to nowy bajer, o którego istnieniu nie każdy jeszcze wie. Ale po co istnieje internet? 🙂 Tutaj znajdziesz dokładną instrukcję jak uruchomić stream z OBS via FB
UWAGA: polecam zrobić to w kolejności 1) uruchomić okienko konfiguracji streamu na FB 2) przekopiować kod do OBS i uruchomić stream w OBS 3) wrócić na FB i przejść do dalszej konfiguracji/odczytać stream. Jeśli tak zrobiłeś, a nadal widzisz “czarny ekran”, spróbuj wrócić do OBS… i wrócić od razu na FB. Czary!

Jeśli działa… odpalasz “streamuj live” i bam, Twój streaming leci… na twoją prywatną stronę, na której testujesz różne ustawienia. Gratulacje!

Potem jeszcze tylko musisz powtórzyć to jakieś 40 razy i znaleźć taką kombinację rozdzielczości/jakości, żeby zadziałało to najlepiej i najpłynniej.

A, i zagrać koncert… Niech żyje DIY 🙂

Komentarze

Powered by Facebook Comments