U prijašnjem članku proučili smo što je WebRTC, kako radi te na koji način ga koristiti ali i mogućnosti implementacije. Sve smo to prošli, no samo u teoriji. Sada prelazimo iz teorije u praksu i  krećemo u implementaciju trenutno najmodernijih tehnologija za izgradnju moćnih i sigurnih WebRTC rješenja – Microsoft SignalR uz .NET Core 3.1 (za socketing i backend) i Angular 11 (za frontend).

Zašto odabrati Microsoft SignalR

Microsoft SignalR je biblioteka otvorenog koda koja pojednostavljuje dodavanje funkcionalnosti web komunikacije u stvarnom vremenu za široki spektar aplikacija. Kod na strani poslužitelja instantno distribuira sadržaj klijentima, tako da su podržani scenariji poput poput slanja obavijesti u stvarnom vremenu i instantnih poruka, kao što to i WebRTC zahtijeva. Međutim, ono po čemu je SignalR bolji u odnosu na slične tehnologije jest njegova jednostavnost, skalabilnost i sigurnost. SignalR je vrlo jednostavan za implementaciju, što ćemo prikazati na primjeru niže. Dodatno, skalabilnost temeljimo na činjenici da u osnovi ima .NET/.NET Core koji u kombinaciji s Microsoft Azure SignalR-om podržava i najzahtjevnija okruženja. Za kraj valja nadodati da je sigurnost Microsoft SignalR-a bazirana na .NET praksama, tako da je sve inače podržano u standardnoj .NET/.NET Core aplikaciji također dostupno i u out-of-the-box SignalR-u.

Izgradnja WebRTC rješenja

 

Za izgradnju cjelovitog WebRTC  rješenja pomoću spomenutih tehnologija potrebno je implementirati dva osnovna dijela – aplikaciju poslužitelja signalizacije i aplikaciju web klijenta. Iako je izrada STUN / TURN poslužitelja spomenuta u prošlom članku, za ovaj primjer koristit ćemo besplatne Googleove STUN poslužitelje:

stun:stun.1.google.com:19302 
stun:stun1.l.google.com:19302

Samo rješenje bit će izgrađeno što jednostavnije, ali sa svim funkcionalnostima koje su implementirane i koje rade. Ideja je pokazati kako koristiti te tehnologije za izgradnju sigurnog i funkcionalnog WebRTC rješenja, a pritom ne previše ulaziti u napredne WebRTC značajke. Svi dijelovi koda dani u nastavku, kao i ostali dijelovi na koje će se uputiti, ali neće biti prikazani, mogu se naći u Github-u ovog članka.

WebRTC algoritam

Za primjer ćemo koristiti jednostavan WebRTC algoritam koji omogućava da se dva web klijenata povežu pozivom i započnu peer-to-peer prijenos podataka.  Sam algoritam je prikazan na slici niže.

Microsoft-SignalR-Angular-WebRTC-algoritham

Kao što je vidljivo, algoritam se sastoji od nekoliko metoda, odnosno krajnjih točaka poslužitelja signalizacije (poput “CreateOrJoinRoom”), koje će klijenti morati pozvati kako bi komunicirali s poslužiteljem, te nekoliko signalnih poruka (poput “created”) koje će osigurati da je svaki klijent uvijek u ispravnom signalnom statusu. Također, slika prikazuje nekoliko lokalnih oznaka i metoda web-klijenta potrebnih za ispravni rad WebRTC procesa (poput “isInitiator” i “setRemoteDescription()”). Koraci se odvijaju kronološkim redoslijedom, od vrha prema dnu. Nakon što je svaki korak završen, započinje prijenos medija.

 

Izgradnja signalnog poslužitelja

Stvaranje WebRTC signalnog poslužitelja koristeći Microsoft SignalR sastoji se od tri osnovna dijela:

1) .NET Core (3.1) Web API projekt

Kreirajte novi (prazani) .NET Core Web API projekt uz instalaciju sljedećih paketa:

Microsoft.AspNetCore.SignalR
Microsoft.AspNetCore.SignalR.Common
Microsoft.AspNetCore.SignalR.Protocols.Json

2) Hub SignalR

Stvorite novu klasu, primjerice nazvanu “SignalingHub”, koja proširuje apstraktnu klasu “Hub”. Sva poslovna logika WebRTC za signalni poslužitelj bit će zapisana u ovoj klasi. Nakon izrade klase, registrirajte je u Startup-ovoj metodi ConfigureServices koristeći sljedeći redak:

services.AddSignalR();

Također, registrirajte Hub kao .NET Core API endpoint koristeći sljedeći kod u Startup-ovoj Configure metodi:

app.UseEndpoints(endpoints =>
{
      endpoints.MapHub<SignalingHub>("/hubs/signaling");
});

3) Implementacija WebRTC algoritma na strani poslužitelja

Na kraju, potrebno je definirati metode WebRTC algoritma u Hub-u. Potrebno je osigurati da ova implementacija omogućava klijentu da se pridruži sesiji, pošalje poruke ostalim klijentima i napusti sesiju. Iz tog razloga treba definirati 3 krajnje točke / metode Hub-a:

a) CreateOrJoinRoom – stvara novu sesije za sobu na signalnom poslužitelju (ako već nije kreirana) i dodaje klijenta u sobu

b) LeaveRoom – uklanja klijenta iz sesije sobe i briše sobu ako je povezani klijent bio zadnji

c) SendMessage – prenosi razne poruke (primjerice SDP ponude, SDP odgovore, ICE kandidate itd.) između klijenata

Kod za sve opisane metode možete pronaći ovdje.

Izrada klijentske aplikacije

Za izgradnju funkcionalne WebRTC Angular klijentske aplikacije potrebno je implementirati tri glavne stvari:

1) Angular (11) projekt

Stvorite novi Angular 11 projekt i instalirajte sljedeće pakete:

npm install webrtc-adapter
npm install @microsoft/signalr

2) SignalR servis

Izradite novi servis pod nazivom “SignalrService”, na primjer, koji će biti zadužen za pokretanje i održavanje veze sa signalnim poslužiteljem te za izvršavanje i primanje socketing zahtjeva. Kako bi se osigurali da će ista moći izvršiti sve te zadatke, potrebno je primijeniti sljedeće metode:

a) connect – stvara novu instancu klase HubConnection i započinje aktivnu vezu sa signalnim poslužiteljem

b) define – definira dolazne socketing zahtjeve, tj. radnje koje će web aplikacija izvršiti nakon primanja zahtjeva

c) invoke – izvršava zadani socketing zahtjev

d) disconnect – odspaja se od poslužitelja signalizacije

Kod za te metode i cijelu klasu usluga SignalR možete pronaći ovdje.

3) Implementacija algoritma na strani klijenta WebRTC

Algoritam WebRTC aplikacije web-klijenta se može implementirati ili u zasebnoj klasi ili u komponenti aplikacije na stranici sesije poziva. Za primjer ćemo odabrati drugu opciju. Da bi algoritam na strani klijenta funkcionirao, potrebno je konfigurirati tri glavne stvari:

a) Uspostavljanje veze sa signalnim poslužiteljem – pomoću SignalR servisa spojite se na poslužitelj i izvršite ranije definiranu metodu “CreateOrJoinRoom” kako bi se pridružili sobi za sesije

b) Definiranje signalne komunikacije – pomoću SignalR servisa definirajte sve signalne poruke koje će se koristiti u WebRTC komunikaciji i njihove odgovarajuće povratne pozive (primjerice “created”, “jointed”, itd.)

c) Primanje korisničkih medija podataka – pomoću Javascript WebRTC API-ja dohvatite lokalne audio ili video medija podatke, na sljedeći način:

navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    }

Nakon izvršavanja ta tri koraka, preostalo je samo poslati početnu poruku “got user media” i algoritam WebRTC može započeti. Kompletnu implementaciju koda na strani klijenta možete pronaći ovdje.

Dodavanje sigurnosnih stavki

Sigurnosne stavke bi trebale biti dio svih web aplikacija, a WebRTC aplikacije nisu iznimka. Uz SignalR sigurnosni sloj između našeg signalnog poslužitelja i klijentske aplikacije relativno je jednostavno implementirati. Budući da je SignalR izgrađen u .NET Core okruženju, on podržava sve .NET Core postupke autorizacije i provjere autentičnosti. Primjerice, korištenje JWT autorizacije pojednostavljeno je do te mjere da je dovoljno dodati “[Authorize]” atribut u SignalR Hub i dodati “accessTokenFactory” u HubConnectionBuilder u klijentskoj web aplikaciji prije uspostavljanja veze s signalnim poslužiteljem. Uz to dodano, svi socketing zahtjevi trebaju biti zaštićeni JWT tokenom. Elementarni JWT primjer autorizacije SignalR-a također se može naći na Githubu ovog članka.

SignalR-Ekobit

WebRTC i moderne tehnologije

Nekad je izrada WebRTC rješenja znala biti dugotrajan i zahtjevan process, ponajviše zbog potrebe za korištenjem nekolicine različitih tehnologija i kompliciranih implementacija, što ga je u konačnici činilo vrlo teškim za upotrebu. Međutim, u posljednjih nekoliko godina WebRTC je evoluirao, a stvari su postale mnogo jasnije. Zahvaljujući modernim tehnologijama izgradnja djelotvornog i sigurnog WebRTC rješenja može se izvršiti relativno brzo.

To ne bi trebalo biti previše komplicirano.

U konačnici sve te promjene su na tragu motivacije za sve više ljudi koji počinju koristiti WebRTC za svoja komunikacijska rješenja u stvarnom vremenu.

 

What's your reaction?