Partage d'écran avec WebRTC

Sam Dutton

Comme nous l'avons indiqué la semaine dernière, il s'est passé beaucoup de choses récemment avec notre vieil ami WebRTC.

Et voici une autre nouveauté : le partage d'écran WebRTC.

Voici un enregistrement d'écran : youtube.com/watch?v=tD0QtBUZsF4

Voici le code : github.com/samdutton/rtcshare

En substance, nous avons créé une extension Chrome expérimentale qui utilise RTCPeerConnection et chrome.tabCapture pour partager une "vidéo" en direct d'un onglet de navigateur. Si vous souhaitez l'essayer, vous aurez besoin de Chrome Canary et d'activer les API d'extension expérimentales sur la page about:flags.

Notre prototype repose fortement sur la démo appr.tc et, pour être honnête, il s'agit d'un petit hack ! Mais… il s'agit d'une démonstration de faisabilité, et ça fonctionne.

Voici comment nous y sommes parvenus :

1. Lorsque l'utilisateur clique sur l'icône de l'extension (le bouton d'enregistrement à côté de la barre d'adresse), le script d'arrière-plan de l'extension background.js ajoute un iFrame à lui-même, dont le src est rtcshare.appspot.com. Dans background.js, il n'est utilisé que pour obtenir des valeurs telles que token et room_key. Nous vous avions prévenu que c'était une astuce :^}! Il s'agit d'une version modifiée de apprtc.appspot.com. Comme pour l'exemple apprtc, rtcshare.appspot.com est également utilisé pour le client distant.

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. Une fois l'iFrame chargé, background.js récupère les valeurs (générées par l'application rtcshare.appspot.com) et appelle chrome.tabCapture.capture() pour commencer à capturer un flux en direct de l'onglet actuel.

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. Une fois le flux vidéo en direct disponible (en d'autres termes, une "vidéo" en direct de l'onglet actuel), background.js lance le processus de connexion peer-to-peer. La signalisation est effectuée via rtcshare.appspot.com à l'aide de XHR et de l'API Channel de Google. Dans l'ensemble, il fonctionne comme la démo apprtc, sauf que le flux vidéo communiqué au pair distant provient de chrome.tabCapture et non de getUserMedia().

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

1. À des fins de démonstration, cette extension prototype ouvre un nouvel onglet avec l'URL fournie par rtcshare.appspot.com, à laquelle une chaîne de requête de "numéro de salle" a été ajoutée. Bien sûr, cette URL pourrait être ouverte sur un autre ordinateur, dans un autre lieu, et CELA pourrait être le début de quelque chose d'utile !

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

Nous prévoyons de nombreux cas d'utilisation intéressants pour le partage d'écran. Même à ce stade précoce du développement, nous sommes impressionnés par la réactivité et la stabilité de la capture et du partage d'onglets sans plug-in.

Comme toujours, nous vous invitons à nous faire part de vos commentaires sur cette extension et sur les API WebRTC en général. Pour en savoir plus sur WebRTC, consultez l'article HTML5 Rocks ou notre guide de démarrage rapide.

Bon piratage et meilleurs vœux pour 2013 de la part de toute l'équipe HTML5R et WebRTC !