WebRTC ile ekran paylaşımı

Sam Dutton

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

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

Ekran video kaydını şurada bulabilirsiniz: youtube.com/watch?v=tD0QtBUZsF4

Kodu burada bulabilirsiniz: github.com/samdutton/rtcshare

Özetle, bir tarayıcı sekmesinin canlı "videosunu" paylaşmak için RTCPeerConnection ve chrome.tabCapture kullanan deneysel bir Chrome uzantısı oluşturduk. Denemek istiyorsanız Chrome Canary'ye ihtiyacınız ve about:flags sayfasında Deneysel Uzantı API'larını etkinleştirmeniz gerekir.

Prototipimiz büyük ölçüde güçlü appr.tc demosuna dayanıyor ve dürüst olmak gerekirse biraz da hile içeriyor. Ama... Bu, bir kavram kanıtlama çalışmasıdır ve işe yarıyor.

Bunu nasıl başardığımızı aşağıda açıklıyoruz:

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 saldırı olduğunu söylemiştik :^}. Bu, apprtc.appspot.com'un kesilmiş ve kanala alınmış bir sürümüdür. apprtc örneğinde olduğu gibi, uzak istemci için rtcshare.appspot.com da 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, bu kaynaktan (rtcshare.appspot.com uygulaması tarafından oluşturulur) değerler alır 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 (yani mevcut sekmenin canlı "videosu") yayınlandıktan sonra background.js eş bağlantı sürecini başlatır ve sinyal verme işlemi, XHR ve Google'ın Channel API kullanılarak rtcshare.appspot.com üzerinden gerçekleştirilir. Genel olarak, uzak eşe iletilen video akışının getUserMedia() yerine chrome.tabCapture'den gelmesi dışında apprtc demosu gibi çalışır.

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

1. Demo amacıyla bu prototip uzantı, 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çılmış olabilir. Bu da yararlı bir şeyin başlangıcı olabilir.

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

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

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 makalesine veya Hızlı Başlangıç Kılavuzumuza göz atın.

HTML5R ve WebRTC ekibi olarak 2013'e iyi günler diliyoruz.