WebRTC ile ekran paylaşımı

Sam Dutton

Twitter GitHub Glitch Mastodon Ana Sayfa

Geçen hafta bildirdiğimiz gibi, eski arkadaşımız WebRTC ile son zamanlarda çok çıkarım oldu.

Öncelikle şunu bir kez daha hatırlatalım: WebRTC ekran paylaşımı.

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

Kodu da burada bulabilirsiniz: github.com/samdutton/rtcshare

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

Prototipimiz büyük ölçüde appr.tc demosuna dayanıyor. Açıkçası, bu basit bir demo! Ama... Bu, bir kavram kanıtıdır ve işe yarar.

Bu işlemi şu şekilde gerçekleştirdik:

1. Kullanıcı uzantı simgesini (adres çubuğunun yanındaki "kaydet düğmesi") tıkladığında, uzantının arka plan komut dosyası background.js, src rtcshare.appspot.com olmak üzere kendisine bir iframe ekler. background.js'de bu şablon 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 kanallı bir sürümüdür. Apprtc örneğinde olduğu gibi, rtcshare.appspot.com uzak istemci için de kullanılmıştı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 ondan 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 olduğunda (diğer bir deyişle, geçerli sekmenin canlı "videosu"), background.js benzerler bağlantısı işlemini başlatır ve XHR ve Google'ın Channel API'si kullanılarak rtcshare.appspot.com aracılığıyla sinyal gönderilir. Sonuç olarak apprtc demosu gibi çalışır. Tek fark, uzaktaki eşe iletilen video akışının getUserMedia() değil, chrome.tabCapture olduğunu gösterir.

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

1. Demo amacıyla, bu prototip uzantısı rtcshare.appspot.com tarafından sağlanan ve "oda numarası" sorgu dizesi eklenen URL ile yeni bir sekme açar. Elbette bu URL başka bir bilgisayarda, başka bir yerde açılabilir ve BU yararlı bir şeyin başlangıcı olabilir!

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

Ekran paylaşımı için pek çok ilginç kullanım alanı öngörüyoruz ve geliştirmenin bu ilk aşamasında bile, eklenti kullanmadan sekme yakalama ve paylaşmanın ne kadar duyarlı ve kararlı olduğundan etkilendik.

Her zaman olduğu gibi, bu uzantı ve genel olarak WebRTC API'leriyle ilgili yorumlarınızı da memnuniyetle karşılıyoruz. WebRTC hakkında daha fazla bilgi edinmek istiyorsanız HTML5 Rocks makalesine veya Hızlı Başlangıç Kılavuzumuza göz atın.

İyi bilgisayar korsanlığı! HTML5R ve WebRTC'deki herkesten 2013 yılının en iyi dileklerini dileriz!