pranav2612000/milaap

Milaap a Decentralized Video/Audio CHAT/conferencing application, which is designed to work on the edge(i.e peer to peer), with very little interference of the server.

Milaap

A decentralized video/audio calling application!
Report Bug · Request Feature

Milaap is live here.

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Contributors

About The Project

There are many video calling applications around the globe, but they are mostly server based applications providing maximum load on the server, wherein the audio and video quality decreases with increase in the number of participants. Many don't even support end-to-end encryption.

So we decided to develop a one-stop solution for not only addressing all these solution, but to give a seamless experience to the user. Milaap is a decentralized video/audio conferencing application, which is designed to work on the edge, with very less interference of the server(i.e. peer to peer connection). It is designed to work efficiently on all platforms.

Built With

Have used various libraries/frameworks for this project, the important ones mentioned here:

• Simple Peer
• ReactJS

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

You will have to install the following.

• npm

npm install npm@latest -g

Installation

1. Clone the repo

git clone https://github.com/Pranav2612000/milaap.git

2. Install NPM packages for frontend

npm install

3. Start the project

npm start

4. In a new terminal tab, Open the folder backend

cd backend

5. Install NPM packages for backend

npm install

6. Start the server

nodemon index.js

Usage

In progress

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contributors

• Pranav Joglekar
• Ved Dandekar
• Vasu Sharma
• Anup Nair
• Naman Modi
• Savan Nahar

milaap's Issues

Bash script to move peerjs from dependencies to master and remove .git files

Redirect to dashboard on successful login

Currently fails to redirect.

Message: Messages not displayed correctly

Sending a new message messes with the message view, only displaying certiain messages.

Remove unnecessary pages from COREUI.

Eg - /#/buttons

Can be done later when we don't need to refer to them for UI, but just adding this issue now, so that we don't forget.

remove the dashboard and add friend button from title bar and place them somewhere else.

Open to discussion.

change room icons on left-sidebar

Change these icons by something better.

Remove audio in your video.

Before opening an issue:

• Search for duplicate or closed issues
• Prepare a reduced test case for any bugs
• Read the contributing guidelines

When asking general "how to" questions:

• Please do not open an issue here

When reporting a bug, include:

• Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
• Reduced test cases and potential fixes using CodePen or JS Bin

When suggesting a feature, include:

• As much detail as possible for what we should add and why it's important to CoreUI Admin Template
• Relevant links to prior art, screenshots, or live demos whenever possible

Dark theme is not properly integrated across all the components

Issues :

• Chat section is not visible properly
• Chat styling is affected because of dark theme
• Side bar not properly displayed
• Message Setting icon not displayed until hover
• Chat section send button out of window
• Things typed in send window(chat section) not visible

---

Add feedback messages to login and signup pages

when user signups/ logins, not alerts/ popups are displayed, to give feedback to the user. Add proper alerts.
Also, redirect to login page on successful signup.

Change to a PWA

For seamless experience of the users on mobile phones, once the backend is completely ready, its needs to converted to a PWA.

Discussion: Dashboard page

What are some ideas for the dashboard page. Do we need one or should we remove it?

What I think is we can display the health monitoring statistics of the current user( obtained through fit api, screen time)(CoreUI has some good graphs) and some health tips, suggestions, precautions, advices and the latest activity of the user/ missed notifications.

@AnupNair08 @naman-modi @ vasusharma @veddandekar

Create only two media objects per user

One for screen, one for video. When new user joins, send same object.

Check for equivalence of password and confirm password at registeration

Add appropriate UI changes to end call button

Make aside menu mobile friendly

Currently, almost entire app support mobile displays perfectly except aside menu.
I'm sure CoreUI supports a simple fix for the same.

Allot room permissions to users

Allow only certain users to add members to a group.(Maybe just the creator). Currently anyone can enter a roomname and add a member to the group. Current backend route is ideal for creating room, not adding an user, so maybe we will need to write a new api to add an user.

Join by link

Users should be able to enter a room directly using a link.

Refer - https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share

Implement reordering of video list

Support drag and drop on receiving video list.
Currently static.

Replace the "CoreUI" image in title bar.

Minor changes in package.json

https://github.com/Pranav2612000/distrideochat/blob/b42c8d590ba79f053aef251a4eaa9f95134acad0/package.json#L6

Invalid homepage for react app (more)

Also add proxy so that all front end API calls can be converted from http://localhost:5000/api/... to just /api/..., this should make deployment easier

Discussion: Display the name of the current room in which the user is.

Can't think of an appropriate position. What do you guys suggest?

Change colour scheme to purple.

Add support for JWT/Cookies

As of now, we are using localstorage to directly store username and are using this to send request to backend. Replace this by JWTs / Cookies which is secure. Will require adding middleware to backend, and passing the JWT through headers.

change the settings tab in right-sidebar with room options.

Will require back-end queries for these. Create a seperate issue for back-end if the one working on it feels so.

Stream continuing if user logs out directly

Both video and screen streams continue to run if a peer directly logs out without stopping the stream

Room Change Doesn't take place sometimes

Sometimes, the room is not changed though it is clicked on .
The URL changes but the updated room name is not passed to Control.js from DefaultAside.js.
Experienced very less times usually just after logging in or after refresh.
try
User 1
Password 1
It has ample rooms to recreate the issue.

Allow host to mute/kick out

The host should be to:

• mute all participants, i.e. Mute ALL
• mute a particular participant, i.e. Mute Naman
• Kickout a particular participant, i.e. Kick out Naman

onICEConnectionStateChange error

Every few minutes into the stream, stream turns black and logs onICEConnectionStateChange error.
If user shares video again, it works fine.

TODO: Look for possible causes and solutions.
Worst case - whenever this error is detected, re-establish a new share stream.

Remove unnecessary backend calls on dashboard

STR:

• Do a fresh login or tap on dashboard on left top once logged in.
• Check browser console.

I suspect that this is because calls are being made to backend when user is not in any room.

To-do: Prevent front-end from making calls when not in a room.

Profile Page required

We require a profile page for each user.
In the profile page, we will have:

• Avatar (Profile image), which can be changed whenever they want
• User name can be changed (authentication will be required, as username different for each)

As soon as the first-time login via Google done, the user will be redirected here to select a username.

database: Prevent users from creating already taken username.

No checks are in place to prevent users from taking already taken usernames. Provide proper response from the backend and display appropriate messages to users

video: Allow calls to be created without needing to refresh the database (with "end call")

Discussion: Room View

Ideas about the UI visible when a room is entered -

There is a lot of space wasted at the center(where the videos are displayed) when no call is in progress. What I have in mind is having something like skype does with the user video playing at the back with buttons on front-

I like the idea of displaying the list of all the users in the list tab in right sidebar -

with the users differentiated into 3 categories through the UI and arranged category-wise - those in a call in the group, users online, users offline, but in the group.

Any other suggestions for improving the room UI

@naman-modi @veddandekar @AnupNair08

Awesome button hangs on wait... if request failed

messages: Add time support to messages

change the database to store timestamps when messages are being sent. And pass it to the front-end to be displayed with a time.

Remove dead video streams

Currently just freezes/turns black.

Write a common endpoint to get all information regarding the room

Whenever a user enters a room, seperate backend calls are made to get messages, members, online members etc. Write a unified backend api which returns all this information - messages, group members, is there a ongoing call etc.

Call this api when user enters a room, and store the request in state, to be used later.
Handle errors, if the call fails may be due to internet connectivity.

messages: change UI of messages to display the sender in a better way.

Add button to exit rooms

The fix should handle proper cleaning of the database, removing the user details from the room document and the room details from the user document.

App crashes after Clicking on stop sharing / No stop sharing button in latest code

Add Firebase Authentication

Need firebase for Google sign in to be implemented. It will be easy for users to sign in. @Pranav2612000, Let me know what you need after signin for the database.

Update README and Description

Send requests to Express Server that a video call has ended.

right-sidebar: styling of selected-list icon different from other tabs

@veddandekar - I think it will be very easy for you to fix

modify the drop-down menu according to our needs.

Creaet appropriate pages and link the dropdown options to them. Create new issues for these pages.

Change design of creating rooms

Currently, new rooms are created when a user adds a friend/another user to the room. This creates problems when adding support to add anonymous users, add more than 1 user to the room etc.
The design is being changed according to the following example -
A logged in user can create a new room. This adds a new room entry in the database. The logged in user can now add other users through either the room UI by entering their usernames(this button needs to be created), or by sharing the room link. When na anonymous user visits the link. The app will check if the room exists( by quering the database), if it doesnt redirect to 404, then it'll check if the user has a valid token. If he doesn't then redirect the anonymous user to a page which asks for a temporary username(with an option to login) after logging in the user can then enter the room.

Video: Delete ended and closed streams.

Landing page required

Not our current focus, but we will definitely need on down the road.
Putting this up rn to remind everyone to be on the look out for good templates/packages for the same.

Doesn't logout after session is expired

Improve UI/UX of Adding a new User to a group.( + prevent refresh when user added)