Berbagi layar dengan WebRTC

Sam Dutton

Twitter GitHub Glitch Mastodon Halaman beranda

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

Nah... ada yang satu lagi: berbagi layar WebRTC.

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

Dan berikut ini kodenya: github.com/samdutton/rtcshare

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

Prototipe kami sangat bergantung pada demo appr.tc yang canggih dan, sejujurnya, ini adalah semacam peretasan! Tapi... itu adalah bukti konsep, dan berhasil.

Begini 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, src di antaranya adalah rtcshare.appspot.com. Di background.js, skrip ini hanya digunakan untuk mendapatkan nilai seperti token dan room_key. Kami sampaikan bahwa ini adalah peretasan :^}! Ini adalah versi apprtc.appspot.com yang dipotong dan disalurkan. Seperti pada 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 (yang dihasilkan oleh aplikasi rtcshare.appspot.com) dan memanggil chrome.tabCapture.capture() untuk mulai merekam live stream dari 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 tab yang aktif), background.js akan memulai proses koneksi pembanding, dan pemberian sinyal dilakukan melalui rtcshare.appspot.com menggunakan XHR dan Channel API Google. Secara keseluruhan, pengujian 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 akan membuka tab baru dengan URL yang disediakan oleh rtcshare.appspot.com, yang telah ditambahi string kueri 'nomor kamar'. 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 pengambilan dan berbagi tab bebas plugin yang responsif.

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

Selamat meretas -- dan semoga terbaik tahun 2013 dari semua orang di HTML5R dan WebRTC!