Theoretischer Teil

WebRTC

• Web Real-Time Communication
• = Echtzeitkommunikation in Webapplikationen

Was ist neu?

• Übertragung von Medien von Browser zu Browser
• Komplett im Browser
• Kein Plugin oder externe Applikation nötig
• Verbindung direkt P2P, kein Server dazwischen*
• Übertragung von Ton, Bild und Dateien
• in Echtzeit

* zum initialen Verbindungsaufbau (Signaling) wird ein Server benötigt

Technische Hintergründe

• baut auf HTML5 (z.B. <video>) und JavaScript auf
• z.B. Ethernet > IP > UDP / TCP > RTP > WebRTC
  • Verschlüsselung möglich
• Signaling (initialer Aufbau der P2P-Verbindung)
  • Websockets
  • JavaScript Session Establishment Protocol (JSEP)
  • Jingle (Erweitung von XMPP = Extensible Messaging and Presence Protocol, ehemals Jabber)

Lizenzen? Kosten?

• Video: VP8
• Audio: Opus
• Freie Software, BSD-artige Lizenz
• Vorangetrieben durch Google, Mozilla, Opera

Verfügbarkeit?

derzeit noch nicht vollständig

• aktuelle Google Chrome Versionen
• Mozilla Firefox nightly
• Opera, Microsoft arbeiten an Implementierung
• seit 2011 Standardisierungsverfahren des W3C

Praktischer Teil

Was wird benötigt?

• Signaling-Technologie
• MediaStream API
  • Stream der eigenen Hardware
• RTCPeerConnection API
• (RTCDataChannel API)

Wie funktioniert es?

Konkretes Beispiel

• RTCMultiConnection.js
  • JavaScript Bibliothek
  • enthält wichtige Grundbausteine
• Ausgangssituation
  • vordefiniertes HTML5 Grundgerüst
• Ziel: Videokonferenz

1. Objekt erzeugen und Eigenschaften definieren

    //neues RTCMultiConnection Objekt erzeugen
    var connection = RTCMultiConnection();

    //Eigenschaften der Verbindung festlegen
    connection.direction='one-to-one';
    connection.session='only-video';
                        

2.1 Neue Verbindung herstellen

    //Aktion die bei Klick auf den "Open"-Button ausgeführt wird
    $('#open-session').click(function(){
        //Session ID festlegen
        var sessionid = $('#sessionID').val();
        //Neue Verbindung öffnen mit der eingegebenen Session-ID
        connection.open(sessionid);
    });
                        

2.2 Verbindung beitreten

    //Aktion die bei Klick auf den "Join"-Button ausgeführt wird
    $('#join-session').click(function(){
        //Session ID festlegen
        var sessionid = $('#sessionID').val();
        //Zur vorhandenen Verbindung mit der
        //eingegebenen Session-ID verbinden
        connection.connect(sessionid);
    });
                        

3. Streams referenzieren und ausgeben

    //Die Streams von der eigenen Kamera sowie den
    //Stream vom Gegenüber referenzieren und ausgeben
    connection.onstream = function (stream) {

        //Eigener Stream
        if (stream.type === 'local') {
            //Video-Element aus dem eigenen Stream erzeugen
            mediaelement = stream.mediaElement;
            //Das Video-Element mit dem eigenen Stream darstellen
            $('#localStream').append(mediaElement);
        }

        //Stream vom Gegenüber
        if (stream.type === 'remote') {
            //Video-Element aus dem Stream erzeugen
            mediaelement = stream.mediaElement;
            //Das Video-Element mit dem Remote-Stream darstellen
            $('#remoteStream').append(mediaElement);
        }
    };
                        

Demonstration

Fazit

Offene Baustellen

• steckt noch in den Kinderschuhen
• bisher nur in Chrome einigermaßen implemetiert
• Signalling funktioniert selbst in Chrome noch nicht
  • TURN / STUN zur Überwindung von NAT nicht ausreichend implementiert

Kritik

• stark von Google beeinflusst (Codecs)
• Standardisierung nicht garantiert

Anschauen lohnt sich!

Interessante Technik mit großem Potential.