Scherm delen met WebRTC

Sam Dutton

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

Nou... hier is nog een primeur: WebRTC-scherm delen.

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 het 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 machtige appr.tc- demo en, om eerlijk te zijn, het is een beetje een hack! Maar... het is een proof of concept, en het werkt.

Zo hebben we het gedaan:

1. Wanneer de gebruiker op het extensiepictogram klikt (de 'opnameknop' naast de adresbalk), voegt het achtergrondscript van de extensie, background.js , een iframe aan zichzelf toe, waarvan de src rtcshare.appspot.com is. In background.js wordt het alleen gebruikt om waarden op te halen, zoals token en room_key . We vertelden je dat dit een hack was :^}! Dit is een gehakte en gechannelde versie van apprtc.appspot.com . Net als bij 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. Wanneer het iframe is geladen, haalt background.js er waarden uit (gegenereerd door de app rtcshare.appspot.com) en roept chrome.tabCapture.capture() aan om te beginnen met het vastleggen van een livestream van het huidige tabblad.

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 gedaan via rtcshare.appspot.com met behulp van XHR en de Channel API van Google. Al met al werkt het als de apprtc- demo, behalve dat de videostream die naar de externe peer wordt gecommuniceerd afkomstig is van chrome.tabCapture en niet van 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'-queryreeks is toegevoegd. Natuurlijk kan deze URL op een andere computer worden geopend, op een andere plaats, en DAT zou het begin kunnen zijn van iets nuttigs!

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

We voorzien veel interessante gebruiksscenario's voor het delen van schermen 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 verwelkomen we uw opmerkingen: over deze extensie en over de WebRTC API's in het algemeen. Als je meer wilt weten over WebRTC, bekijk dan het HTML5 Rocks-artikel of onze snelstartgids .

Veel hackplezier -- en de beste wensen voor 2013 van iedereen bij HTML5R en WebRTC!