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.&nbsp; Untuk membuat aplikasi ini peralatan yang kita dibutuhkan antara lain:
<ol>
<li>Browser yang support WebRTC (Rekomendasi Chrome atau Firefox).</li>
<li>API key PeerJS.</li>
<li>Node.js.</li>
<li>Text Editor.</li>
<li>Akses Internet.</li>
</ol>
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 <a title="peerjs" href="http://peerjs.com/">Sign-up</a>&nbsp;di website PeerJs untuk memperoleh API key, yang kemudian dapat digunakan untuk menghubungkan ke PeerServer Cloud. <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/1_2.jpg?1472614200355" alt="1_2" width="566" height="351" />
<h2>Membangun Aplikasi WebRTC Video Chat</h2>
<ol>
<ol>
<li>Install Node.js bisa download <a title="download node.js" href="https://nodejs.org/en/">disini</a>, untuk cara install bisa lihat&nbsp;<a title="install node.js" href="https://www.codepolitan.com/cara-install-nodejs">disini</a>.</li>
<li>Buat struktur direktorinya seperti berikut. <img src="https://www.codepolitan.com/uploads/image/source/17339/2_3.jpg?1472614924046" alt="2_3" /></li>
<li>Download library - library berikut untuk mempermudah kita dalam membuat aplikasi ini. Diantaranya sebagai berikut: 1.&nbsp;Picnic. 2. JQuery. 3.&nbsp;PeerJS. 4.&nbsp;Handlebars. Kamu dapat menginstal library melalui NPM. Buat package.json dan tambahkan berikut ini kedalam package.json.
<script src="//pastebin.com/embed_js/5QRG1gq4"></script>
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.<img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/3_2.jpg?1472616572844" alt="3_2" width="490" height="249" /> Setelah proses install selesai, didalam folder public&nbsp;akan muncul folder&nbsp;node_modules. Jika setelah diinstall didalam folder node_modules tidak terdapat library yang dibutuhkan, Kamu bisa download librarynya <a title="download library" href="https://www.dropbox.com/s/o4dj194ncpm4syx/Library.zip?dl=0">disini</a>.</li>
<li>Buat index.html nya saya sudah sediakan source codenya dibawah ini, didalamnya terdapat form login dan form untuk menginputkan pesan. Simpan pada folder public.
<script src="//pastebin.com/embed_js/2dN6Gk2W"></script>
</li>
<li>Buat CSS nya berinama style.css simpan pada folder css yang ada pada folder public.
<script src="//pastebin.com/embed_js/ukBbpGGD"></script>
CSS ini hanya sebagai tambahan pengaturan posisi dan sebagainya. Dan untuk pembagusan tampilan sudah dilakukkan oleh Picnic library yang telah kamu install tadi.</li>
<li>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.</li>
</ol>
</ol>
<h2>Penjelasan kode</h2>
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. 
<script src="//pastebin.com/embed_js/QcfmwYrS"></script>
Selanjutnya kita membuat koneksi untuk mengarah ke server. Ganti pada bagian key dengan API key kamu sendiri yang terdapat pada halaman peerjs.com. 
<script src="//pastebin.com/embed_js/hmeZzMcg"></script>
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.
<script src="//pastebin.com/embed_js/tkp5m6GM"></script>
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.
<script src="//pastebin.com/embed_js/FJ4EkLyU"></script>
Kemudian datang fungsi untuk mendapatkan video dari pengguna saat ini. Menggunakan navigator.getUserMedia fungsi yang menerima tiga argumen:
<ol>
<li>Sebuah objek yang mengandung opsi konfigurasi. Dalam hal ini kita set audio dan video &nbsp;atau true jadi baik kamera dan mikrofon di perangkat akan bekerja untuk menyediakan streaming video.</li>
<li>Fungsi success callback telah kita tentukan sebagai argumen untuk fungsi getVideo.</li>
<li>Fungsi error callback &nbsp;hanya memberitahu pengguna bahwa kesalahan telah terjadi.</li>
</ol>

<script src="//pastebin.com/embed_js/Q9FD9SAR"></script>

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.
<script src="//pastebin.com/embed_js/9wWg8sh7"></script>
Fungsi handleMessage menerima data yang dikirim oleh pengguna lain. Data ini digunakan untuk menggenerate HTML untuk daftar pesan.
<script src="//pastebin.com/embed_js/QQhXNQDx"></script>
Seperti yang kamu bayangkan, Fungsi sendMessage adalah fungsi yang digunakan untuk mengirim pesan ke pengguna lain.
<script src="//pastebin.com/embed_js/KcEBQ7Q7"></script>
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.
<script src="//pastebin.com/embed_js/jgKdWxae"></script>
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.
<script src="//pastebin.com/embed_js/J7YvbVVa"></script>
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.
<script src="//pastebin.com/embed_js/b7YtkHMk"></script>

<h2>Menjalankan Aplikasi</h2>
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.
<script src="//pastebin.com/embed_js/0EkGrywn"></script>
Buka CMD arahkan ke folder webrtc yang didalamnya terdapat file app-server.js.&nbsp;Kemudian ketikan npm install express pada cmd untuk menginstall library yang diperlukan. <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/6_2.jpg?1472634175447" alt="6_2" width="534" height="268" /> 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: <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/8_1.jpg?1472634784443" alt="8_1" width="624" height="279" />Jika saat membuka localhost:3000&nbsp;menampilkan seperti ini. <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/7_2.jpg?1472634890509" alt="7_2" width="543" height="303" />Berarti library yang dibutuhkan tidak terinstall atau tidak terdownload. Untuk mengatasinya silahkan install librarynya manual bisa download <a title="library" href="https://www.dropbox.com/s/o4dj194ncpm4syx/Library.zip?dl=0">disini</a>. Setelah didownload ekstrak filenya kedalam folder node_modules yang ada pada folder public. Kemudian reload&nbsp;halaman dan lihat hasilnya.&nbsp; <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/9_1.jpg?1472635323651" alt="9_1" width="500" height="333" />&nbsp;
<h2>Demo Aplikasi</h2>
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. <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/10_1.jpg?1472701497012" alt="10_1" width="575" height="307" /> Masuk ke localhost:3000 (node app-server.js dalam keadaan aktif)&nbsp;masukkan ID user&nbsp;yang akan dihubungi, kemudian isi username&nbsp;(Bebas) klik Login. Jika berhasil pada user yang dituju akan ada peringatan Connected Peer:... kemudian masukkan juga username&nbsp;pada user yang di tuju. <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/13.jpg?1472702364948" alt="13" width="582" height="310" /> Klik tombol Call&nbsp;untuk video call dan klik Send Message untuk mengirim pesan <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.codepolitan.com/uploads/image/source/17339/17.jpg?1472702518036" alt="17" width="590" height="319" />
<h2>Penutup</h2>
Sekian tutorial dari saya, kalau ada yang tidak jelas kamu bisa komen dibawah. Untuk seterusnya silahkan temen - temen kembangkan sendiri aplikasinya. Terima Kasih..
Referensi :&nbsp;<a title="referensi" href="https://www.sitepoint.com/webrtc-video-chat-application-peerjs/">www.sitepoint.com</a>

Membuat Aplikasi WebRTC Video Chat

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Aplikasi WebRTC Video Chat

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Mengenal TypeScript

Aplikasi CRUD Sederhana Menggunakan Intel XDK dan Database MySQL

Membuat Aplikasi Web ToDo Menggunakan IndexedDB

Membuat Aplikasi WebRTC Video Chat