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

Beispielanwendung

Die folgende Beispielanwendung verwendet Web RTC im Browser, um einen Videochat umzusetzen. Dabei nimmt der Webbrowser das Bild der Webcam und den Ton eines Mikrofons und leitet sie per Web RTC an einen zweiten Browser weiter. Die Clientanwendung setzt dieser Artikel in HTML, CSS und Javascript um. Zum Implementieren des Signaling-Servers dient Node.js.

Das Beispiel beschränkt sich zunächst auf den Browser Firefox, lässt sich aber auch auf Chrome übertragen. Abbildung 2 zeigt die Beispielanwendung beim Einsatz in Firefox auf Ubuntu Linux. Die Gegenstelle verwendet den freien Browser auf Windows 7.

Abbildung 2: Saitenblicke: Links das Bild der lokalen Webcam, rechts das der entfernten.

Mit der Programmierschnittstelle »getUserMedia()« [9] bieten die aktuellen Versionen der Browser Firefox, Chrome und Opera Zugriff auf Webcam und Mikrofon des lokalen Rechners, fragen den Anwender aber in einem Popup zuvor um Erlaubnis. Web RTC vereint die Video- und Audioströme wie in Abbildung 3 zu einem Medienstrom, um sie zu verarbeiten. Ein Medienstrom kann beliebig viele Video- und Audiospuren aufnehmen, eine Audiospur umfasst zudem zwei Stereokanäle.

Abbildung 3: Der Medienstrom bündelt Video- und Audioströme zur Verwendung in HTML-Video- und Audio-Elementen sowie in Peer-to-Peer-Verbindungen.

Video- und Audiosignale

Die Listings 1 bis 3 demonstrieren, wie man das Bild der lokalen Webcam in ein HTML-Dokument einbindet (Abbildung 4). Das HTML-Dokument in Listing 1 referenziert im Kopfbereich (Zeilen 3 bis 4) zunächst zwei Javascript-Dateien: Die Datei »core.js« enthält Funktionen für mehrere Beispiele in diesem Artikel, »mediastream.js« die für das aktuelle. Im Körper des HTML-Dokuments aus Listing 1 wartet in Zeile 8 das Video-Element mit der ID »local« auf die Verbindung mit einem Medienstrom.

Listing 1

HTML mit Video-Element

01 <html>
02 <head>
03   <script src="js/core.js"></script>
04   <script src="js/mediastream.js"></script>
05 </head>
06 <body>
07   <p id="msg"></p>
08   <video id="local" autoplay></video>
09 </body>
10 </html>

Abbildung 4: Erster Erfolg: Firefox spielt das Bild der lokalen Webcam im Browser ab.

Der Aufruf der Javascript-Methode »mozGetUserMedia()« in Listing 2 (Zeilen 2 bis 8) packt die Bilder der Webcam und den Ton des Mikrofons in einen Medienstrom. Diesen übergibt der Code in den Zeilen 4 bis 6 »stream« als Parameter an die Rückruffunktion. Die Funktion »connectStream()« in Zeile 5 und in Listing 3 spielt den Medienstrom im Video-Element ab. Tritt ein Problem auf, so kommt in Zeile 7 eine Callback-Funktion für den Fehlerfall zum Aufruf. Firefox macht die Angabe einer Rückruffunktion für diesen Fall obligatorisch.

Listing 3

core.js (Auszug)

01 function connectStream(stream, query) {
02   var ele = document.querySelector(query);
03   if (ele) {
04     ele.mozSrcObject = stream;
05     ele.play();
06   }
07 };

Listing 2

mediastream.js

01 document.addEventListener('DOMContentLoaded', function() {
02   navigator.mozGetUserMedia(
03     {video:true, audio:true},
04     function(stream) {
05       connectStream(stream, "#local");
06     },
07     error
08    );
09 });

Listing 3 zeigt die Javascript-Funktion »connectStream()« für den Browser Firefox. Zeile 2 wählt mit der Methode »querySelector()« anhand eines CSS-Selektors ein Element aus dem HTML-Dokument aus – vorzugsweise ein Video-Element. Zeile 4 bindet den Medienstrom über das Firefox-spezifische Attribut »mozSrcObject« an dieses Element.

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 08/2017

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

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