Partage d'écran avec WebRTC

Sam Dutton

Twitter GitHub Glitch Mastodon Page d'accueil

Comme nous vous l'avions signalé la semaine dernière, de nombreuses choses se sont produites dernièrement avec notre vieil ami WebRTC.

Eh bien... Voici une autre première: le partage d'écran WebRTC.

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

Et voici le code: github.com/samdutton/rtcshare

Concrètement, 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. Pour essayer cette nouvelle version, vous avez besoin de Chrome Canary et d'activer les API des extensions expérimentales sur la page about:flags.

Notre prototype s'appuie en grande partie sur la puissante démo appr.tc et, pour être honnête, c'est un peu difficile. Mais... c'est une démonstration de faisabilité et ça marche.

Voici comment nous avons fait:

1. Lorsque l'utilisateur clique sur l'icône de l'extension (le "bouton d'enregistrement" en regard de la barre d'adresse), le script d'arrière-plan de l'extension background.js ajoute à lui-même un iFrame, dont 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 avons dit qu'il s'agissait d'une astuce :^} ! Il s'agit d'une version découpée et divisé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 en 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 actif.

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 la diffusion en direct disponible (en d'autres termes, une "vidéo" en direct de l'onglet actif), background.js lance le processus de connexion aux pairs. Le signalement s'effectue via rtcshare.appspot.com à l'aide de XHR et de l'API Channel de Google. Dans l'ensemble, cela fonctionne comme la démo apprtc, à la différence 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 de prototype ouvre un nouvel onglet avec l'URL fournie par rtcshare.appspot.com, et une chaîne de requête "numéro de chambre" a été ajoutée. Bien sûr, cette URL pourrait être ouverte sur un autre ordinateur, à un autre endroit, et ÇA pourrait être le début d'une chose d'utile !

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

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

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

Tous nos vœux de réussite pour 2013 de la part de l'équipe HTML5R et WebRTC.