Berbagi layar dengan WebRTC

Sam Dutton

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

Nah... ini adalah yang pertama: berbagi layar WebRTC.

Berikut screencast-nya: 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 tab browser. Jika ingin mencobanya, Anda memerlukan Chrome Canary, dan Anda harus mengaktifkan API Ekstensi Eksperimental di halaman about:flags.

Prototipe kami sangat mengandalkan demo appr.tc yang canggih dan, terus terang, ini agak rumit. Namun... ini adalah bukti konsep, dan berhasil.

Berikut cara kami melakukannya:

1. Saat pengguna mengklik ikon ekstensi ('tombol rekam' di samping kolom URL), skrip latar belakang ekstensi background.js, menambahkan iframe ke dirinya sendiri, yang src-nya adalah rtcshare.appspot.com. Di background.js, iframe hanya digunakan untuk mendapatkan nilai seperti token dan room_key. Kami sudah memberi tahu Anda bahwa ini adalah peretasan :^}! Ini adalah versi apprtc.appspot.com yang telah 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. Setelah iframe dimuat, background.js akan mendapatkan nilai dari iframe (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 memulai proses koneksi peer, dan pensinyalan dilakukan melalui rtcshare.appspot.com menggunakan XHR dan Channel API Google. Secara keseluruhan, cara kerjanya seperti demo apprtc, kecuali bahwa aliran 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 telah ditambahkan string kueri 'nomor ruang'. Tentu saja, URL ini dapat dibuka di komputer lain, di tempat lain, dan ITU mungkin menjadi 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 seberapa responsif dan stabilnya pengambilan dan berbagi tab tanpa 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 Mulai Cepat kami.

Selamat meretas -- dan salam hangat untuk tahun 2013 dari semua orang di HTML5R dan WebRTC.