WebRTC mengklik Firefox, Android, dan iOS

Ada banyak hal yang terjadi dengan WebRTC selama beberapa minggu terakhir. Waktunya mengupdate.

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

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

webkitRTCPeerConnection kini tersedia di Chrome stabil dan tanpa flag. Dukungan server TURN tersedia di Chrome 24 dan yang lebih baru. Ada demo yang sangat sederhana tentang penerapan RTCPeerConnection Chrome di simpl.info/pc dan aplikasi video chat yang bagus di apprtc.appspot.com. (Penjelasan singkat tentang nama: setelah beberapa iterasi, nama ini saat ini dikenal sebagai webkitRTCPeerConnection. Nama dan implementasi lainnya tidak digunakan lagi. Setelah proses standar 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 peer-to-peer data arbitrer dengan performa tinggi dan latensi rendah. API ini sederhana dan mirip dengan WebSocket, tetapi komunikasi terjadi langsung di antara browser, sehingga DataChannel dapat jauh lebih cepat daripada WebSocket meskipun server relay (TURN) diperlukan (saat 'hole punching' untuk mengatasi firewall dan NAT gagal).

DataChannel direncanakan untuk Chrome versi 25, di balik tanda – meskipun mungkin tidak ada di versi ini. Fitur ini hanya untuk eksperimen, mungkin tidak berfungsi sepenuhnya, dan komunikasi tidak akan dapat dilakukan dengan penerapan Firefox. DataChannel dalam versi selanjutnya akan lebih stabil dan akan diterapkan untuk memungkinkan interaksi dengan DataChannel di Firefox.

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

Berikut screenshot DataChannel yang berjalan di Firefox:

Screenshot DataChannel Firefox

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

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 penerapan Firefox tersedia di blog hacks.mozilla.org. Dukungan WebRTC dasar akan dirilis di Firefox 18 pada awal tahun 2013, dan dukungan direncanakan untuk fitur tambahan termasuk getUserMedia dan batasan createOffer/Answer, serta TURN (untuk mengizinkan komunikasi antar-browser di balik firewall).

Untuk informasi selengkapnya tentang WebRTC, lihat Memulai WebRTC. Bahkan ada buku WebRTC, yang tersedia dalam format cetak dan beberapa eBook.

Batasan Resolusi

Batasan telah diterapkan di Chrome 24 dan yang lebih baru. Nilai ini dapat digunakan untuk menetapkan nilai resolusi video untuk panggilan getUserMedia() dan RTCPeerConnection addStream().

Ada contoh di simpl.info/getusermedia/constraints. Coba berbagai batasan dengan menetapkan titik henti sementara dan menyesuaikan nilai.

Beberapa hal yang perlu diperhatikan... Batasan getUserMedia yang ditetapkan di satu tab browser memengaruhi batasan untuk semua tab yang dibuka setelahnya. Menetapkan nilai yang tidak diizinkan untuk batasan akan memberikan pesan error yang agak samar:

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

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

Tangkapan layar streaming

Tab Capture kini tersedia di saluran Chrome Dev. Hal ini memungkinkan pengambilan area tab yang terlihat sebagai streaming, yang kemudian dapat digunakan secara lokal, atau dengan addStream() RTCPeerConnection. Sangat berguna untuk transmisi layar dan berbagi halaman web. Untuk mengetahui informasi selengkapnya, lihat proposal Perekaman Konten Tab WebRTC.

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

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