{"id":20565645,"url":"https://github.com/puskar-roy/webrtc-basic-implementation","last_synced_at":"2026-05-07T19:07:28.369Z","repository":{"id":239056704,"uuid":"798371366","full_name":"Puskar-Roy/WebRTC-Basic-implementation","owner":"Puskar-Roy","description":"Basic Real-time video streaming using WebRTC and WebSocket with React.","archived":false,"fork":false,"pushed_at":"2024-05-16T11:06:10.000Z","size":330,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T19:51:48.375Z","etag":null,"topics":["reactjs","rtcpeerconnection","signalling-server","stun-server","webrtc","websockets"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Puskar-Roy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-09T16:37:47.000Z","updated_at":"2024-05-16T11:06:13.000Z","dependencies_parsed_at":"2025-01-16T19:50:38.730Z","dependency_job_id":"c595cef6-eaf1-4e5e-9fc0-c2fbab9cff56","html_url":"https://github.com/Puskar-Roy/WebRTC-Basic-implementation","commit_stats":null,"previous_names":["puskar-roy/webrtc-basic-implementation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Puskar-Roy%2FWebRTC-Basic-implementation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Puskar-Roy%2FWebRTC-Basic-implementation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Puskar-Roy%2FWebRTC-Basic-implementation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Puskar-Roy%2FWebRTC-Basic-implementation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Puskar-Roy","download_url":"https://codeload.github.com/Puskar-Roy/WebRTC-Basic-implementation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242179250,"owners_count":20084940,"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":["reactjs","rtcpeerconnection","signalling-server","stun-server","webrtc","websockets"],"created_at":"2024-11-16T04:38:30.486Z","updated_at":"2026-05-07T19:07:23.327Z","avatar_url":"https://github.com/Puskar-Roy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\r\n\r\n\u003cbr /\u003e\r\n\u003cdiv align=\"center\"\u003e\r\n  \r\n \r\n\u003ca href=\"https://github.com/Puskar-Roy/Attendance-System---Backend\"\u003e\r\n    \u003cimg src=\"https://webrtc.github.io/webrtc-org/assets/images/webrtc-logo-vert-retro-255x305.png\" alt=\"Logo\" width=\"120\" height=\"150\"\u003e\r\n  \u003c/a\u003e\r\n  \r\n\u003ch3 align=\"center\"\u003eWebRTC Basic implementation 💻 \u003c/h3\u003e\r\n\r\n![webrtc](./docs/assets/Web-RTC-Diagram.png)\r\n  \r\n\u003c/div\u003e\r\n\r\n##### Note: _WebRTC is the core/only protocol that lets you do real time media communication from inside a browser._\r\n\r\n## About This Project 🌟\r\n\r\nBasic Real-time video streaming using WebRTC and WebSocket with React.\r\n\r\n## Architecture of WebRTC 💻\r\n\r\n### P2P\r\n\r\nWebRTC is a peer to peer protocol. This means the you directly send your media over to the other person without the need of a central server\r\n\r\n![bingoctfgogreenlandingpage](./docs//assets/p2p.png)\r\n\r\n##### Note: _You do need a central server for signalling and sometimes for sending media as well_\r\n\r\n\r\n### Signalling server\r\n\r\nBoth the browsers need to exchange their address before they can start talking to each other. A signaling server is used for that.\r\n\r\nIt is usually a websocket server but can be anything (http)\r\n\r\n\r\n![bingoctfgogreenlandingpage](./docs//assets/signallingserver.png)\r\n\r\n\r\n### Stun (Session Traversal Utilities for NAT)\r\n\r\nIt gives you back your publically accessable IPs. It shows you how the world sees you\r\n\r\nYou can check here\r\n\r\n```bash\r\n https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/\r\n```\r\n\r\n\r\n![bingoctfgogreenlandingpage](./docs//assets/stun.png)\r\n\r\n\r\n### Ice candidates\r\n\r\nICE (Interactive Connectivity Establishment) candidates are potential networking endpoints that WebRTC uses to establish a connection between peers. Each candidate represents a possible method for two devices (peers) to communicate, usually in the context of real-time applications like video calls, voice calls, or peer-to-peer data sharing.\r\n\r\n\r\n\u003c!-- ![bingoctfgogreenlandingpage](./docs//assets/stun.png) --\u003e\r\n\r\n\r\n### Turn server\r\n\r\nA lot of times, your network doesn’t allow media to come in from browser 2 . This depends on how restrictive your network is \r\n\r\nSince the ice candidate is discovered by the stun server, your network might block incoming data from browser 2 and only allow it from the stun server\r\n\r\n\r\n![bingoctfgogreenlandingpage](./docs//assets/turn.png)\r\n\r\n\r\n### Offer\r\n\r\nThe process of the first browser (the one initiating connection) sending their ice candidates to the other side.\r\n\r\n### Answer\r\n\r\nThe other side returning their ice candidates is called the answer.\r\n\r\nThe process of the first browser (the one initiating connection) sending their ice candidates to the other side.\r\n\r\n### SDP - Session description protocol\r\n\r\nA single file that contains all your \r\nice candidates\r\nwhat media you want to send, what protocols you’ve used to encode the media\r\n\r\nThis is the file that is sent in the offer and received in the answer\r\n\r\nExample - \r\n```bash\r\n    v=0\r\n    o=- 423904492236154649 2 IN IP4 127.0.0.1\r\n    s=-\r\n    t=0 0\r\n    m=audio 49170 RTP/AVP 0\r\n    c=IN IP4 192.168.1.101\r\n    a=rtpmap:0 PCMU/8000\r\n    a=ice-options:trickle\r\n    a=candidate:1 1 UDP 2122260223 192.168.1.101 49170 typ host\r\n    a=candidate:2 1 UDP 2122194687 10.0.1.1 49171 typ host\r\n    a=candidate:3 1 UDP 1685987071 93.184.216.34 49172 typ srflx raddr     10.0.1.1 rport 49171\r\n    a=candidate:4 1 UDP 41819902 10.1.1.1 3478 typ relay raddr 93.184.    216.34 rport 49172\r\n```\r\n\r\n### RTCPeerConnection (pc, peer connection)\r\n\r\nThis is a class that the browser provides you with which gives you access to the sdp, lets you create answers / offers , lets you send media.\r\n\r\nThis class hides all the complexity of webrtc from the developer\r\n\r\n```bash\r\n   https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection\r\n```\r\n\r\n## Getting Started 🚀\r\n\r\n### Prerequisites\r\n\r\nBefore you begin contributing to this project, make sure you have the following set up:\r\n\r\n- [Node.js](https://nodejs.org/): A JavaScript runtime.\r\n- [npm](https://www.npmjs.com/): The Node.js package manager.\r\n\r\n\r\n\r\n\r\n### Run This ⌨️\r\n\r\n1. **Clone the Repository:**\r\n   ```bash\r\n   git clone https://github.com/Puskar-Roy/WebRTC-Basic-implementation\r\n   ```\r\n2. **Install Dependencies:**\r\n   ```bash\r\n    #frontend\r\n    cd frontend/npm install\r\n\r\n    #backend\r\n    cd backend/npm install\r\n   ```\r\n\r\n3. **Build and Run This Project:**\r\n\r\n   ```bash\r\n   #for frontend\r\n   cd frontend/npm run dev\r\n\r\n\r\n   #for backend\r\n   cd backend/npm run build\r\n   cd backend/npm start\r\n   ```\r\n\r\n\r\n\r\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\r\n\r\n### Puskar Roy🖋️\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuskar-roy%2Fwebrtc-basic-implementation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpuskar-roy%2Fwebrtc-basic-implementation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuskar-roy%2Fwebrtc-basic-implementation/lists"}