publish and discover academic work ...

WebRTC oder eigener Skype in Browser

Hallo Kollegen,
damit Sie besser verstehen, was wir in diesem Artikel besprechen wollen, besuchen Sie die Seite( der Browser wird nach Ihrer Erlaubnis fragen die Videokamera zu benutzen). Jetzt kopieren Sie die URL aus der URL-Leiste von Browser und senden Sie sie einem von Ihren Freunden. Sie haben gerade eine Videokonferenz erstellt. Schauen Sie genauer den Link, der n Browser generiert wurde, da gibt es einen einziger Parameter, die die Nummer Ihrer Konferenz ist. Das bedeutet, dass alles, was Sie Ihrem Gesprächspartner mitteilen müssen ist die Nummer, alles anderes bleibt umgeändert.

Bevor wir anfangen, in Details zu gehen, möchte ich zuerst ganz kurz erzählen, was WebRTC ist. WebRTC ist ein Google Projekt, das das Ziel hat, die Kommunikation zwischen Browser möglichst einfach zu schaffen. Das Projekt besteht aus drei Teilen:

  1. MediaStream, der Teil ist für Arbeit mit der Videokamera zuständig. Man kann ganz einfach und schnell eine Anwendung basteln, die nichts anderes macht, als den Videostream direkt auf HTML5 Element „Video“ anzeigt.
  2. RTCPeerConnection ist für Kommunikation zwischen Browser zuständig
  3. RTCDataChannel kann, wie sein Name spricht, die Daten übertragen, z.B. eine Datei

Ich möchte betonen, dass das Projekt sich rasant entwickelt, deswegen wird seine API, wie z.B. die Namen von Methoden geändert, d.h. der Code, den Sie in diesem Artikel finden, kann in ein paar Tagen nicht mehr funktionieren.

MediaStream


Um die Verbindung mit der Videokamera zu erstellen, müssen wir die Funktion getUserMedia() des Objektes navigator aufrufen. Da wie das schon gesagt wurde, hat die API keine feste Struktur, müssen wir berücksichtigen, dass die Funktion in verschiedenen Browser unterschiedliche Namen hat. Die Funktion erhält drei Parameter:

  1. Was wir benutzen wollen, Video, Audio oder beides
  2. Eine Funktion, die Aufgerufen wird, wenn alles ok ist
  3. Eine Funktion für Fehlerfall

Beispiel:

var getUserMedia;
var browserUserMedia =	navigator.webkitGetUserMedia	||	// WebKit
                        navigator.mozGetUserMedia	||	// Mozilla FireFox
                        navigator.getUserMedia;			// 2013...
if ( !browserUserMedia ) throw 'Your browser doesn\'t support WebRTC';

getUserMedia = browserUserMedia.bind( navigator );

getUserMedia(
    {
        audio: true,
        video: true
    },
    function( stream ) {
        console.log( stream );
    },
    function( err ) {
        console.log( err );
    }
);


Der Browser muss fragen, ob er die Kamera benutzen darf:



Wenn alles ok ist, d.h. der Browser unterstützt WebRTC und der Benutzer hat uns Zugriff auf die Kamera erlaubt, können wir den Stream auf ein Element Video umleiten.

HTML

<video id="video" autoplay></video>


JavaScript

var videoElement = document.getElementById( 'video' );
videoElement.src = URL.createObjectURL( stream );


Übrigens, mit dem Video Element kann man ein bisschen spielen, z.B. einen Filter mittels CSS anwenden:

#video {
    -webkit-filter: sepia(1);
}


Das ist doch echt geil, nicht wahr?

Peer Connection


Wie das schon gesagt wurde, ist Peer Connection dafür zuständig, eine direkte Pear-to-Pear Verbindung zwischen Browser zu erstellen. Die Erstellung einer Verbindung passiert wie folgt aus:



Es gibt ein Server, der nur ganz am Anfang nötig ist. Er ist wie ein Treffpunkt, wo zwei Browser sich begrüßen können. Sobald sie mit einander „gesprochen“ haben, können sie direkt miteinander, sprich ohne weitere Vermittler, kommunizieren.

Die Demo oben ist völlig offen, ihren Quelltext können Sie hier runterladen.

Falls das Thema Ihnen interessant ist, würde Ich Ihnen diesen richtig guten Artikel empfehlen.
  • easyman easyman,
  • 04 März 2013, 22:21
  • 1

Kommentare (0)

RSS zusammenklappen / ausklappen

Kommentar schreiben

Ihr Name
Sie sind ein Gast, Sie dürfen keine HTML-Tags verwenden
Bitte geben Sie die Zeichen in das folgende Feld ein