Git Product home page Git Product logo

study-room's Introduction

Study-Room ( ....Chat, Talk, Study )

Study, collaborate, conference ... over click of a button. A fully functional web application where students can join in room, and communicate in text and audio channels.The application connects peers using WebSockets and WebRTC. Check it out at https://mystudyroom.netlify.app

New Features

  • Generate room ID and share with friends
  • Directly connect to room with shared link, valid for 12 hours
  • Better UI

Desktop and Mobile Views

The application is compatible with both desktop and mobile phones. 

Blog describing how the entire system works

https://sudheer.hashnode.dev/how-mutimedia-streaming-apps-work

Features

  • Chat using text and voice channels
  • Easy to use UI with everything on one screen
  • Mobile Compatibility
  • Connect with multiple people by choosing unique room ids

Technologies Used

  • Server - Nodejs
  • Client - Reactjs
  • Chat - WebSockets
  • Voice - WebRTC

The need of WebSockets and WebRTC ( short summary )

What's the best application level protocol for enabling a bidirectional communication channel(i.e both client and server can update each other at any time) ?. HTTP works fine when the client has to request data fewer times. HTTP opens up a connection and closes the connection as soon as it gets required response. In case of a chat application we continuously need to listen for data from server, one solution is keep requesting the server for data every few milliseconds, but its resource consuming for both the sides. The solution is WebSockets, it enables a full-duplex bidirectional communication, that is, the client is always ready to listen for data pushed by server. But WebSockets are still not peer to peer, in case of audio/video streaming between multiple peers, creating a direct peer to peer connection is a better option (because loads of data is being streamed), but this is also one of the most difficult things to do. WebRTC helps us create a direct peer to peer connetion. WebRTC is one of the most complex communication protocols because it tries all possible ways to create a peer - peer connection, if it still fails then the data is relayed via a TURN server.


Installation

Clone the repo

git clone https://github.com/Sudheer121/Study-Room.git 

Do npm install in both client and server folders

cd client 
npm i 
cd server 
npm i 

Change the name of .env.example file from each client and server folders to .env

The server uses a Twilio API (for TURN servers) for voice chat, if you don't want to use it then comment the part of code from server, it's instructed in server code.

Go to server folder and start the server

cd server 
node index.js

Go to client folder and start the React server

cd client 
npm start

You are good to go !!!! .


Pull Request

Steps for pull request are a bit different than installation mentioned above.

  • Fork the repo
  • Clone the forked repo locally using git clone ==> git clone forked_repo_link.git
  • Checkout to a new branch, name it appropriately ==> git checkout -b new-feature-xyz
  • Make the changes and commit them
  • Push changes to the forked repo ==> git push origin
  • Start a pull request ==> After pushing, you will see a Compare and Pull Request button on forked repo
  • study-room's People

    Contributors

    sudheer121 avatar sudheer1212 avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.