WebRTC ile ekran paylaşımı

Sam Dutton

Geçen hafta bildirdiğimiz gibi, eski dostumuz WebRTC ile ilgili son zamanlarda çok şey oluyor.

İşte bir ilk daha: WebRTC ekran paylaşımı.

Ekran kaydı: youtube.com/watch?v=tD0QtBUZsF4

Kod: github.com/samdutton/rtcshare

Temel olarak, bir tarayıcı sekmesinin canlı "videosunu" paylaşmak için RTCPeerConnection ve chrome.tabCapture kullanan deneysel bir Chrome uzantısı oluşturduk. Bu özelliği denemek istiyorsanız Chrome Canary'yi yüklemeniz ve about:flags sayfasında deneysel uzantı API'lerini etkinleştirmeniz gerekir.

Prototipimiz büyük ölçüde appr.tc demosuna dayanıyor ve açıkçası biraz hacklenmiş durumda. Ancak bu bir kavram kanıtlama çalışmasıdır ve çalışmaktadır.

Bu işlemi şu şekilde yaptık:

1. Kullanıcı uzantı simgesini (adres çubuğunun yanındaki "kayıt düğmesi") tıkladığında uzantının arka plan komut dosyası background.js, kendisine bir iframe ekler. Bu iframe'in src değeri rtcshare.appspot.com'dur. background.js'de yalnızca token ve room_key gibi değerleri almak için kullanılır. Bunun bir hack olduğunu söylemiştik :^}! Bu, apprtc.appspot.com'un değiştirilmiş bir sürümüdür. apprtc örneğinde olduğu gibi, rtcshare.appspot.com da uzak istemci için kullanılır.

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 yüklendiğinde background.js, iframe'den değerler alır (rtcshare.appspot.com uygulaması tarafından oluşturulur) ve geçerli sekmenin canlı yayınını yakalamaya başlamak için chrome.tabCapture.capture() işlevini çağırır.

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. Canlı yayın kullanılabilir hale geldiğinde (diğer bir deyişle, mevcut sekmenin canlı "videosu"), background.js eşler arası bağlantı sürecini başlatır ve sinyalizasyon, XHR ve Google'ın Channel API'si kullanılarak rtcshare.appspot.com üzerinden yapılır. Genel olarak, uzak tarafa iletilen video akışının getUserMedia() değil chrome.tabCapture kaynaklı olması dışında apprtc demosuna benzer şekilde çalışır.

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

1. Bu prototip uzantı, demo amacıyla rtcshare.appspot.com tarafından sağlanan URL'yi içeren yeni bir sekme açar. Bu URL'ye "oda numarası" sorgu dizesi eklenmiştir. Elbette bu URL başka bir bilgisayarda, başka bir yerde açılabilir ve BU, faydalı bir şeyin başlangıcı olabilir.

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

Ekran paylaşımı için birçok ilginç kullanım alanı öngörüyoruz. Geliştirmenin bu erken aşamasında bile, eklenti gerektirmeyen sekme yakalama ve paylaşma özelliğinin ne kadar hızlı ve kararlı olabileceği bizi etkiledi.

Her zaman olduğu gibi, bu uzantı ve genel olarak WebRTC API'leri hakkındaki yorumlarınızı bekliyoruz. WebRTC hakkında daha fazla bilgi edinmek için HTML5 Rocks makalesini veya Hızlı Başlangıç Kılavuzumuzu inceleyin.

Herkese iyi kodlamalar ve HTML5R ile WebRTC'deki tüm arkadaşlarımızdan 2013 için en iyi dileklerimizi iletiyoruz.