/webex-master.github.io

Platform to Collaborate

Primary LanguageHTML

नमस्ते (Namaste)🙏🏻 , I'm Raushan Kumar Gupta!


In the age of social distancing, Let's Meet


What I Accomplished

Lets-Meet

I successfully implemented the video calling feature. More than two people can currently video call together using the web app. I also implemented:

  1. Switch audio on/off
  2. Switch video on/off
  3. Create your own meeting url
  4. Join an existing meeting with more than two people
  5. Adding own name to profile with which you join the meeting
  6. Update whenever somebody joins or leaves the meeting
  7. Copy URL in-meeting
  8. Chatbox
  9. Screenshare
  10. Collaborative whiteboard
  11. Leave meeting
  12. Recording Option
  13. Recording ↓
  14. Invite via Whatsapp

What I Learned

  1. About WebRTC
  2. Socket.io
  3. Make effective use of Bootstrap

Running the Web App on your Local Device

To run the web app in your local device, run the following commands in your terminal (macOS) or command prompt (Windows) :-

-Clone the GitHub repository into your local device by running the following command:

cd folder-you-want-to-download-code-in

# git clone: https://github.com/code6014/webex-master.github.io.git

cd Webex

-Now that you're in the project folder, open terminal to download the needed node modules:

npm install

-Now run the server by running the following command:

npm start

The server should be running at localhost:3000
If localhost:3000 shows busy on your device, run the following commands:

sudo lsof -i :3000

kill -9 <PID>

Now localhost:3000 is free to run this application.

-To access the web app, in your project code folder, navigate to public/landing-page and from there open landing.html on any browser of your preference (Chrome recommended for best experience).

Technologies Used

  1. HTML
  2. CSS
  3. JavaScript
  4. Bootstrap
  5. Node.js
  6. WebRTC
  7. Socket.io

Future Possible Functionalities

  1. Add a sign up/authentication page
  2. Improve upon the Adapt functionality in the web app
  3. Add an additional feature of breakout rooms
  4. Increase Scalability

Screenshots


Lets-Meet

Lets-Meet

Lets-Meet

Lets-Meet

Check out the following links!




Web App Flow: web-app-flow.png