Bildschirmfreigabe mit WebRTC

Sam Dutton

Twitter GitHub Glitch Mastodon Startseite

Wie letzte Woche berichtet, hat in letzter Zeit viel mit unserem alten Freund WebRTC passiert.

Nun, noch eine erste Frage: WebRTC-Bildschirmfreigabe.

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

Und dieser Code lautet: github.com/samdutton/rtcshare

Im Wesentlichen haben wir eine experimentelle Chrome-Erweiterung erstellt, die RTCPeerConnection und chrome.tabCapture verwendet, um ein Live-Video eines Browsertabs zu teilen. Zum Testen benötigen Sie Chrome Canary. Außerdem müssen Sie experimentelle Erweiterungs-APIs auf der Seite about:flags aktivieren.

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

So sind wir vorgegangen:

1. Wenn ein Nutzer auf das Erweiterungssymbol (die Aufzeichnungsschaltfläche neben der Adressleiste) klickt, hängt das Hintergrundskript hintergrund.js einen iFrame an sich selbst an. Der src lautet dann rtcshare.appspot.com. In background.js wird er nur verwendet, um Werte wie token und room_key abzurufen. Wir haben Ihnen mitgeteilt, dass dies ein Hack ist, :^}! Dies ist eine gehackte 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. Nachdem der iFrame geladen wurde, ruft background.js Werte davon ab, die von der App rtcshare.appspot.com generiert werden, und chrome.tabCapture.capture() aufrufen, um mit der Aufzeichnung eines Livestreams des aktuellen Tabs zu beginnen.

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 die Peer-Verbindung und die Signalisierung erfolgt über rtcshare.appspot.com mithilfe von XHR und der Channel API von Google. Insgesamt funktioniert sie wie die apprtc-Demo, mit der Ausnahme, dass der mit dem Remote-Peer kommunizierte 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 öffnet diese Prototyp-Erweiterung einen neuen Tab mit der von rtcshare.appspot.com bereitgestellten URL, der eine Abfragezeichenfolge für "Zimmernummer" hinzugefügt wurde. Natürlich könnte diese URL auch auf einem anderen Computer an einem anderen Ort geöffnet werden. Das könnte der Anfang von etwas Nützlichem sein!

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

Wir sehen viele interessante Anwendungsfälle für die Bildschirmfreigabe vor und sind selbst in diesem frühen Entwicklungsstadium beeindruckt, wie reaktionsschnell und stabil ohne Plug-in die Tabaufnahme und -freigabe sein kann.

Wie immer freuen wir uns über Ihre Kommentare zu dieser Erweiterung und zu den WebRTC-APIs im Allgemeinen. Weitere Informationen zu WebRTC finden Sie im HTML5 Rocks-Artikel oder in unserer Kurzanleitung.

Viel Erfolg beim Hacking und alles Gute für das Jahr 2013 von HTML5R und WebRTC!