The latest articles on Forem by Somik Datta (@somikdatta). https://forem.com/somikdatta https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F449947%2F9cf2885d-62cc-4151-ab6c-d61a87084066.jpeg https://forem.com/somikdatta en Somik Datta Thu, 20 Aug 2020 13:09:51 +0000 https://forem.com/somikdatta/video-calling-and-screen-sharing-with-react-webrtc-146a https://forem.com/somikdatta/video-calling-and-screen-sharing-with-react-webrtc-146a <p>With the advent of a huge push in video calling technologies due to Covid-19, I started growing ever so curious about how all of it works. As I looked more and more into it, I discovered a lot, learned a lot and wanted to build an application for myself!</p> <p>May I present to you <strong>Cuckoo: Free and anonymous video calling</strong> <br> <em>drumrolls</em> please 😂</p> <h2> Technologies used: </h2> <ul> <li> <a href="https://www.webrtc.org" rel="noopener noreferrer">WebRTC</a>- facilitates real time data communication between two peers. </li> <li> <a href="https://www.npmjs.com/package/simple-peer" rel="noopener noreferrer">simple-peer</a>- Simple-peer library acts as a wrapper over WebRTC and makes it simpler.</li> <li> <a href="https://www.socket.io" rel="noopener noreferrer">socket-io</a> as a wrapper over web sockets.</li> </ul> <h2> Features </h2> <ul> <li>Audio call</li> <li>Video call</li> <li>Screen sharing</li> </ul> <p>Try it live: <a href="https://cuckooapp.herokuapp.com" rel="noopener noreferrer">live demo</a></p> <p>This project is available at GitHub - <br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/somikdatta" rel="noopener noreferrer"> somikdatta </a> / <a href="https://github.com/somikdatta/cuckoo" rel="noopener noreferrer"> cuckoo </a> </h2> <h3> 🎥 Cuckoo - A free anonymous video-calling web application built with WebRTC and React that provides peer-to-peer video and audio communication in a web browser with no plugins or extensions required. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div> <a href="https://cuckooapp.herokuapp.com" rel="nofollow noopener noreferrer"> <img alt="Cuckoo" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fsomikdatta%2Fcuckoo.%2Fclient%2Fsrc%2FIcons%2Fcuckoo-logo.svg" width="60"> </a> <div class="markdown-heading"> <h1 class="heading-element">Cuckoo - Anonymous, Free Video Calls</h1> </div> <p>Anonymous video calls across the world for free with screensharing!</p> <a href="https://github.com/somikdatta/cuckoo/fork" rel="noopener noreferrer"> <img src="https://camo.githubusercontent.com/dbe2015a78d4c174aac588a095588acc572eb99a107025bfa53dc3982c16a809/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f736f6d696b64617474612f6375636b6f6f3f7374796c653d666f722d7468652d6261646765" alt="cuckoo forks"> </a> <a href="https://github.com/somikdatta/cuckoo/stargazers" rel="noopener noreferrer"> <img src="https://camo.githubusercontent.com/23503391acab1bd6579f39e90c993d958ff5981349eef38f4fd5d8c6bf9f3e48/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f736f6d696b64617474612f6375636b6f6f3f7374796c653d666f722d7468652d6261646765" alt="cuckoo stars"> </a> <a href="https://github.com/somikdatta/cuckoo/issues" rel="noopener noreferrer"> <img src="https://camo.githubusercontent.com/e9995fd46a758f14baca6e2ef43ff599c90fd406ca52a2d93059b94920d27433/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f736f6d696b64617474612f6375636b6f6f3f7374796c653d666f722d7468652d6261646765" alt="cuckoo issues"> </a> <a href="https://github.com/somikdatta/cuckoo/pulls" rel="noopener noreferrer"> <img src="https://camo.githubusercontent.com/39cfa7686156df725f2316ff214004fe7f2cf663db5a590130ec72959de7b334/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732d70722f736f6d696b64617474612f6375636b6f6f3f7374796c653d666f722d7468652d6261646765" alt="cuckoo pull-requests"> </a> <br> <br> <p><a href="https://cuckooapp.herokuapp.com/" rel="nofollow noopener noreferrer">View Cuckoo</a> · <a href="https://github.com/somikdatta/cuckoo/issues/new/choose" rel="noopener noreferrer">Report Bug</a> · <a href="https://github.com/somikdatta/cuckoo/issues/new/choose" rel="noopener noreferrer">Request Feature</a></p> <p>✨ <em>Loved the project? Give this project a star to show your support.</em> ✨</p> <a rel="noopener noreferrer" href="https://github.com/somikdatta/cuckoo./demo.gif"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fsomikdatta%2Fcuckoo.%2Fdemo.gif"></a> </div> <div class="markdown-heading"> <h2 class="heading-element">Cuckoo is a small project to demonstrate the concepts of WebRTC, WebSockets by facilitating video calls across the web!</h2> </div> <div class="markdown-heading"> <h2 class="heading-element">🧐 Feature list</h2> </div> <ul class="contains-task-list"> <li class="task-list-item"> Video Call</li> <li class="task-list-item"> Screen Sharing</li> <li class="task-list-item"> Select camera</li> <li class="task-list-item"> Select audio device</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">🚀 Getting started</h2> </div> <p>This project is deployed at <a href="https://cuckooapp.herokuapp.com" rel="nofollow noopener noreferrer">https://cuckooapp.herokuapp.com</a></p> <p>Guide for local deployment -</p> <ol> <li>Clone the repository</li> </ol> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>git clone https://github.com/somikdatta/cuckoo.git</pre> </div> <ol start="2"> <li>Change the working directory</li> </ol> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c1">cd</span> cuckoo</pre> </div> <ol start="3"> <li>Install dependencies</li> </ol> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>npm install</pre> </div> <ol start="4"> <li>Change the working directory</li> </ol> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c1">cd</span> client</pre> </div> <ol start="5"> <li>Install dependencies</li> </ol> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>yarn install</pre> </div> <ol start="6"> <li>Run the app</li> </ol> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>npm start <span class="pl-k">in</span> parent directory /cuckoo</pre> </div> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>yarn start <span class="pl-k">in</span> directory /cuckoo/client</pre> </div> <ol start="7"> <li>Open project at <a href="http://localhost:3000" rel="nofollow noopener noreferrer">http://localhost:3000</a> </li> </ol> <p>🌟 You are all set!</p> <div class="markdown-heading"> <h2 class="heading-element">🙇 Special Thanks</h2> </div> <ul> <li> <a href="https://github.com/coding-with-chaim/" rel="noopener noreferrer">Coding with Chaim</a> for explaining the concepts of WebSockets and WebRTC on his <a href="https://www.youtube.com/channel/UC7sCgeZ9xOwCGHIp2mVWlUQ" rel="nofollow noopener noreferrer">YouTube Channel</a> </li> </ul> <div class="markdown-heading">…</div> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/somikdatta/cuckoo" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>Try it if you find it interesting!</p> <p>If you liked what I made, <strong>please consider leaving a star ⭐ on the <a href="https://github.com/somikdatta/cuckoo" rel="noopener noreferrer">GitHub repo</a> to keep me motivated for better projects</strong></p> javascript react webdev showdev