GoMeet

Eksperimen saya terkait penggunaan WebRTC untuk membuat Video Conference Meeting seperti Google Meet dan Zoom.

Pendahuluan

WebRTC adalah teknologi web modern yang memungkinkan terjadinya komunikasi real time dalam sebuah aplikasi Web. Komunikasi yang dimaksud dapat berupa pengiriman video, suara maupun data lainnya.

WebRTC memungkinkan adanya pertukaran data langsung antara 2 client (peer to peer) tanpa memerlukan bantuan server untuk me-relay data. Namun, komunikasi P2P kadang terhalang oleh NAT atau Network Address Translation sehingga device tidak bisa berkomunikasi langsung karena tidak mengetahui IP yang bisa diakses secara langsung oleh device lain.

Disinilah perlunya peran STUN yang bisa mendapatkan informasi IP Publik yang bisa digunakan. Jika STUN gagal untuk dapat digunakan maka solusi lainnya adalah WebRTC akan menggunakan TURN sebagai server relay data.

Cara Kerja

Untuk memulai koneksi peer menggunakan WebRTC ada beberapa hal yang perlu dilakukan:

Melakukan Capturing Media

Client 1 memerlukan media yang akan dikirim ke client 2. Disini kita bisa menggunakan navigator.mediaDevices.getUserMedia untuk mengambil kamera dan audio dari device, atau navigator.mediaDevices.getDisplayMedia untuk mendapatkan screen capture dari device. Hasil capture media ini akan menghasilkan sebuah MediaStream.

Menginisialisasi WebRTC

Client 1 melakukan inisialisasi RTCPeerConnection. Dan menambahkan MediaStream yang sudah di-capture ke koneksi peer dengan addTrack.

Melakukan Signaling

Meskipun WebRTC dapat mengirimkan media secara langsung tanpa bantuan server. Kita memerlukan sebuah server untuk melakukan signaling (pertukaran informasi terkait bagaimana masing-masing Client dapat berkomunikasi). Sebenarnya, proses signaling ini pun secara teori juga dapat dilakukan tanpa menggunakan server. Seperti melakan generate Kode QR pada pengirim dan melakukan scanning Kode QR pada penerima.

Pada proyek ini saya menggunakan server WebSocket dengan bahasa Go.

• Membuat Offer

  Ketika Client 1 pertama kali melakukan inisialisasi koneksi peer dengan Client 2, Client 1 perlu melakukan negosiasi dengan Client 2. Apakah Client 2 akan menerima permintaan koneksi P2P dari Client 1.

  Di RTCPeerConnection yang sudah dibuat kita perlu melakukan handling event onnegotiationneeded. Di handler event tersebut kita perlu mengambil informasi SDP dari Client 1 (informasi terkait network dan lainnya) dengan memanggil createOffer dari RTCPeerConnection yang telah dibuat. Lalu memanggil setLocalDescription untuk menyimpan informasi SDP lokal kita ke dalam peer.

• Mengirimkan Offer

  Client 1 perlu mengirimkan informasi SDP nya ke Client 2. Di sinilah server signaling berguna. Informasi SDP Client 1 dikirimkan ke Client 2 melalui WebSocket.

• Menerima Offer

  Client 2 akan menerima informasi SDP Client 1 dari WebSocket. Lalu Client 2 juga melakukan inisialisasi RTCPeerConnection dan mengatur informasi SDP Client 1 ke peer dengan menggunakan fungsi setRemoteDescription.

• Membuat & Mengirim Answer

  Client 2 perlu mengirimkan informasi SDP nya juga ke Client 1. Dengan menggunakan fungsi createAnswer dari RTCPeerConnection dan mengatur local description peer-nya dengan menggunakan fungsi setLocalDescription.

  Selanjutnya answer tersebut perlu dikirimkan oleh Client 2 ke Client 1 dengan protokol signaling (WebSocket).

• Menerima Answer

  Client 1 menerima answer (informasi SDP) Client 2 dari WebSocket dan mengatur remote description di RTCPeerConnection Client 1 dengan setRemoteDescription.

• Meng-handle ICE Candidate

  Browser akan mencari tahu cara terbaik bagaimana client dapat terhubung satu sama lain. Masing-masing client perlu meng-handle event onicecandidate dari RTCPeerConnection.

  ICE Candidate yang sudah didapatkan perlu dikirim ke client lain menggunakan WebSocket.

  Client yang menerima informasi ICE Candidate dari WebSocket lalu memasukannya ke RTCPeerConnection dengan menggunakan fungsi addIceCandidate.

• Meng-handle Track Media

  Masing-masing client perlu meng-handle event ontrack untuk menyimpan MediaStream dari client lain sehingga dapat ditampilkan di Browser.

  Misalnya kita menerima video, kita dapat mengatur srcObject dari elemen video tersebut dari javascript menjadi MediaStream yang telah didapatkan.

Catatan

• Satu koneksi WebRTC bisa digunakan kedua belah pihak untuk mengirim dan menerima beberapa media dan data. Artinya anda cukup memanggil addTrack jika ingin menambahkan audio atau video yang dikirimkan ke client lainnya.
• Anda dapat melihat source code dari file gomeet-fe/src/lib/Rooms.Class.ts untuk melihat implementasi WebRTC ini.
• Screen Capture saat ini hanya tersedia di browser desktop.
• Hak akses ke kamera, audio dan Screen Capture hanya bisa dilakukan di secure connection atau https dan di localhost.
• Disini saya menggunakan STUN server dari google (bisa dilihat di gomeet-fe/src/lib/peer.ts) dan bekerja pada untuk koneksi P2P antar device dalam lokal network saya.
• Ketika menggunakan jaringan kartu SIM Mobile biasa (setidaknya untuk provider yang saya gunakan), saya harus menggunakan server TURN agar koneksi P2P dapat bekerja. Anda dapat mencoba server TURN gratis dari metered.ca

Teknologi

• Go
  • gorilla/websocket
  • gorilla/mux
  • joho/godotenv
• React
  • Axios
  • React Router
  • TailwindCSS

Referensi

• https://medium.com/securemeeting/getting-web-development-right-webrtc-tutorial-golang-and-react-2c87a6eaf3ff
• https://blog.logrocket.com/webrtc-video-streaming/