Bildschirmfreigabe mit WebRTC

Sam Dutton

Wie wir letzte Woche berichtet haben, tut sich in letzter Zeit viel bei unserem alten Bekannten WebRTC.

Nun, hier ist eine weitere Premiere: WebRTC-Bildschirmfreigabe.

Hier ist ein Screencast: youtube.com/watch?v=tD0QtBUZsF4

Und hier ist der Code: github.com/samdutton/rtcshare

Im Grunde haben wir eine experimentelle Chrome-Erweiterung entwickelt, mit der über RTCPeerConnection und chrome.tabCapture ein Live-Video eines Browsertabs geteilt werden kann. Wenn Sie es ausprobieren möchten, benötigen Sie Chrome Canary und Sie müssen die experimentellen Erweiterungs-APIs auf der Seite about:flags aktivieren.

Unser Prototyp basiert stark auf der leistungsstarken appr.tc-Demo und ist, um ehrlich zu sein, ein bisschen ein Hack! Aber… es ist ein Proof of Concept und es funktioniert.

So haben wir das gemacht:

1. Wenn der Nutzer auf das Symbol der Erweiterung (die Schaltfläche „Aufzeichnen“ neben der Adressleiste) klickt, hängt das Hintergrundskript background.js der Erweiterung einen Iframe an, dessen src rtcshare.appspot.com ist. In background.js wird er nur verwendet, um Werte wie token und room_key abzurufen. Wir haben es ja gesagt, dass es sich um einen Hack handelt :^}. Das ist eine gekürzte und kanalisierte Version von apprtc.appspot.com. Wie beim apprtc-Beispiel wird auch für den Remote-Client rtcshare.appspot.com verwendet.

chrome.browserAction.onClicked.addListener(function(tab) {
    var currentMode = localStorage["capturing"];
    var newMode = currentMode === "on" ? "off" : "on";

    if (newMode === "on"){ // start capture
        appendIframe();
    } else { // stop capture
        chrome.tabs.getSelected(null, function(tab){
            localStream.stop();
            onRemoteHangup();
        });
        // set icon, localStorage, etc.
    }
}

1. Wenn der Iframe geladen ist, ruft background.js Werte von ihm ab (die von der App „rtcshare.appspot.com“ generiert wurden) und ruft chrome.tabCapture.capture() auf, um einen Livestream des aktuellen Tabs zu starten.

function appendIframe(){
    iframe = document.createElement("iframe");
    iframe.src="https://rtcshare.appspot.com";
    document.body.appendChild(iframe);
    iframe.onload = function(){
        iframe.contentWindow.postMessage("sendConfig", "*");
    };
}

// serialised config object messaged by iframe when it loads

window.addEventListener("message", function(event) {
    if (event.origin !== "https://rtcshare.appspot.com"){
        return;
    }
    var config = JSON.parse(event.data);
    room_link = config.room_link; // the remote peer URL
    token = config.token; // for messaging via Channel API
    // more parameter set from config
);

function startCapture(){
    chrome.tabs.getSelected(null, function(tab) {
        var selectedTabId = tab.id;
        chrome.tabCapture.capture({audio:true, video:true}, handleCapture); // bingo!
    });
}

1. Sobald der Livestream verfügbar ist (d. h. ein Live-Video des aktuellen Tabs), startet background.js den Peer-Verbindungsprozess und die Signalisierung erfolgt über rtcshare.appspot.com mit XHR und der Channel API von Google. Alles in allem funktioniert es wie die apprtc-Demo, mit der Ausnahme, dass der Videostream, der an den Remote-Peer gesendet wird, von chrome.tabCapture und nicht von getUserMedia() stammt.

function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}

1. Zu Demonstrationszwecken öffnet diese Prototyperweiterung einen neuen Tab mit der URL von rtcshare.appspot.com, der einen Suchstring für die „Raumnummer“ enthält. Natürlich kann diese URL auf einem anderen Computer an einem anderen Ort geöffnet werden. Das könnte der Beginn von etwas Nützlichem sein.

chrome.tabs.create({url: room_link});

Wir sehen viele interessante Anwendungsfälle für die Bildschirmfreigabe und sind schon in dieser frühen Entwicklungsphase beeindruckt, wie reaktionsschnell und stabil die tabbasierte Erfassung und Freigabe ohne Plug-in sein kann.

Wie immer freuen wir uns über Feedback zu dieser Erweiterung und zu den WebRTC APIs im Allgemeinen. Weitere Informationen zu WebRTC findest du im HTML5 Rocks-Artikel oder in unserem Schnellstartleitfaden.

Viel Spaß beim Programmieren und alles Gute für 2013 wünscht das Team von HTML5R und WebRTC.