Bildschirmfreigabe mit WebRTC

Sam Dutton

Wie letzte Woche berichtet, hat sich in letzter Zeit einiges bei unserem alten Freund WebRTC getan.

Hier ist eine weitere Premiere: WebRTC-Bildschirmfreigabe.

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

Hier ist der Code: github.com/samdutton/rtcshare

Wir haben eine experimentelle Chrome-Erweiterung entwickelt, die RTCPeerConnection und chrome.tabCapture verwendet, um ein Live-„Video“ eines Browsertabs zu teilen. Wenn Sie die Funktion ausprobieren möchten, benötigen Sie Chrome Canary und müssen auf der Seite about:flags experimentelle Erweiterungs-APIs aktivieren.

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

So sind wir vorgegangen:

1. Wenn der Nutzer auf das Erweiterungssymbol (die Aufnahmeschaltfläche neben der Adressleiste) klickt, hängt das Hintergrundskript der Erweiterung background.js einen iFrame an sich selbst an, dessen src rtcshare.appspot.com ist. In background.js wird es nur verwendet, um Werte wie token und room_key abzurufen. Wir haben dir ja gesagt, dass das ein Hack ist :^}! Das ist eine gekürzte Version von apprtc.appspot.com. Wie beim apprtc-Beispiel wird rtcshare.appspot.com auch für den Remote-Client 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 das iFrame geladen wurde, ruft background.js Werte daraus ab (die von der App rtcshare.appspot.com generiert wurden) und ruft chrome.tabCapture.capture() auf, um die Aufnahme eines Livestreams 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), wird der Prozess für die Peer-Verbindung von background.js gestartet. Die Signalisierung erfolgt über rtcshare.appspot.com mithilfe von XHR und der Channel API von Google. Insgesamt funktioniert es wie die apprtc-Demo, nur dass der an den Remote-Peer übertragene Videostream 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 Demozwecken wird mit dieser Prototyperweiterung ein neuer Tab mit der URL geöffnet, die von rtcshare.appspot.com bereitgestellt wird. Die URL enthält einen Abfragestring mit einer „Raumnummer“. Diese URL könnte natürlich 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. Schon in dieser frühen Entwicklungsphase sind wir beeindruckt, wie reaktionsschnell und stabil die tablose Erfassung und Freigabe von Tabs sein kann.

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

Viel Spaß beim Programmieren und alles Gute für 2013 vom gesamten HTML5R- und WebRTC-Team!