The latest articles on Forem by Mihir Gupta (@mihir0699). https://forem.com/mihir0699 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%2F481800%2F3c7f0c99-dbf2-4a0c-87b7-cc5e9aea359c.jpeg https://forem.com/mihir0699 en Mihir Gupta Fri, 28 May 2021 09:23:19 +0000 https://forem.com/mihir0699/video-call-app-with-chat-functionality-built-using-react-js-web-rtc-and-socket-io-3eeo https://forem.com/mihir0699/video-call-app-with-chat-functionality-built-using-react-js-web-rtc-and-socket-io-3eeo <p>This is a video calling application where users can call other user and will also have the capabiltiy to mute their mic and audio. Their is also real time chat functionality.<br> It's also a modern PWA so users can install it on their devices like other native apps.</p> <p><strong>Project Link</strong> - <strong><em><a href="https://video-chat-mihir.vercel.app/" rel="noopener noreferrer">https://video-chat-mihir.vercel.app/</a></em></strong></p> <p><strong>Github repo</strong> - <strong><em><a href="https://github.com/mihir0699/Video-Chat" rel="noopener noreferrer">https://github.com/mihir0699/Video-Chat</a></em></strong></p> <p><strong>Demo Video</strong> - <strong><em><a href="https://youtu.be/zsyEx2sVi6c" rel="noopener noreferrer">https://youtu.be/zsyEx2sVi6c</a></em></strong></p> <h2> Features and Functionalities 😃 </h2> <ul> <li>Video Call with others</li> <li>Mute audio/video</li> <li>Instantly join a video call with a code</li> <li>Chat in real-time</li> <li>Chat Notifications</li> <li>Install it as a PWA (Progressive Web App) on your device</li> <li>Unlimited duration calls</li> <li>Share code instantly on social media platforms</li> <li>Simple and intuitive UI</li> </ul> <h2> Screenshots 📸 </h2> <h3> Home Page </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115701626-9b838e00-a385-11eb-8a07-214ca0b9f327.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115701626-9b838e00-a385-11eb-8a07-214ca0b9f327.png" alt="enter image description here"></a></p> <h3> Incoming Call </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115701844-d8e81b80-a385-11eb-91cf-014b23e24ae4.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115701844-d8e81b80-a385-11eb-91cf-014b23e24ae4.png" alt="enter image description here"></a></p> <h3> In Call </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115702841-07b2c180-a387-11eb-897e-f19abefafef5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115702841-07b2c180-a387-11eb-897e-f19abefafef5.png" alt="enter image description here"></a></p> <h3> Chat </h3> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115702929-24e79000-a387-11eb-906c-704608263da4.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115702929-24e79000-a387-11eb-906c-704608263da4.png" alt="enter image description here"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115703177-709a3980-a387-11eb-8d9d-15ddf3b66a25.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F48746544%2F115703177-709a3980-a387-11eb-8d9d-15ddf3b66a25.png" alt="enter image description here"></a></p> <h2> Tech Stack 💻 </h2> <ul> <li><a href="https://reactjs.org/" rel="noopener noreferrer">React.js</a></li> <li><a href="https://www.netlify.com/" rel="noopener noreferrer">Netlify + Heroku (Hosting)</a></li> <li><a href="https://github.com/webrtc" rel="noopener noreferrer">Web RTC</a></li> <li><a href="https://socket.io/" rel="noopener noreferrer">Socket.io</a></li> <li><a href="https://nodejs.org/en/" rel="noopener noreferrer">Node.js</a></li> <li><a href="https://ant.design/" rel="noopener noreferrer">Ant Design</a></li> </ul> react webdev webrtc socketio