Демонстрация экрана с помощью 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 и API каналов Google. В целом, это работает как в демонстрационном примере 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!