Open Source im professionellen Einsatz
Linux-Magazin 08/2013
746

Aufbau einer Peer-to-Peer-Verbindung

Das nächste Beispiel geht einen Schritt weiter und überträgt den Medienstrom mittels Web RTC. Vor der Übertragung tauschen die beteiligten Browser Sitzungsbeschreibungen im SDP-Format (Session Description Protocol, [10]) aus. Die Beschreibungen enthalten Angaben über die zu übertragenden Medienströme sowie die zu benutzenden IP-Adressen, Ports und Protokolle. Abbildung 5 zeigt die Schritte, die eine Anwendung zum Öffnen einer Peer-to-Peer-Verbindung vollziehen muss. Zunächst erstellt »create()« , links oben im Bild, ein Peer-Objekt für den linken Browser. »stream()« speichert den lokalen Medienstrom in dem lokalen Peer-Objekt. »offer()« erzeugt eine Sitzungsbeschreibung, »keepLoc()« speichert sie als lokale Sitzungsbeschreibung ebenfalls im lokalen Peer-Objekt. »send()« überträgt die Beschreibung an den rechten Browser.

Abbildung 5: Vor dem Öffnen einer Peer-to-Peer-Verbindung erzeugen die beiden Browser Sitzungsbeschreibungen und tauschen sie aus.

Beim Eintreffen der Sitzungsbeschreibung im rechten Browser speichert »keepRem()« sie als Information über die Gegenstelle. Anschließend erzeugt »answer()« eine lokale Sitzungsbeschreibung für diesen Browser. »keepLoc()« speichert sie als lokale Sitzungsbeschreibung und »send()« überträgt sie zurück an den linken Browser, wo die dortige »keepRem()« -Funktion sie als entfernte Sitzungsbeschreibung abspeichert. Damit ist der Handshake komplett.

Web RTC im lokalen Browser

Die Listings 4 bis 6 übertragen den Medienstrom über eine Peer-to-Peer-Verbindung nach dem Schema aus Abbildung 5. Damit diese Vorstudie auf einen Signaling-Server verzichten kann, kommunizieren nur zwei Video-Elemente im Firefox-Browser des lokalen Rechners (Abbildung 6). Selbst lokal funktioniert Web RTC nur mit Netzwerkverbindung.

Abbildung 6: Vorstudie zum Videochat: Zwei Video-Elemente im selben Browserfenster kommunizieren.

Listing 4 zeigt das HTML-Dokument des Beispiels. Ebenso wie Listing 2 bindet es zwei Javascript-Dateien im Kopfbereich ein. Der Körper des Dokuments enthält in Zeile 9 ein Video-Element zur Ausgabe des lokalen Medienstroms und in der darauf folgenden Zeile 10 eines zur Ausgabe des mit Web RTC übertragenen Medienstroms.

Listing 4

Lokaler und übertragener Medienstrom

01 <html>
02 <head>
03   <link rel="stylesheet" href="css/styles.css"/>
04   <script src="js/core.js"></script>
05   <script src="js/localwebrtc.js"></script>
06 </head>
07 <body>
08   <p id="msg"></p>
09   <video id="local" autoplay></video>
10   <video id="remote" autoplay></video>
11 </body>
12 </html>

Listing 5 zeigt den Javascript-Code der Beispielanwendung aus der Datei »localwebrtc.js« . Die Abfrage und Konfiguration des Medienstroms erfolgt wie in Listing 2, jedoch mit einer geänderten Rückruffunktion in den Zeilen 5 bis 19: Zeile 6 verbindet zunächst den Medienstrom mit dem Video-Element. Zeile 7 erzeugt das lokale Peer-Objekt und speichert es in der Variablen »pcLocal« , Zeile 8 das entfernte Peer-Objekt in Pcremote. Zeile 9 speichert den lokalen Medienstrom im Peer-Objekt »pcRemote« .

Listing 5

localwebrtc.js: Web RTC im lokalen Browser

01 document.addEventListener('DOMContentLoaded', function() {
02   var serv = null;
03   navigator.mozGetUserMedia(
04     {video:true, audio:true},
05     function(stream) {
06       connectStream(stream, "#local");
07       var pcLocal = new mozRTCPeerConnection(serv);
08       var pcRemote = new mozRTCPeerConnection(serv);
09       pcLocal.addStream(stream);
10       pcLocal.createOffer(function(desc) {
11         pcLocal.setLocalDescription(desc);
12         pcRemote.setRemoteDescription(desc);
13         pcRemote.createAnswer(function(desc) {
14           pcRemote.setLocalDescription(desc);
15           pcLocal.setRemoteDescription(desc);
16         })
17       });
18       pcRemote.onaddstream = onadd()
19     },
20     error
21   );
22 });

Die asynchrone Methode »createOffer()« erzeugt in Zeile 10 die Sitzungsbeschreibung für den lokalen Kontext und übergibt sie der Rückruffunktion in den Zeilen 10 bis 17 im Parameter »desc« . Die Methode »setLocalDescription()« speichert den Inhalt von »desc« als lokale Sitzungsbeschreibung im Peer-Objekt »pcLocal« . Da die Anwendung lokal läuft, sichert die Methode »setRemoteDescription()« den Inhalt aus »desc« in Zeile 12 als entfernte Sitzungsbeschreibung für das entfernte Peer-Objekt »pcRemote« .

Der Aufruf der asynchronen Methode »createAnswer()« in Zeile 13 erstellt die lokale Sitzungsbeschreibung für das entfernte Peer-Objekt »pcRemote« und übergibt sie der Rückruffunktion aus den Zeilen 13 bis 16. Zeile 14 speichert die Sitzungsbeschreibung für das entfernte Peer-Objekt »pcRemote« als lokale Sitzungsbeschreibung, Zeile 15 als entfernte Sitzungsbeschreibung für das lokale Peer-Objekt »pcLocal« .

Das Ereignis »onaddstream« für das entfernte Peer-Objekt »pcRemote« wird in Zeile 18 durch Aufruf der Funktion »onadd()« aus Listing 6 belegt. Diese gibt eine Rückruffunktion zurück. Sie verbindet alle eingehenden Medienströme mit dem Video-Element mit der ID »remote« (Listing 4, Zeile 10). Die lokale Kommunikation ist hergestellt.

Listing 6

onadd()

01 function onadd() {
02   return function(evt) {
03     connectStream(evt.stream, "#remote");
04   }
05 }

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 6 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • ECMA-Script 6

    Der kommende Sprachstandard ECMA-Script 6 beseitigt viele historische Javascript-Eigenheiten. Die bisher vermissten Klassen, Module und Default-Parameter erleichtern das Coden vor allem den Umsteigern von anderen Programmiersprachen.

  • Signal erlaubt verschlüsselte Videochats

    Der verschlüsselnde Messenger Signal bietet nun für Android und I-OS offiziell Ende-zu-Ende-verschlüsselte Videotelefonate an. Das Feature hat die Betaphase beendet, zugleich versprechen die Signal-Macher eine bessere Qualität für Sprachanrufe.

  • HTML-5-DRM

    Im Rahmen von HTML 5 erhalten Webbrowser die Fähigkeit, Inhalte zu verschlüsseln. Das Sicherheitsfeature hat sich nun zum Politikum entwickelt, denn die Anbieter von digitalen Inhalten möchten es für Digital Rights Management (DRM) verwenden. Hier ein freier Blick auf die Technik.

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Meteor

    Javascript sowohl im Browser als auch auf dem Server: Das Webframework Meteor verspricht Anwendungen aus einem Guss, die sich dank vieler fertiger Pakete rasch programmieren lassen.

comments powered by Disqus

Ausgabe 07/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.