WebRTC mengklik Firefox, Android, dan iOS

Ada banyak hal yang terjadi dengan WebRTC selama beberapa minggu terakhir. Saatnya memperbarui!

Secara khusus, kami sangat senang melihat WebRTC hadir di berbagai browser dan platform.

getUserMedia kini tersedia di Chrome tanpa bendera, begitu juga Opera dan Firefox Nightly/Aurora (meskipun untuk Firefox, Anda harus menyetel preferensi). Lihat demo lintas browser getUserMedia di simpl.info/gum - dan lihat contoh luar biasa Chris Wilson tentang penggunaan getUserMedia sebagai input untuk Audio Web.

webkitRTCPeerConnection kini berada di Chrome stabil dan tanpa flag. Dukungan server TURN tersedia di Chrome 24 dan yang lebih baru. Ada demo yang sangat sederhana untuk penerapan RTCPeerConnection Chrome di simpl.info/pc dan aplikasi video chat yang bagus di apprtc.appspot.com. (Penjelasan tentang nama tersebut: setelah beberapa kali iterasi, nama ini dikenal sebagai webkitRTCPeerConnection. Nama dan implementasi lainnya tidak digunakan lagi. Ketika proses standar telah stabil, awalan webkit akan dihapus.)

WebRTC kini juga telah diimplementasikan untuk desktop di Firefox Nightly dan Aurora, serta untuk iOS dan Android melalui browser Bowser Ericsson.

DataChannel

DataChannel adalah WebRTC API untuk komunikasi data arbitrer yang berperforma tinggi dan berlatensi rendah. API-nya mirip dengan WebSocket - tetapi komunikasi terjadi langsung antar browser, sehingga DataChannel bisa jauh lebih cepat daripada WebSocket bahkan jika server relai (TURN) diperlukan (ketika 'hole punching' untuk mengatasi firewall dan NAT gagal).

DataChannel direncanakan untuk Chrome versi 25, di balik flag – meskipun mungkin melewatkan versi ini. Ini hanya untuk eksperimen, mungkin tidak berfungsi sepenuhnya, dan komunikasi tidak mungkin dilakukan dengan implementasi Firefox. DataChannel di versi terbaru seharusnya lebih stabil dan akan diterapkan sehingga memungkinkan interaksi dengan DataChannel di Firefox.

Firefox Nightly/Aurora mendukung mozGetUserMedia, mozRTCPeerConnection, dan DataChannel (tetapi jangan lupa untuk menyetel preferensi about:config)

Berikut screenshot DataChannel yang berjalan di Firefox:

Screenshot DataChannel Firefox

Demo ini tersedia di http://mozilla.github.com/webrtc-landing/data_test.html. Berikut adalah cuplikan kodenya:

pc1.onconnection = function() {
    log("pc1 onConnection ");
    dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
    dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
    log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
    channel = dc1;
    channel.binaryType = "blob";
    log("pc1 new binarytype = " + dc1.binaryType);

    // Since we create the datachannel, don't wait for onDataChannel!
    channel.onmessage = function(evt) {
    if (evt.data instanceof Blob) {
        fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
    } else {
        fancy_log('pc2 said: ' + evt.data, "blue");
    }
    }
    channel.onopen = function() {
    log("pc1 onopen fired for " + channel);
    channel.send("pc1 says Hello...");
    log("pc1 state: " + channel.state);
    }
    channel.onclose = function() {
    log("pc1 onclose fired");
    };
    log("pc1 state:" + channel.readyState);
        }

Informasi dan demo selengkapnya untuk implementasi Firefox tersedia di blog hacks.mozilla.org. Dukungan WebRTC dasar akan dirilis di Firefox 18 pada awal tahun 2013, dan dukungan tersebut direncanakan untuk fitur tambahan termasuk getUserMedia dan batasan createOffer/Answer, serta TURN (untuk memungkinkan komunikasi antar-browser di balik firewall).

Untuk mengetahui informasi selengkapnya tentang WebRTC, lihat Mulai Menggunakan WebRTC. Bahkan ada buku WebRTC, yang tersedia dalam versi cetak dan beberapa format eBook.

Batasan Penyelesaian

Batasan telah diterapkan di Chrome 24 dan yang lebih baru. Metode ini dapat digunakan untuk menyetel nilai resolusi video untuk panggilan getUserMedia() dan RTCPeerConnectionKoneksi addStream().

Lihat contohnya di simpl.info/getusermedia/constraints. Bereksperimenlah dengan batasan yang berbeda dengan menetapkan titik henti sementara dan mengubah nilai.

Sedikit kepingan... Batasan getUserMedia yang ditetapkan dalam satu tab browser memengaruhi batasan untuk semua tab yang dibuka setelahnya. Menetapkan nilai yang tidak diizinkan untuk batasan akan menampilkan pesan error yang cukup samar:

navigator.getUserMedia error:  NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

Demikian pula, error akan terjadi jika Anda mencoba menggunakan getUserMedia dari sistem file lokal, bukan dari server.

Screenshot streaming

Tab Capture kini tersedia di saluran Chrome Dev. Hal ini memungkinkan Anda menangkap area tab yang terlihat sebagai aliran, yang kemudian dapat digunakan secara lokal, atau dengan addStream() RTCPeerConnection. Sangat berguna untuk {i>sceencasting<i} dan berbagi laman web. Untuk informasi selengkapnya, lihat proposal Pengambilan Konten Tab WebRTC.

Beri tahu kami dengan mengomentari pembaruan ini: kami ingin mengetahui apa yang Anda lakukan dengan API ini.

...dan jangan lupa untuk melaporkan bug yang Anda temukan di chromiumbugs.appspot.com.