Демонстрация экрана с помощью 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 или нашим Quick Start Guide .

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