LABORATORIUM 5: WebRTC komunikacja między terminalami. Wprowadzenie Technika WebRTC (złożenie angielskiego słowa Web oraz akronimu RTC, pochodzącego od angielskiego Real-Time Communications, komunikacja w czasie rzeczywistym) oznacza możliwość transmisji lokalnie pozyskanych mediów. W systemach tych strona WWW pełni rolę interfejsu użytkownika. Podstawową cechą techniki WebRTC jest wsparcie obsługi mediów w przeglądarce internetowej oraz wsparcie dla sygnalizacji stosującej protokół SDP. Takie założenie pozwala na realizację systemów telefonii, wideokonferencji, ale także gier sieciowych czasu rzeczywistego (on-line gaming) lub współpracy sieciowej (remote collaboration) korzystając z zasobów własnych przeglądarki, czyli bez dodatkowych modułów ładowanych do przeglądarki. WebRTC korzysta z funkcji dostarczanych przez język HTML5 (HyperText Markup Language) oraz przez język programowania JavaScript. Prace standaryzacyjne są prowadzone głównie w ramach grupy IETF WG RTCWeb, wsparte przez współpracę z W3C. Podstawowe zadania zadeklarowane przez WG RTCWeb obejmują: definicję modelu komunikacji z uwzględnieniem aspektów zarządzania sesją, określenie aspektów bezpieczeństwa transmisji, w tym użycie mechanizmów protokołu bezpieczeństwa, definicję rozwiązań dla modułu firewall oraz NAT, określenie niezbędnego wsparcia w systemie klienckim dla funkcji zorientowanych na transmisję strumieni mediów, takich jak format kodowania informacji dla różnych mediów oraz wskazanie kodeków, określenie metod transmisji dodatkowych informacji (non-media) pomiędzy przeglądarkami, itp. 1. Terminal WebRTC Terminal WebRTC utworzono na bazie komputera PC z przeglądarką obsługującą technikę WebRTC. Obecnie technikę WebRTC wspierają przeglądarki: Google Chrome, Mozilla FireFox, Microsoft Edge i Opera. Odtwarzanie i udostępnianie mediów realizowane jest przy użyciu znaczników (tag) języka HTML5 <audio> i <video>. Pozwalają one na odtwarzanie, odpowiednio, dźwięku i filmu wideo (w tym: wraz ze skojarzonym z nim dźwiękiem) z zasobów lokalnych i zdalnych. Przykłady: użycie znacznika audio <audio controls> 1
src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a20 02011001-e02-128k.mp3" type="audio/mpeg"> Przeglądarka nie obsługuje tagu audio. </audio> Kompletny kod strony (w celu uruchomienia zapisać poniższy kod w pliku z rozszerzeniem html i otworzyć go w przeglądarce): <audio controls> src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a20 02011001-e02-128k.mp3" type="audio/mpeg"> Przeglądarka nie obsługuje tagu audio. </audio> użycie znacznika video <video width="320" height="240" controls> src="http://download.blender.org/peach/bigbuckbunny_movies/big _buck_bunny_480p_stereo.ogg" type="video/ogg"> Przeglądarka nie obsługuje tagu video. </video> Kompletny kod strony (w celu uruchomienia zapisać poniższy kod w pliku z rozszerzeniem html i otworzyć go w przeglądarce): 2
<video width="320" height="240" controls> src="http://download.blender.org/peach/bigbuckbunny_movies/big _buck_bunny_480p_stereo.ogg" type="video/ogg"> Przeglądarka nie obsługuje tagu video. </video> 2. Serwer Serwer WWW udostępniający kod strony i serwer sygnalizacyjny zbudowane zostaną przy wykorzystaniu środowiska uruchomieniowego node.js. Środowisko to umożliwia uruchamianie skryptów napisanych w języku JavaScript. Uwaga: Gdy nie jest zainstalowane środowiska uruchomieniowego node.js, pobieramy ze strony: https://nodejs.org/en/download/ Windows Installer (.msi) 64-bit i instalujemy. Dostęp do środowiska uruchomieniowego node.js z wiersza poleceń. Podstawowe polecenia: node uruchomienie interpretera JavaScript npm uruchomienie menadżera pakietów npm (node package manager) Za pomocą node.js można testować skrypty JavaScript i można utworzyć własny, prosty serwer. Instalacja prostego serwera www statycznego (brak stron dynamicznie generowanych) npm install node-static Kod serwera: var m_static = require('node-static'); var m_http = require('http'); //tworzy serwer http var m_file = new(m_static.server)(); //dodaje obsluge systemu plikow do serwera http var m_app = m_http.createserver(function(req, res) { m_file.serve(req, res); }).listen(80); 3
Powyższy kod serwera należy zapisać w pliku z rozszerzeniem js (np. j1.js) i zapisać w bieżącym katalogu, w którym znajdujemy się w wierszu poleceń. Serwer uruchamiamy (jeżeli nasz plik ma nazwę j1.js) za pomocą polecenia: node j1.js Sprawdzamy czy serwer działa z poziomu przeglądarki podając adres serwera i żądany plik np. http://10.64.1.11/a.txt (gdzie: 10.64.1.11 to adres naszego komputera sprawdzić za pomocą polecenia ipconfig, a.txt to żądany plik plik a.txt należy utworzyć w tym samym katalogu co plik j1.js). Dodajemy obsługę biblioteki pomocniczej adapter.js: npm install --save webrtc-adapter 3. Udostępnianie lokalne mediów Pozyskiwanie lokalnego audio z mikrofonu i wideo z kamerki podłączonych do komputera użytkownika realizowane jest za pomocą funkcji getusermedia. Przed udostępnianiem pojawia się okno dialogowe w którym użytkownik proszony jest o wyrażenie zgody na udostępnianie danego urządzenia. Jeżeli system komputerowy posiada więcej niż jedną kamerę, użytkownik może zostać poproszony o wybór aktywnego urządzenia (np. przedniej i tylnej kamery w telefonie komórkowym). Poniżej podano przykład użycia funkcji getusermedia. var parav = { audio: true, video: { width: 1280, height: 720 } var OK = function(str){ alert("udostępniono media lokalne."); var BAD = function(error) { alert("niepowodzenie. Kod: "+ error); navigator.getusermedia(parav, OK, BAD); Skrypt języka JavaScript, który zawiera kod obsługi terminala WebRTC jest umieszczany w kodzie strony WWW pomiędzy znacznikami <script> i </script>. Obecnie udostępnianie mediów możliwe jest jedynie dla kodu strony pobranego z zewnętrznego źródła serwera obsługującego protokół HTTPS. Pełny kod udostępniania lokalnego mediów znajduje się poniżej: 4
<video autoplay></video> <script src="node_modules\webrtc-adapter\out\adapter.js"> </script> <script> czy_jest =!!(navigator.getusermedia) var parav = { audio: true, video: { width: 320, height: 200 } var OK = function(str){ var matv = document.queryselector("video"); matv.src = window.url.createobjecturl(str); console.log("udostępniono media lokalne."); var BAD = function(error) { alert("niepowodzenie. Kod: "+ error); console.log("kod błędu: ",error); if (czy_jest) { navigator.getusermedia(parav, OK, BAD); } else { alert("brak obsługi udostępniania mediów"); </script> Bibliografia [1] A. Chodorek, R.R. Chodorek: Udostępnianie mediów lokalnych przeglądarce internetowej z wykorzystaniem techniki WebRTC. Autobusy: technika, eksploatacja, systemy transportowe, 2016, 17.6: 1278-1281. http://www.autobusytest.com.pl/images/stories/do_pobrania/2016/nr%206/logistyka/07_l_chodorek_chodorek.pdf 5