Firefox 33 mit WebRTC Bildschirm- und Fenster-Sharing (inkl. Beispielcode)

Anwendungen wie TeamViewer könnten bald überflüssig werden, denn das Teilen von Bildschirminhalten in Echtzeit ist eine Aufgabe, die mittlerweile vom Browser übernommen werden kann. Mozilla implementiert das WebRTC Bildschirm- sowie Fenster-Sharing in Firefox 33.

Mozilla implementiert in Firefox 33 die Möglichkeit, Bildschirminhalte in Echtzeit mit anderen zu teilen; genauer den Teil der WebRTC-Spezifikation, welcher es Webentwicklern erlaubt, mit nur wenigen Zeilen Code Funktionalität zum Bildschirm- und Fenster-Sharing in Webanwendungen bereitzustellen. Hersteller von Anwendungen wie TeamViewer müssen sich damit warm anziehen, denn zumindest für den Teil der Nutzer, der solche Tools zum Präsentieren von Bildschirminhalten nutzt und auf die Fernsteuerung verzichten kann, entfällt damit die Notwendigkeit einer zusätzlichen Software.

Derzeit muss die Neuerung noch von Hand über about:config aktiviert werden, indem der Schalter media.getusermedia.screensharing.enabled per Doppelklick auf true geschaltet wird. Wer die Neuerung in einer aktuellen Nightly-Version von Firefox 34 testen will, muss außerdem noch den Schalter media.getusermedia.screensharing.allowed_domains auf eine komma-separierte Liste von Domains ändern, für welche das Bildschirm- und Fenster-Sharing erlaubt werden soll. Das Setzen dieses Schalters wird in Kürze auch in Firefox 33 notwendig sein, sobald der entsprechende Patch im Aurora-Zweig gelandet ist. Mittelfristig wird der Schalter komplett entfallen, Mozilla hat sich für die initiale Auslieferung dieses Features aber für diesen Whitelisting-Ansatz entschieden, bis man sich über eine geeignete Darstellung im Klaren ist, welche den Nutzer über die damit verbundenen Risiken hinsichtlich Privatsphäre aufklärt, wenn die Inhalte des Bildschirms mit anderen geteilt werden.

Es kann entweder der gesamte Bildschirm geteilt werden oder ein einzelnes Programmfenster – es muss sich dabei nicht um den Browser handeln, der Fensterinhalt jedes beliebigen geöffneten Programms kann geteilt werden -, jeweils optional auch inklusive Ton.

[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/screensharing.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/screensharing.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Abb. 1: Bildschirm-Sharing
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/windowsharing.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/windowsharing.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Abb. 2: Fenster-Sharing

In diesem Zusammenhang hat Mozilla auch den Indikator verändert, welcher anzeigt, dass eine Kommunikation über WebRTC stattfindet. Bislang hat Firefox ein zusätzliches Symbol in der Symbolleiste angezeigt, wenn die Kamera und/oder das Mikrofon aktiviert ist, und dem Nutzer darüber die Möglichkeit gegeben, die Freigabe zu beenden, auch wenn der entsprechende Tab gerade nicht im Vordergrund ist. Mit der Ergänzung um Bildschirm- und Fenster-Sharing war man allerdings besorgt darüber, ob dieser Indikator sichtbar genug ist und hat diesen ersetzt. Anstelle eines zusätzlichen Symbols in der Symbolleiste sehen Windows- und Linux-Nutzer nun am oberen Bildschirmrand fixierte Kontrollsymbole, welche auch sichtbar sind, wenn Firefox nicht sichtbar ist. Nutzer von Mac OS X sehen entsprechende Symbole in der globalen Menüleiste, auch wieder unabhängig davon, ob Firefox im Vordergrund ist oder nicht.

[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/webrtc-indicator-windows.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/webrtc-indicator-windows.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Abb. 3: WebRTC-Indikator Windows
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/webrtc-indicator-osx.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/webrtc-indicator-osx.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Abb. 4: WebRTC-Indikator Mac OS X

Um zu demonstrieren, wie einfach die Bereitstellung von Bildschirm- und Fenster-Sharing funktioniert, habe ich einen Beispielcode geschrieben. Dieser dient lediglich Demonstrationszwecken und beinhaltet weder Code zum Stoppen (ein Neuladen der Seite stoppt die Übertragung sowieso) noch irgendeine Form von Fehlerbehandlung oder Kompatibilität mit Chrome. Entwickler, welche mit der Programmierung entsprechender Anwendungen ihr Geld verdienen, sollen ja auch noch selbst etwas zu tun haben. 😉

[pastacode lang=“markup“ message=“HTML“ highlight=““ provider=“manual“]

< !DOCTYPE html>
<html lang='de'>
 
<head>
  <meta charset='utf-8' />
  <title>soeren-hentzschel.at WebRTC Screen- & Window-Sharing Demo</title>
</head>
<body>
  <h1>soeren-hentzschel.at WebRTC Screen- & Window-Sharing Demo</h1>
  <div> 
    <button type='submit' onclick='startSharing("screen", false);'>Screen Sharing</button>
    <button type='submit' onclick='startSharing("screen", true);'>Screen + Audio</button>
    <button type='submit' onclick='startSharing("window", false);'>Window Sharing</button>
    <button type='submit' onclick='startSharing("window", true);'>Window + Audio</button>
    <div id='content'></div>
  </div>
  <script>
    var content = document.getElementById('content');
    var video = document.createElement('video');
 
    video.setAttribute('width', 640);
    video.setAttribute('height', 480);
 
    function startSharing (mediaSource, audio) {
      mediaConstraints = {
        video : {
          mediaSource : mediaSource
        },
        audio : audio
      };
 
      navigator.mozGetUserMedia(mediaConstraints, function (stream) {
        content.appendChild(video);
        video.mozSrcObject = stream;
        video.play();
      }, function (error) { });
    }
  </script>
</body>
</html>

[/pastacode]

(Beispiel-Code wird nicht angezeigt? Bitte Original-Artikel lesen)