Skip to content

Soumojitshome2023/nextjs-videocall-webapp

Repository files navigation

react-play

GitHub issues GitHub pull requests GitHub forks GitHub Repo stars GitHub contributors
Repo Size PRs Welcome
Visitors Count

Table of Contents

  1. Introduction
  2. Live Demo
  3. Tech Stack
  4. Features
  5. Installation Guide
  6. Contributing Guide
  7. Outreach
  8. Project Admin
  9. Code of Conduct
  10. Contributors
  11. License
  12. Support

✨🎈Introduction

Nextjs-videocall-webapp is a modern web application enabling real-time video communication. It’s designed for users looking to connect with others quickly and efficiently. With state-of-the-art technologies such as WebRTC and Socket.IO, users can engage in high-quality video calls that adapt to different network environments.

Use Case:

  • Virtual meetings
  • Study sessions
  • Remote interviews
  • Social hangouts

Key Functionality:

  • Real-time video calls
  • Peer-to-peer communication
  • Minimal latency with WebRTC

🖱️Live Demo

man-techno

Visit Video Calling WebApp (https://soumojit-nextjs-videocall-webapp.vercel.app/) to see the live demo

⌨️Tech Stack

  • Next.js: React framework for server-side rendering and building scalable web applications.
  • WebSocket: Enables full-duplex communication between the client and server, providing real-time updates and interactions.
  • WebRTC: Powers peer-to-peer connections for live video and audio streaming.
  • Node.js: Backend runtime for scalable network applications.
  • Styled-Components: For creating reusable, maintainable styles within React components.
  • Vercel: Deployment platform for Next.js apps.

💻Features

-🔄 Real-time Communication: Utilizes WebRTC and Socket.IO to provide instant connections between peers.

  • 📡 Low Latency: Optimized for smooth video streaming even on slower connections.
  • 🎥 Video and Audio Support: High-definition video and audio features.
  • 🖥️ Responsive UI: Adaptive design for desktop and mobile platforms.
  • 🔒 Secure Communication: All communications are peer-to-peer, ensuring privacy.
  • 📦 Server-Side Rendering (SSR): Fast, SEO-friendly pages thanks to Next.js.

🧑🏻‍💻Installation Guide

  1. Clone this repository to your local machine:

    git clone https://github.com/your-username/nextjs-videocall-webapp.git
    cd nextjs-videocall-webapp
    
  2. Install the required dependencies:

    npm install 
    
  3. Setup environment variables Create a .env.local file in the root directory and add the following values:

    SOCKET_IO_SERVER_URL=http://localhost:3001
    NEXT_PUBLIC_RTC_CONFIG={"iceServers": [{"urls": "stun:stun.l.google.com:19302"}]}
    
  4. Run the application For development:

npm run dev

For production:

npm run build
npm start

🛠️ Contributing Guide

We welcome contributions to the videocall webapp project! To contribute:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature-name)
  3. Commit your changes (git commit -am 'Add new feature')
  4. Push to the branch (git push origin feature-name)
  5. Create a new Pull Request

Please refer to the CONTRIBUTING.md for more detailed information.

💪 Outreach

HelpOps-Hub is proudly part of global initiatives engaging with passionate developers and open-source enthusiasts worldwide:

Name Logo Purpose
GSSoC'2024-Extd a white background with the text, GirlScript Summer of Code next to an orange flower The coding period is from October 1st to October 30th, during which contributors make contributions and earn points on the platform.
Hacktoberfest 2024 a black background with the official logo of Hacktoberfest 2024 Hacktoberfest is a month-long October event welcoming all skill levels to join the open source community, contribute quality pull requests on GitHub, and earn cool swag.

Project Admin

man-techno

https://www.linkedin.com/in/soumojit-shome

📑Code Of Conduct

This project and everyone participating in it is governed by the Code of Conduct. By participating, you are expected to uphold this code.

📝License


Gityzer is licensed under the terms of the MIT License. check out LICENSE for details.

⭐Support

  • 💰 Become our Sponsor!

  • ⭐ Star our Repo

    🎉Big thanks to all the contributors!

(Back to top⬆️)