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

Verbindungsereignisse

Die Rückruffunktion in den Zeilen 12 bis 28 beschreibt die Antwort des Signaling-Servers beim Aufbau einer Verbindung über das Websocket-Protokoll. Dazu bindet in Zeile 12 die Methode »on()« die Rückruffunktion aus dem zweiten Argument an das Auftreten des Ereignisses »request« . Die Rückruffunktion speichert in Zeile 13 eine gültige Verbindung in der Variablen »thisChannel« ab und Zeile 14 fügt sie der Liste aller bestehenden Verbindungen hinzu.

Die Zeilen 15 bis 22 definieren analog zu den Zeilen 12 bis 28 eine Rückruffunktion zum Verarbeiten einer eingehenden Nachricht. In der Schleife über alle Verbindungen (Zeilen 16 bis 21) leitet die »sendUTF()« -Methode die Nachricht an alle anderen Verbindungen weiter. Die Zeilen 23 bis 27 entfernen beim Beenden einer Verbindung den Client aus der Liste.

Wie Abbildung 7 zeigt, kann man dem Signaling-Server bei der Arbeit zusehen: Dank »console.log(msg.utf8Data)« in Zeile 18 schreibt er seine Ausgaben nämlich auch auf die Konsole.

Abbildung 7: Der Signaling-Server leitet nach seinem Start wie ein Router Nachrichten von einem Client an den anderen weiter.

Soll Web RTC auch über das Internet arbeiten, versendet man die Sitzungsbeschreibungen aus Listing 5 per Websocket-Protokoll und Signaling-Server wie in den Abbildungen 1 und 5 an die zu verbindenden Browser. Listing 9 zeigt das HTML-Dokument des Beispiels. Im Unterschied zu Listing 4 bindet es »webrtc.js« statt »localwebrtc.js« ein.

Listing 9

HTML für Web RTC per Internet

01 <html>
02 <head>
03   <link rel="stylesheet" href="css/styles.css"/>
04   <script src="js/core.js"></script>
05   <script src="js/webrtc.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 10 zeigt den Javascript-Code aus »webrtc.js« : Zeile 8 öffnet eine Verbindung zum Websocket-Server und speichert diese in der Variablen »channel« . Nach dem erfolgreichen Öffnen führt der Code die Rückruffunktion aus den Zeilen 9 bis 15 aus. Darin erzeugt Zeile 10 ein neues Peer-Objekt und speichert es in der globalen Variablen »pc« . Zeile 11 fügt den Medienstrom »stream« aus der Abfrage in Zeile 4 mit der Methode »addStream()« dem Peer-Objekt hinzu.

Listing 10

webrtc.js: Web RTC per Internet

01 document.addEventListener('DOMContentLoaded', function() {
02   var serv = pc = null,
03       url = 'ws://'+location.host;
04   navigator.mozGetUserMedia(
05     {video:true, audio:true},
06     function(stream) {
07       connectStream(stream, "#local");
08       var channel = new WebSocket(url, 'webrtc');
09       channel.onopen = function() {
10         pc = new mozRTCPeerConnection(serv);
11         pc.addStream(stream);
12         pc.onicecandidate = onice(pc);
13         pc.onaddstream = onadd();
14         pc.createOffer(desc(pc, channel, "offer"));
15       };
16       channel.onmessage = function(msg) {
17         var sig = JSON.parse(msg.data);
18         switch(sig.command) {
19           case "offer":
20             pc = new mozRTCPeerConnection(serv);
21             pc.addStream(stream);
22             pc.setRemoteDescription(new mozRTCSessionDescription(sig.data));
23             pc.onicecandidate = onice(pc);
24             pc.onaddstream = onadd();
25             pc.createAnswer(desc(pc, channel, "answer"));
26           break;
27           case "answer":
28             pc.setRemoteDescription(new mozRTCSessionDescription(sig.data));
29           break;
30           case "ice":
31             pc.addIceCandidate(new mozRTCIceCandidate(sig.data));
32           break;
33         }
34       };
35     },
36     error
37   );
38 });

ICE-Kandidat kommt

Die beiden darauf folgenden Zeilen erzeugen die Callback-Funktionen für die Ereignisse »onicecandidate« und »onaddstream« des Verbindungsaufbaus. Die Ereignisbehandlung für »onicecandidate« ist in Zeile 12 durch den Aufruf der Funktion »onice()« aus Listing 11 belegt. Sie gibt wie die Funktion »onadd()« aus Listing 6 eine Rückruffunktion zurück. Bei deren Aufruf verschickt die Funktion »send()« (Listing 13) einen ICE-Kandidaten. Abschließend erzeugt Zeile 14 von Listing 10 mittels »createOffer()« eine Sitzungsbeschreibung und übergibt sie der Rückruffunktion aus dem Aufruf von »desc()« (Listing 12). Dabei hinterlegt Zeile 3 die Sitzungsbeschreibung im Peer-Objekt »pc« , die folgende Zeile versendet sie über den Signaling-Server.

Listing 13

Objekt serialisieren

01 function send(channel, msg) {
02   channel.send(JSON.stringify(msg));
03 }

Listing 12

Sitzungsbeschreibung

01 function desc(pc, channel, comm) {
02   return function(desc) {
03     pc.setLocalDescription(desc);
04     send(channel, {command:comm, data:desc});
05   };
06 }

Listing 11

Ereignisbehandlung

01 function onice2(channel) {
02   return function(evt) {
03    if (evt.candidate) {
04      send(channel, {command:"ice", data:evt.candidate});
05     }
06   }
07 }

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.