Berbagi layar dengan WebRTC

Sam Dutton

Seperti yang kami laporkan minggu lalu, ada banyak hal yang terjadi akhir-akhir ini dengan WebRTC, teman lama kita.

Nah... berikut adalah fitur pertama lainnya: berbagi layar WebRTC.

Berikut adalah screencast: youtube.com/watch?v=tD0QtBUZsF4

Berikut kodenya: github.com/samdutton/rtcshare

Pada dasarnya, kami telah membuat ekstensi Chrome eksperimental yang menggunakan RTCPeerConnection dan chrome.tabCapture untuk membagikan 'video' live dari tab browser. Jika ingin mencobanya, Anda memerlukan Chrome Canary, dan harus mengaktifkan API Ekstensi Eksperimental pada halaman about:flags.

Prototipe kami sangat bergantung pada demo appr.tc yang hebat dan, sejujurnya, ini sedikit hack. Tapi... itu adalah bukti konsep, dan cara ini berhasil.

Berikut cara kami melakukannya:

1. Saat pengguna mengklik ikon ekstensi ('tombol rekam' di samping kolom URL), skrip latar belakang ekstensi background.js akan menambahkan iframe ke dirinya sendiri, yang src-nya adalah rtcshare.appspot.com. Di background.js, skrip ini hanya digunakan untuk mendapatkan nilai seperti token dan room_key. Kami sudah bilang ini adalah hack :^}! Ini adalah versi apprtc.appspot.com yang dipotong dan disalurkan. Seperti contoh apprtc, rtcshare.appspot.com juga digunakan untuk klien jarak jauh.

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. Saat iframe dimuat, background.js akan mendapatkan nilai darinya (dibuat oleh aplikasi rtcshare.appspot.com) dan memanggil chrome.tabCapture.capture() untuk mulai merekam live stream tab saat ini.

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. Setelah live stream tersedia (dengan kata lain, 'video' live dari tab saat ini), background.js akan memulai proses koneksi peer, dan sinyal dilakukan melalui rtcshare.appspot.com menggunakan XHR dan Channel API Google. Secara keseluruhan, ini berfungsi seperti demo apprtc, kecuali bahwa streaming video yang dikomunikasikan ke peer jarak jauh berasal dari chrome.tabCapture, bukan getUserMedia().

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

1. Untuk tujuan demo, ekstensi prototipe ini membuka tab baru dengan URL yang disediakan oleh rtcshare.appspot.com, yang memiliki string kueri 'nomor ruang' yang ditambahkan. Tentu saja, URL ini dapat dibuka di komputer lain, di tempat lain, dan ITU mungkin merupakan awal dari sesuatu yang berguna!

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

Kami membayangkan banyak kasus penggunaan yang menarik untuk berbagi layar dan, bahkan pada tahap awal pengembangan ini, kami terkesan dengan betapa responsif dan stabilnya menangkap dan berbagi tab bebas plugin.

Seperti biasa, kami menerima komentar Anda: tentang ekstensi ini dan tentang WebRTC API secara umum. Jika Anda ingin mempelajari WebRTC lebih lanjut, lihat artikel HTML5 Rocks atau Panduan Memulai Cepat kami.

Selamat mencoba -- dan semoga sukses di tahun 2013 dari semua orang di HTML5R dan WebRTC.