Giter VIP home page Giter VIP logo

cnvideomeetapp's Introduction

नमस्ते (Namaste)🙏🏻 , I'm Shruti Sinha!

This is my entry for Microsoft Engage'21.


All the supporting technical documentation and the demo video are available in the documentation folder of this repo.

In this age of social distancing, Let's Meet.

A Microsoft Teams Clone built for Microsoft Engage 2021.


The Challenge

Build a Microsoft Teams clone.

The solution should be a fully functional prototype with at least one mandatory functionality - a minimum of two participants should be able connect with each other using the product to have a video conversation.

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

What I Learned

Microsoft and the Acehacker team kept various sessions for us to learn more about the work culture at Microsoft. We also learned about new technologies that have been developed by Microsoft (ie Azure Communication Services) and about the Agile Methodology.

The Agile Scrum Methodology has heavily influenced my work in the past 1 month. Agile scrum methodology is a project management system that relies on incremental development. Each iteration consists of two- to four-week sprints, where each sprint's goal is to build the most important features first and come out with a potentially deliverable product.
Microsoft assigned us three sprints of 1-2 weeks each: Design, Build, and Adopt.

In the first two weeks, I researched on WebRTC, Agora, Jitsi and socket.io to decide on which SDK I wanted to use for my web app. Ended up deciding on WebRTC. Got working on establishing video communication between two connections.

In the third and fourth week, I worked on adding additional features to my web app.

In the last week, I ended up adding the chat feature and worked on the landing page as well as the UI for the whole web app.

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/shrutayyyy/LetsMeet.git

cd LetsMeet

-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. Node.js
  2. HTML
  3. CSS
  4. Bootstrap
  5. JavaScript
  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!


Technical Documentation: lets-meet.pdf

Web App Flow: web-app-flow.png

Demo Video: Let's Meet!

cnVideoMeetApp

cnvideomeetapp's People

Contributors

dharmendrasahu1999 avatar

Watchers

 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.