Membuat Aplikasi WebRTC Video Chat

Sebelumnya, apa itu WebRTC?
WebRTC (Web Real-Time Communications) merupakan sebuah proyek open-source yang memungkinkan untuk dilakukannya komunikasi real-time melalui web browser. Teknologi ini berjalan diatas backbone web browser modern. Komunikasi tersebut nantinya terdiri dari pemanfaatan suara, video dan konektivitas menggunakan Javascript API tanpa plugin tambahan.
Dengan munculnya WebRTC dan peningkatan kapasitas browser untuk menangani komunikasi peer-to-peer secara real-time, mempermudah dalam membangun aplikasi real-time dari pada sebelumnya. 
Untuk membuat aplikasi ini peralatan yang kita dibutuhkan antara lain:

1. Browser yang support WebRTC (Rekomendasi Chrome atau Firefox).
2. API key PeerJS.
3. Node.js.
4. Text Editor.
5. Akses Internet.

Dalam tutorial ini kita akan menggunakan PeerJS. Sebelum kita melanjutkan, penting untuk kita memahami alat utama yang akan kita gunakan. PeerJS adalah library JavaScript yang menyederhanakan data WebRTC yang berupa peer-to-peer, video, dan panggilan audio. Jadi, dengan menggunakan PeerJS akan memudahkan kita dalam membuat aplikasinya.

Sebelum mulai membuat langkah awal yang kita lakukan adalah Sign-up di website PeerJs untuk memperoleh API key, yang kemudian dapat digunakan untuk menghubungkan ke PeerServer Cloud.

Membangun Aplikasi WebRTC Video Chat

1. Install Node.js bisa download disini, untuk cara install bisa lihat disini.
2. Buat struktur direktorinya seperti berikut.
   
3. Download library - library berikut untuk mempermudah kita dalam membuat aplikasi ini. Diantaranya sebagai berikut:
   1. Picnic.
   2. JQuery.
   3. PeerJS.
   4. Handlebars.
   Kamu dapat menginstal library melalui NPM. Buat package.json dan tambahkan berikut ini kedalam package.json. Kemudian simpan kedalam folder public yang ada pada htdocs yang telah kamu buat sebelumnya untuk lebih jelas lihat strukturnya tadi. Setelah itu buka cmd, kemudian arahkan ke folder yang terdapat package.json tadi. Jalankan npm install express untuk menginstall semua library.
   Setelah proses install selesai, didalam folder public akan muncul folder node_modules.
   Jika setelah diinstall didalam folder node_modules tidak terdapat library yang dibutuhkan, Kamu bisa download librarynya disini.
4. Buat index.html nya saya sudah sediakan source codenya dibawah ini, didalamnya terdapat form login dan form untuk menginputkan pesan. Simpan pada folder public.
5. Buat CSS nya berinama style.css simpan pada folder css yang ada pada folder public. CSS ini hanya sebagai tambahan pengaturan posisi dan sebagainya. Dan untuk pembagusan tampilan sudah dilakukkan oleh Picnic library yang telah kamu install tadi.
6. Buat file javascriptnya beri nama script.js simpan pada folder js yang ada pada folder public. Didalamnya terdapat logika untuk aplikasi ini, seperti login, memulai panggilan dan menangkap video pengguna.

Penjelasan kode

Mari kita lihat kodenya kita mulai dengan mendeklarasikan beberapa variabel dimulai dengan variable message yang dideklarasikan sebagai array, yang nantinya akan digunakan untuk menyimpan pesan yang dikirim oleh masing-masing pengguna, untuk peer_id digunakan untuk menyimpan ID dari pengguna, name digunakan untuk menyimpan nama pengguna saat ini dan conn untuk menyimpan koneksi pengguna saat ini. Kita juga mengkompilasi messages menggunakan Handlebars dan menyimpan hasilnya dalam messages_template.
Selanjutnya kita membuat koneksi untuk mengarah ke server. Ganti pada bagian key dengan API key kamu sendiri yang terdapat pada halaman peerjs.com.
Bila sambungan telah berhasil diinisialisasi pada server, event open akan mengarahkannya pada peer objek. Pada titik ini ID pengguna saat ini menjadi tersedia dan kita masukkan ke halaman. Pengguna ini kemudian dapat memberikan ID ini ke pengguna lain sehingga mereka dapat terhubung. Baris berikutnya menambahkan getUserMedia properti ke objek navigator, nilai ini akan menjadi tambahan dari getUserMedia di browser. Untuk browser WebKit seperti Chrome atau Safari, akan menjadi webkitGetUserMedia. Untuk Firefox, ini akan menjadi mozGetUserMedia. Untuk browser lain yang menggunakan UserMedia API, hanya akan menjadi getUserMedia. Kemudian datang fungsi untuk mendapatkan video dari pengguna saat ini. Menggunakan navigator.getUserMedia fungsi yang menerima tiga argumen:

1. Sebuah objek yang mengandung opsi konfigurasi. Dalam hal ini kita set audio dan video  atau true jadi baik kamera dan mikrofon di perangkat akan bekerja untuk menyediakan streaming video.
2. Fungsi success callback telah kita tentukan sebagai argumen untuk fungsi getVideo.
3. Fungsi error callback  hanya memberitahu pengguna bahwa kesalahan telah terjadi.

Setelah pengguna mengklik Log In , kita menggunakan PeerJS untuk menghubungkan mereka dengan pengguna lain. ID yang mereka gunakan telah ditentukan. metadata objek digunakan untuk melewatkan data kustom untuk peer. Dalam hal ini kita lewatkan di username sehingga kita bisa menampilkannya di sisi peer. Setelah sambungan dibuat, event data ditrigger setiap kali pesan dikirim ke pengguna saat ini. Untuk kenyamanan, kita akan merujuk pada pengguna saat ini (orang yang memulai koneksi) sebagai Pengguna A, dan peer (orang yang sedang terhubung) sebagai Pengguna B. Fungsi handleMessage menerima data yang dikirim oleh pengguna lain. Data ini digunakan untuk menggenerate HTML untuk daftar pesan. Seperti yang kamu bayangkan, Fungsi sendMessage adalah fungsi yang digunakan untuk mengirim pesan ke pengguna lain. Ketika pengguna memulai panggilan, kita menggunakan metode call yang disediakan oleh peer objek untuk memanggil pengguna lain. Hasil pemanggilan fungsi ini mengembalikan sebuah objek di mana kita dapat mendengarkan untuk event stream. Event ini akan diberhentikan ketika video dari remote peer menjadi tersedia untuk pengguna yang memulai panggilan. Ketika pengguna lain membuat panggilan ke remote peer, event call ditrigger. Dari sini kita menjalankan fungsi onReceiveCall untuk menerima panggilan. Jika Anda ingin menambahkan fungsi tambahan untuk menerima panggilan, disini tempat yang cocok untuk menambahkannya. Fungsi onReceiveCall menerima call objek lain sebagai argumen. call objek method answer dipanggil untuk melanjutkan proses dengan panggilan. dia menerima umpan video dari pengguna saat ini sebagai argumen. Ketika video dari remote peer menjadi tersedia, event stream ditrigger. Dari sana kita bisa memanggil fungsi onReceiveStream untuk setup video remote peer.

Menjalankan Aplikasi

Untuk menjalankan WebRTC aplikasi video chat, Anda harus memiliki sebuah server yang akan melayani file yang telah kita buat sebelumnya pada bagian sisi klien. Hal ini karena API getUserMedia tidak akan bekerja dengan hanya membuka index.html file di browser. Ada sejumlah cara untuk melakukan hal ini. Dan salah satunya saya akan menggunakan Node untuk menjalankannya.
Buat file app-server.js pada folder webrtc tambahkan kode berikut. Buka CMD arahkan ke folder webrtc yang didalamnya terdapat file app-server.js. Kemudian ketikan npm install express pada cmd untuk menginstall library yang diperlukan.

Kemudian kamu dapat menjalankan aplikasi dengan mengetikan perintah node app-server.js pada cmd. Dan kamu dapat mengaksesnya dengan pergi ke: http://localhost:3000
Maka hasilnya akan seperti ini:
Jika saat membuka localhost:3000 menampilkan seperti ini.
Berarti library yang dibutuhkan tidak terinstall atau tidak terdownload. Untuk mengatasinya silahkan install librarynya manual bisa download disini. Setelah didownload ekstrak filenya kedalam folder node_modules yang ada pada folder public. Kemudian reload halaman dan lihat hasilnya. 
 

Demo Aplikasi

Pada Browser Buka 2 Window. Jangan memakai 2 browser yang berbeda karena kamera laptop atau pc cuman menyediakan 1 device saja jadi pasti salah satu browser akan muncul peringatan atau gambar tidak muncul.

Masuk ke localhost:3000 (node app-server.js dalam keadaan aktif) masukkan ID user yang akan dihubungi, kemudian isi username (Bebas) klik Login. Jika berhasil pada user yang dituju akan ada peringatan Connected Peer:... kemudian masukkan juga username pada user yang di tuju.

Klik tombol Call untuk video call dan klik Send Message untuk mengirim pesan

Penutup

Sekian tutorial dari saya, kalau ada yang tidak jelas kamu bisa komen dibawah. Untuk seterusnya silahkan temen - temen kembangkan sendiri aplikasinya. Terima Kasih..

Referensi : www.sitepoint.com