Udostępnianie ekranu za pomocą WebRTC

Sam Dutton

Jak informowaliśmy w zeszłym tygodniu, ostatnio mieliśmy wiele pracy z naszym starym znajomym, czyli z WebRTC.

Oto kolejna nowość: udostępnianie ekranu w WebRTC.

Oto screencast: youtube.com/watch?v=tD0QtBUZsF4

Oto kod: github.com/samdutton/rtcshare

Opracowane przez nas eksperymentalne rozszerzenie Chrome korzysta z funkcji RTCPeerConnection i chrome.tabCapture, aby udostępniać „film” z bieżącej karty przeglądarki. Jeśli chcesz wypróbować tę funkcję, musisz mieć Chrome Canary i włączyć eksperymentalne interfejsy API rozszerzeń na stronie about:flags.

Nasz prototyp w dużej mierze opiera się na potężnym demo appr.tc i szczerze mówiąc, jest to trochę skrót. Ale... to model koncepcyjny i działa.

Oto jak to zrobiliśmy:

1. Gdy użytkownik kliknie ikonę rozszerzenia (przycisk „nagrywaj” obok paska adresu), skrypt tła rozszerzenia background.js dołącza do siebie iframe, którego src to rtcshare.appspot.com. W background.js służy on tylko do pobierania wartości takich jak token i room_key. Jak już wspomnieliśmy, jest to hack :^}! Jest to wersja apprtc.appspot.com z przekierowaniem. Podobnie jak w przypadku apprtc, do obsługi klienta zdalnego służy adres rtcshare.appspot.com.

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. Po załadowaniu iframe background.js pobiera z niego wartości (generowane przez aplikację rtcshare.appspot.com) i wywołuje chrome.tabCapture.capture(), aby rozpocząć rejestrowanie transmisji na żywo z bieżącej karty.

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. Gdy transmisja na żywo jest dostępna (czyli „wideo” bieżącej karty), background.js uruchamia proces nawiązywania połączenia, a sygnalizacja odbywa się za pomocą rtcshare.appspot.com przy użyciu XHR i Channel API Google. Ogólnie działa to tak samo jak w przypadku demonstracji apprtc, z tym że strumień wideo przesyłany do urządzenia zdalnego pochodzi z chrome.tabCapture, a nie z getUserMedia().

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

1. Na potrzeby demonstracji to prototypowe rozszerzenie otwiera nową kartę z adresem URL udostępnionym przez stronę rtcshare.appspot.com, do którego dodano ciąg zapytania „numer pokoju”. Oczywiście ten adres URL można otworzyć na innym komputerze, w innym miejscu, i może to być początek czegoś przydatnego.

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

Wyobrażamy sobie wiele ciekawych zastosowań udostępniania ekranu. Już na tym wczesnym etapie rozwoju jesteśmy pod wrażeniem, jak stabilnie i płynnie działa przechwytywanie i udostępnianie kart bez wtyczek.

Jak zawsze zachęcamy do dzielenia się opiniami na temat tego rozszerzenia i ogółem interfejsów WebRTC. Więcej informacji o WebRTC znajdziesz w artykule HTML5 Rocks lub w krótkim przewodniku.

Życzymy udanego hakowania i szczęśliwego 2013 roku. Zespół HTML5R i WebRTC