Демонстрация экрана с помощью WebRTC

Sam Dutton

Как мы сообщали на прошлой неделе , в последнее время много чего произошло с нашим старым другом WebRTC .

Что ж… вот еще одно новшество: совместное использование экрана WebRTC.

Вот скринкаст: youtube.com/watch?v=tD0QtBUZsF4.

И вот код: github.com/samdutton/rtcshare

По сути, мы создали экспериментальное расширение Chrome, которое использует RTCPeerConnection и chrome.tabCapture для обмена живым «видео» вкладки браузера. Если вы хотите опробовать его, вам понадобится Chrome Canary и вам нужно будет включить API экспериментального расширения на странице about:flags .

Наш прототип во многом опирается на мощную демонстрационную версию appr.tc , и, честно говоря, это своего рода хак! Но... это подтверждение концепции, и оно работает.

Вот как мы это сделали:

1. Когда пользователь нажимает значок расширения («кнопка записи» рядом с адресной строкой), фоновый скрипт расширения background.js добавляет к себе iframe, src которого является rtcshare.appspot.com . В background.js он используется только для получения таких значений, как token и room_key . Мы говорили вам, что это хак :^}! Это урезанная и направленная версия apprtc.appspot.com . Как и в примере с apprtc, для удаленного клиента также используется 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. Когда iframe загрузился, background.js получает из него значения (сгенерированные приложением rtcshare.appspot.com) и вызывает chrome.tabCapture.capture() чтобы начать захват живого потока текущей вкладки.

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. Как только прямая трансляция становится доступной (другими словами, живое «видео» текущей вкладки), background.js запускает процесс однорангового соединения, и сигнализация осуществляется через rtcshare.appspot.com с использованием XHR и Google Channel API . В целом, это работает так же, как демонстрация apprtc , за исключением того, что видеопоток, передаваемый удаленному узлу, поступает из chrome.tabCapture , а не из getUserMedia() .

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

1. В демонстрационных целях этот прототип расширения открывает новую вкладку с URL-адресом, предоставленным rtcshare.appspot.com , к которому добавлена ​​строка запроса «номер комнаты». Конечно, этот URL-адрес можно открыть на другом компьютере, в другом месте, и ЭТО может стать началом чего-то полезного!

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

Мы предвидим множество интересных вариантов использования совместного использования экрана, и даже на этой ранней стадии разработки мы впечатлены тем, насколько отзывчивым и стабильным может быть захват и совместное использование вкладок без плагинов.

Как всегда, мы приветствуем ваши комментарии: по поводу этого расширения и по поводу API WebRTC в целом. Если вы хотите узнать больше о WebRTC, прочтите статью HTML5 Rocks или наше Краткое руководство .

Удачного взлома — и наилучшие пожелания в 2013 году от всех сотрудников HTML5R и WebRTC!