Maßgeschneiderte web-basierte Audio- & Videolösungen Echtzeitkommunikation mit WebRTC

Latenzen, Jittering, Verbindungsabbrüche: Wer hatte nicht schon Probleme bei der Audio- und Videoübertragung über das Internet? Der WebRTC-Standard soll Abhilfe schaffen, dieser Beitrag geht auf die Möglichkeiten und Eigenarten der Browser-basierten „Web Real Time Communication“ ein.

In den vergangenen 12 Monaten hat die netzwerkbasierte Kommunikation via Audio und Video infolge der COVID-Pandemie im Bereich der Digitalisierung – auch im dahingehend eher zurückhaltenden Deutschland – einen gewaltigen Schub erfahren. Laut einer vorliegenden Studie von Twilio wurden die Digitalisierungs-Initiativen in einigen Sektoren gegenüber der üblichen Entwicklungsgeschwindigkeit um bis zu 7,2 Jahre beschleunigt.

Der massive Erfolg der Anbieter von Kollaborationslösungen kommt daher nicht überraschend. Der Nachteil der meisten Lösungen auf dem Markt ist, dass man zusätzliche Software installieren muss, um Audio- und Video-Conferencing sowie Desktop-Sharing und eingebettete Chat-Funktionalitäten nutzen zu können. Zudem müssen entsprechende Server-Kapazitäten vorgehalten werden, um eine Nutzung dieser Technologien zu ermöglichen.

Für Konferenzen mit mehr als drei Teilnehmern ist dies auch durchaus sinnvoll, schon alleine aus sicherheitstechnischen Erwägungen: z. B. hinsichtlich Authentifizierung, Autorisierung und Accounting. Bei Interaktionen zwischen zwei Teilnehmern, d. h. in Peer-to-Peer-Setups, benötigt man kein Setup über einen virtuellen Konferenzraum, solange keine zusätzlichen Funktionen wie Logging, Debugging oder Recording benötigt werden.

Idealerweise laufen die Mediadaten hier zwischen den beiden Teilnehmern mit weitaus weniger negativen Effekten infolge Latenz und Jitter. Im Bereich der Telemedizin ist der direkte Media-Traffic zwischen Arzt und Patient eine Kernanforderung für die Nutzung in der Sphäre der KBV (Kassenärztliche Bundesvereinigung).

Der Web-Browser ist heute essentieller Bestandteil eines jeden stationären und portablen Rechners, Smartphones und Tablets. Daher bot es sich bereits vor einiger Zeit an, die Browser um Funktionalitäten für Echtzeitkommunikation zu erweitern. Hier setzt WebRTC – Web Real Time Communications – an.

Video- oder Sprachkommunikation einfach mit dem Web-Browser

WebRTC ist ein Open-Source Projekt, bestehend aus einer Reihe von Standards, die vom W3C (World Wide Web Consortium) und der IETF (Internet Engineering Task Force) gesteuert werden und einen Media-Stack für die Echtzeitkommunikation für Web-Browser und mobile Endgeräte im Internet definieren. Die Funktionalitäten sind über verschiedene APIs, sprich Application Programming Interfaces erreichbar.

Ohne zusätzliche Plug-ins oder Applikationen wird dadurch die Peer-to-Peer Video- und Sprachkommunikation sowie der Datenaustausch innerhalb von Webseiten ermöglicht. Das verbessert das Benutzererlebnis gewaltig bzw. ermöglicht auch erst die Kommunikation auf geschlossenen Systemen. Das Projekt wird – unter anderem – von Apple, Google, Microsoft, Mozilla und Opera unterstützt.

Hinsichtlich des Designs umfasst WebRTC mehrere APIs. Die wesentlichen Elemente sind:

• getUserMedia allokiert die Audio- und Video-Medien des Systems (beispielsweise durch Zugriff auf Kamera und Mikrofon des verwendeten Rechners oder Smartphones)

• RTCPeerConnection richtet die Audio- und Video-Kommunikation zwischen Peers ein. Dazu gehören die Signalverarbeitung, der Umgang mit den Codecs, die Peer-to-Peer-Kommunikation, Sicherheit und Bandbreitenmanagement. WebRTC unterstützt DCSP Marking, das von nachgelagerten Netzwerkelementen beim Traffic-Handling berücksichtigt werden kann.

• RTCDataChannel ermöglicht den bidirektionalen Austausch beliebiger Daten zwischen Peers. Es verwendet dieselben APIs wie Websockets und zeichnet sich durch eine sehr geringe Latenz aus.

Lässt man beispielsweise folgenden Code in der JavaScript-Konsole des Chrome-Browsers laufen, erhält man einen Media-Stream mit Audio- und Video-Track, sofern man den Zugriff auf Kamera und Mikrofon freigibt (und diese auch vorhanden sind):

Die Antwort sieht dann beispielsweise so aus wie im vorangestellten Bild. Ein schneller Test des getUserMedia-API-Calls lässt sich auch über die Website https://simpl.info/getusermedia/ vornehmen. Eine Datenübertragung lässt sich über https://simpl.info/rtcdatachannel/ ausprobieren. Dort ist auch jeweils der Link zum Code auf GitHub hinterlegt. Ein zusätzlicher Vorteil der Verwendung von WebRTC ist die Verwendung der im Browser implementierten Sicherheitsmechanismen, unter anderem sichere Kommunikation über validierte starke kryptografische Protokolle, einschließlich DTLS und SRTP.

Die Unterstützung von diversen Audio- und Video-Codecs ist in den Web-Browsern integriert, was das Handling stark vereinfacht. Zu den unterstützten Video-Codecs gehören VP8 und VP9 sowie AVC/H.264 (mit Einschränkungen). AV1 (für Chrome) und HEVC (für Safari) sind aktuell im experimentellen Stadium. Im Bereich Audio werden Opus, G.711 PCM (a-Law und u-Law) unterstützt. Verschiedene Web-Browser an den Endpunkten können sich auf Codecs einigen, die von beiden Seiten unterstützt werden.

Serverkomponenten für verschiedene Anwendungsbereiche

Wie bereits erwähnt, erstrecken sich Anwendungsbereiche für WebRTC von Peer-to-Peer Sprach- und Videokommunikation (unter anderem beispielsweise für Telemedizin), Event- und Collaboration-Plattformen bis hin zum Einsatz in Call Centern, in denen der Browser die klassischen Handapparate komplett ersetzen kann.

Um diese Dienste zu ermöglichen, sind – je nach Anwendung – WevRTC-Server-Komponenten für folgende Aufgaben nötig:

• Applikations-Server

• Signaling-Server

• NAT Traversal Server für WebRTC

• WebRTC Media Server

Der Applikations-Server hostet die Website, über welchen die WebRTC-API Calls ausgelöst werden. Die Signaling-Server sorgen für den Verbindungsaufbau und -abbau und nutzen dafür Protokolle wie SIP, XMPP oder MQTT. Auch sind diverse proprietäre Implementierungen von Signaling-Servern auf NODE.JS Basis verfügbar. Signaling ist nicht Bestandteil der WebRTC Standards und muss daher entsprechend selbst implementiert werden, wofür sich Websockets aufgrund des geringen Overheads und dem Datenaustausch in Echtzeit als Protokoll eignen.

In der Mehrheit der Fälle werden sich die WebRTC-Endpunkte, die miteinander kommunizieren wollen, hinter NAT Firewalls befinden. NAT-Traversal-Server helfen dabei, dass die Kommunikationspartner miteinander kommunizieren können. Man unterscheidet hier zwischen STUN und TURN Servern.

• Der STUN (Session Traversal Utilities for NAT)-Server ermittelt die öffentliche IP-Adresse eines Clients, die dann für den Austausch der Media-Streams zwischen den Peers verwendet wird.

• Der TURN (Traversal Using Relays around NAT)-Server wird dazu verwendet, die Media-Streams weiterzuleiten. Dieser kommt zum Einsatz, wenn die Peers nicht direkt miteinander kommunizieren können.

Die WebRTC Media Server agieren als Server-side Clients und agieren unter anderem als MCU (Multipoint Control Unit), um Gruppen-Räume zur Verfügung zu stellen. Weiterhin können diese als Protokollkonverter und Gateway in andere Netze dienen, Aufnahme- und Broadcasting-/Streaming-Funktionalitäten und mehr ermöglichen.

WebRTC hat mit seiner Veröffentlichung vor einigen Jahren eine kritische Lücke der Web-Plattform geschlossen. Es bietet kostengünstige Audio-, Video- und Daten-Kommunikation über den Web-Browser, ohne dass proprietäre und eigenständige Applikationen von der Stange dazu verwendet werden müssen – Echtzeitkommunikation über eine Web-Seite. „Voice is just another JS application“, wie es der ehemalige CTO der FCC, Henning Schulzrinne, auf den Punkt gebracht hat.

Wer Gefallen an den weiter oben aufgeführten Beispielen gefunden hat, kann auch tiefer in die Materie einsteigen und mit sehr wenig Aufwand eine Peer-to-Peer React-Web-App erstellen, eine Anleitung findet sich hier: https://github.com/twilio/twilio-video-app-react. Entsprechende Beispiele sind auch für Android und iOS verfügbar.

* Thomas Boele ist Director Solutions Engineering bei Twilio.

(ID:47117249)