In diesem Beitrag erklärt unser CTO Enrico, was hinter der Videochat Web und Mobil Programmierung mit WebRTC steht. Im einzelnen wird auf Folgendes eingegangen:

  • Was ist WebRTC?
  • Wie funktioniert es?
  • WebRTC Browser & Mobile Unterstützung
  • WebRTC
  • Z3 WebRTC Beispiel

Was ist WebRTC?
Web Real-Time Communications (WebRTC) ist eine Initiative der Web Welt, moderne Browser mit standardisierten Protokollen und Schnittstellen auszustatten, durch die eine qualitativ hochwertige und zuverlässige Video- und Audio-Übertragung zwischen allen modernen Geräten und Browsern möglich ist, ohne dass zusätzliche Plugins oder Programme installiert werden müssen: einfach Klick & Go. Der WebRTC Standard wird unter anderem von Google, Mozilla, Opera, und auch von dem W3C (World Wide Web Consortium) vorangetrieben und unterstützt.

Die Technologie, die es erlaubt, Video- und Audio-Übertragungen über das Internet zu ermöglichen und in kommerzielle Produkte einzubinden, war bis vor einigen Jahren Unternehmen zugänglich, die große Mengen an Zeit und Geld in die Technologie und das Know-how investierten. Google kauft 2010 die amerikanische Firma Global IP Solutions (GIPS) für $68.2 Millionen, tauft die gekaufte Technologie „WebRTC“ und gibt sie als Open Source für alle anderen Browserhersteller frei. Mittlerweile wird WebRTC von fast allen gängigen Browsern nativ oder über Plugins auf verschiedensten Geräten unterstützt.

Wie funktioniert es?
WebRTC setzt sich aus verschiedenen Technologien zusammen, die Video-, Audio- und Dateiübertragung über das Internet ermöglichen. Für Webentwickler hat WebRTC eine einfache Schnittstelle, durch den der komplette Zugang zu Video- und Audio-Aufnahme und -Übertragung gegeben ist, wie im folgendem Diagramm detailliert dargestellt.

Einfach gesagt, ist WebRTC eine Schnittstelle zwischen Webseite und Browser/Anwendung. Der Browser-/Anwendungshersteller ermöglicht durch die Unterstützung und Implementierung von WebRTC den einfachen Zugang auf die Audio- und Video-Streams. Der Webentwickler kann sich darauf verlassen, dass ein Browser/eine Anwendung, der/die WebRTC unterstützt, Bild und Ton von der Kamera und dem Mikrofon bekommt, richtig codiert und performant verschickt.

WebRTC Browser & Mobile Unterstützung
WebRTC wird, stand heute (siehe Veröffentlichkeitsdatum des Artikels), von Google Chrome, Mozilla Firefox, und Opera, in Desktop-, Android- und iOS- Versionen unterstützt. Microsofts Internet Explorer/Edge und Apples Safari wurden noch nicht auf WebRTC angepasst. Dies stellt kein Problem dar, denn für Edge, IE und Safari gibt es installierbare Browserplugins, durch deren einmalige Installation WebRTC auch hier benutzbar wird. Die WebRTC- Applikation kann den Benutzer zum Installieren eines solchen Browserplugins auffordern. Zudem haben Microsoft sowie das Apple Safari-Team eine Integration der Technologie angekündigt.

WebRTC
Die Übertragung der Video- und Audiodaten erfolgt im Idealfall über Peer to Peer, also direkt zwischen den Gesprächsteilnehmern. Der Webserver verwaltet jeweils einen privaten Meetingraum pro aktiver Konversation. Der Webserver hat ebenfalls eine Liste der aktuellen Gesprächsteilnehmer, die an die jeweiligen Benutzer weitergegeben wird. Mit Hilfe von WebRTC sorgt dann der Browser des Benutzers dafür, dass eine Verbindung zwischen den Gesprächspartnern aufgebaut wird.

WebRTC

Z3 WebRTC Beispiel
Zum Ausprobieren haben wir auf unserem Server ein Beispiel eingerichtet, das Sie über die folgende Webaddresse anschauen können:

Sobald Sie die Webseite öffnen, werden Sie automatisch dem Videocall hinzugefügt. Jeder, der auf diesen Link klickt, kann dem Videochat beitreten. Mit mehreren Nutzern sehen und hören Sie also alle anderen Teilnehmer.

Da wir momentan auf unserem internem Development Server kein SSL Zertifikat haben, müssen Sie die Seite als “sicher” markieren. In Chrome und Firefox sieht das jeweils so aus:

Screen Shot 2016-08-25 at 15.18.20

Im nächsten Schritt öffnet sich die Seite und die Video-/Audioaufnahme wird automatisch gestartet. Ihr Browser wird Sie einmalig auffordern, Ihre Kamera freizugeben. Danach sehen Sie sich selbst. Sobald weitere Teilnehmer hinzukommen, werden diese unter Ihrem Bild angezeigt.

Screen Shot 2016-08-25 at 15.20.07

Merken