Scherm delen met WebRTC

Sam Dutton

Zoals we vorige week al meldden , is er de laatste tijd veel gebeurd met onze oude vriend WebRTC .

Nou... hier is nog een primeur: WebRTC-schermdelen.

Hier is een screencast: youtube.com/watch?v=tD0QtBUZsF4

En hier is de code: github.com/samdutton/rtcshare

In wezen hebben we een experimentele Chrome-extensie gebouwd die RTCPeerConnection en chrome.tabCapture gebruikt om een ​​live 'video' van een browsertabblad te delen. Als je dit wilt uitproberen, heb je Chrome Canary nodig en moet je Experimental Extension API's inschakelen op de about:flags- pagina.

Ons prototype is sterk afhankelijk van de krachtige appr.tc demo en, eerlijk gezegd, het is een beetje een trucje! Maar... het is een proof of concept, en het werkt.

Zo hebben we het gedaan:

1. Wanneer de gebruiker op het extensiepictogram (de 'opnameknop' naast de adresbalk) klikt, voegt het achtergrondscript background.js van de extensie een iframe aan zichzelf toe, waarvan de src rtcshare.appspot.com is. In background.js wordt het alleen gebruikt om waarden zoals token en room_key op te halen. We zeiden toch dat dit een hack was :^}! Dit is een afgezaagde en gekanaliseerde versie van apprtc.appspot.com . Net als in het apprtc-voorbeeld wordt rtcshare.appspot.com ook gebruikt voor de externe client.

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. Zodra het iframe is geladen, haalt background.js er waarden uit (gegenereerd door de app rtcshare.appspot.com) en roept chrome.tabCapture.capture() aan om een ​​livestream van het huidige tabblad vast te leggen.

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. Zodra de livestream beschikbaar is (met andere woorden, een live 'video' van het huidige tabblad), start background.js het peer-verbindingsproces en wordt de signalering uitgevoerd via rtcshare.appspot.com met behulp van XHR en Google's Channel API . Alles bij elkaar werkt het hetzelfde als de apprtc- demo, behalve dat de videostream die naar de externe peer wordt gecommuniceerd, afkomstig is van chrome.tabCapture en niet getUserMedia() .

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

1. Voor demodoeleinden opent deze prototype-extensie een nieuw tabblad met de URL van rtcshare.appspot.com , waaraan een 'kamernummer'-querystring is toegevoegd. Deze URL kan natuurlijk ook op een andere computer, op een andere locatie, worden geopend, en DAT zou het begin kunnen zijn van iets nuttigs!

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

We voorzien veel interessante toepassingsmogelijkheden voor schermdeling en zijn, zelfs in dit vroege stadium van de ontwikkeling, onder de indruk van hoe responsief en stabiel het vastleggen en delen van tabbladen zonder plug-ins kan zijn.

Zoals altijd stellen we uw opmerkingen op prijs: over deze extensie en over de WebRTC API's in het algemeen. Wilt u meer weten over WebRTC? Bekijk dan het artikel over HTML5 Rocks of onze snelstartgids .

Veel plezier met hacken en de beste wensen voor 2013 namens iedereen bij HTML5R en WebRTC!