{"id":15724113,"url":"https://github.com/hsnfirdaus/gomeet","last_synced_at":"2026-05-09T01:10:57.959Z","repository":{"id":254293456,"uuid":"846092410","full_name":"hsnfirdaus/gomeet","owner":"hsnfirdaus","description":"Contoh penggunaan WebRTC untuk video conference","archived":false,"fork":false,"pushed_at":"2024-08-22T14:17:18.000Z","size":233,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T06:19:45.373Z","etag":null,"topics":["golang","google-meet","meet","typescript","video-conferencing","webrtc","webrtc-demos","webrtc-video","websocket","zoom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsnfirdaus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-22T14:12:26.000Z","updated_at":"2024-11-08T05:41:26.000Z","dependencies_parsed_at":"2024-08-22T16:24:44.211Z","dependency_job_id":null,"html_url":"https://github.com/hsnfirdaus/gomeet","commit_stats":null,"previous_names":["hsnfirdaus/gomeet"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnfirdaus%2Fgomeet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnfirdaus%2Fgomeet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnfirdaus%2Fgomeet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnfirdaus%2Fgomeet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsnfirdaus","download_url":"https://codeload.github.com/hsnfirdaus/gomeet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246399788,"owners_count":20770907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["golang","google-meet","meet","typescript","video-conferencing","webrtc","webrtc-demos","webrtc-video","websocket","zoom"],"created_at":"2024-10-03T22:14:49.252Z","updated_at":"2026-05-09T01:10:52.918Z","avatar_url":"https://github.com/hsnfirdaus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GoMeet\n\nEksperimen saya terkait penggunaan [WebRTC](https://webrtc.org/) untuk membuat Video Conference Meeting seperti Google Meet dan Zoom.\n\n![Screenshoot GoMeet](screenshoot.png)\n\n## Pendahuluan\n\n[WebRTC](https://webrtc.org/) 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.\n\nWebRTC 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.\n\nDisinilah perlunya peran [STUN](https://en.wikipedia.org/wiki/STUN) yang bisa mendapatkan informasi IP Publik yang bisa digunakan. Jika STUN gagal untuk dapat digunakan maka solusi lainnya adalah WebRTC akan menggunakan [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT) sebagai server _relay_ data.\n\n## Cara Kerja\n\nUntuk memulai koneksi _peer_ menggunakan WebRTC ada beberapa hal yang perlu dilakukan:\n\n### Melakukan _Capturing_ Media\n\nClient 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`.\n\n### Menginisialisasi WebRTC\n\nClient 1 melakukan inisialisasi `RTCPeerConnection`. Dan menambahkan `MediaStream` yang sudah di-_capture_ ke koneksi _peer_ dengan `addTrack`.\n\n### Melakukan _Signaling_\n\nMeskipun 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.\n\nPada proyek ini saya menggunakan server WebSocket dengan bahasa Go.\n\n- #### Membuat _Offer_\n\n  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_.\n\n  Di `RTCPeerConnection` yang sudah dibuat kita perlu melakukan _handling event_ `onnegotiationneeded`. Di _handler event_ tersebut kita perlu mengambil informasi [SDP](https://en.wikipedia.org/wiki/Session_Description_Protocol) 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_.\n\n- #### Mengirimkan _Offer_\n\n  _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.\n\n- #### Menerima _Offer_\n\n  _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`.\n\n- #### Membuat \u0026 Mengirim _Answer_\n\n  _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`.\n\n  Selanjutnya _answer_ tersebut perlu dikirimkan oleh _Client 2_ ke _Client 1_ dengan protokol _signaling_ (WebSocket).\n\n- #### Menerima _Answer_\n\n  _Client 1_ menerima _answer_ (informasi SDP) _Client 2_ dari WebSocket dan mengatur _remote description_ di `RTCPeerConnection` _Client 1_ dengan `setRemoteDescription`.\n\n- #### Meng-_handle_ ICE Candidate\n\n  _Browser_ akan mencari tahu cara terbaik bagaimana _client_ dapat terhubung satu sama lain. Masing-masing _client_ perlu meng-_handle_ _event_ `onicecandidate` dari `RTCPeerConnection`.\n\n  ICE Candidate yang sudah didapatkan perlu dikirim ke _client_ lain menggunakan WebSocket.\n\n  _Client_ yang menerima informasi ICE Candidate dari WebSocket lalu memasukannya ke `RTCPeerConnection` dengan menggunakan fungsi `addIceCandidate`.\n\n- #### Meng-_handle_ Track Media\n\n  Masing-masing client perlu meng-_handle_ _event_ `ontrack` untuk menyimpan `MediaStream` dari _client_ lain sehingga dapat ditampilkan di _Browser_.\n\n  Misalnya kita menerima _video_, kita dapat mengatur `srcObject` dari elemen _video_ tersebut dari javascript menjadi `MediaStream` yang telah didapatkan.\n\n### Catatan\n\n- 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.\n- Anda dapat melihat _source code_ dari file [gomeet-fe/src/lib/Rooms.Class.ts](gomeet-fe/src/lib/Rooms.Class.ts) untuk melihat implementasi WebRTC ini.\n- _Screen Capture_ saat ini hanya tersedia di _browser desktop_.\n- Hak akses ke kamera, audio dan _Screen Capture_ hanya bisa dilakukan di _secure connection_ atau https dan di localhost.\n- Disini saya menggunakan STUN server dari google (bisa dilihat di [gomeet-fe/src/lib/peer.ts](gomeet-fe/src/lib/peer.ts)) dan bekerja pada untuk koneksi P2P antar device dalam lokal network saya.\n- 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](https://www.metered.ca/tools/openrelay/)\n\n## Teknologi\n\n- Go\n  - [gorilla/websocket](https://github.com/gorilla/websocket)\n  - [gorilla/mux](https://github.com/gorilla/mux)\n  - [joho/godotenv](https://github.com/joho/godotenv)\n- React\n  - [Axios](https://github.com/axios/axios)\n  - [React Router](https://github.com/remix-run/react-router)\n  - [TailwindCSS](https://github.com/tailwindlabs/tailwindcss)\n\n## Referensi\n\n- [https://medium.com/securemeeting/getting-web-development-right-webrtc-tutorial-golang-and-react-2c87a6eaf3ff](https://medium.com/securemeeting/getting-web-development-right-webrtc-tutorial-golang-and-react-2c87a6eaf3ff)\n- [https://blog.logrocket.com/webrtc-video-streaming/](https://blog.logrocket.com/webrtc-video-streaming/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnfirdaus%2Fgomeet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsnfirdaus%2Fgomeet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnfirdaus%2Fgomeet/lists"}