Scherm delen met WebRTC

Sam Dutton

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

Nou... hier is weer een primeur: schermdeling via WebRTC.

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

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

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

Ons prototype is grotendeels gebaseerd op de fantastische appr.tc- demo en, eerlijk gezegd, is het een beetje een geïmproviseerde oplossing! Maar... het is een proof of concept, en het werkt.

Zo hebben we het gedaan:

1. Wanneer de gebruiker op het extensie-icoon klikt (de 'opnameknop' naast de adresbalk), voegt het achtergrondscript background.js van de extensie een iframe aan zichzelf toe, waarvan de src rtcshare.appspot.com is. In background.js wordt dit alleen gebruikt om waarden zoals token en room_key op te halen. We hadden je al verteld dat dit een workaround was :^}! Dit is een aangepaste 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 de iframe is geladen, haalt background.js er waarden uit (gegenereerd door de rtcshare.appspot.com-app) 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 (oftewel een live 'video' van het huidige tabblad), start background.js het verbindingsproces met de andere partij. De signalering verloopt via rtcshare.appspot.com met behulp van XHR en de Channel API van Google. Kortom, het werkt net als de apprtc- demo, met als enige verschil dat de videostream die naar de externe partij wordt verzonden 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 demonstratiedoeleinden opent deze prototype-extensie een nieuw tabblad met de URL van rtcshare.appspot.com , waaraan een query-string met een 'kamernummer' is toegevoegd. Deze URL kan natuurlijk ook op een andere computer, op een andere locatie, worden geopend, en DAT zou wel eens het begin van iets nuttigs kunnen zijn!

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

We voorzien veel interessante toepassingsmogelijkheden voor schermdeling en zelfs in dit vroege ontwikkelingsstadium zijn we 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 zeer op prijs: zowel over deze extensie als over de WebRTC API's in het algemeen. Wilt u meer weten over WebRTC? Bekijk dan het artikel op HTML5 Rocks of onze Snelstartgids .

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