lntel / chatroom

This project is a chatroom created using a MERN stack which utilises modern WebRTC technology to enable secure peer-to-peer streaming.

Modern React Chatroom

This project is a chatroom created using a MERN stack which utilises modern WebRTC technology to enable secure peer-to-peer streaming of both peripheral devices and device streaming (screen sharing). In the background we use socket.io which enables us to communicate in real time with all the clients in the room, additionally we also utilise the peerjs library which is a wrapper for WebRTC.

Live Demo

Please feel free to try our live production demo.

Contents

• Screenshots
  • Main Page
  • Settings Modal

Screenshots

This section contains screenshots of the design of the web application. This project was created entirely using SCSS enabled by the node-sass package. The design of this web app was primarily inspired by Discord.

Main Page

Settings Modal

chatroom's Issues

Microphone mute button remains after stream is closed

After streaming and muting your microphone, and then ending the stream and starting again, the button's state is the same however, the microphone will not remain muted.

Camera icon doesn't disappear

Describe the bug
When another user starts streaming and stops the camera icon remains visible within the userlist.

To Reproduce
Steps to reproduce the behavior:

1. Get someone to start a stream while you watch
2. Get them to end their stream
3. You can see the icon in the user list

Expected behavior
It should usually remove the icon.

Screenshots

Sharescreen issue

When closing share screen from chromes "stop sharing" button the screen share video goes black but is still shown

To Reproduce Steps to reproduce the behavior:
Log in
Share screen
Click chromes "stop sharing"
See error

Desktop (please complete the following information):
OS: Win 10
Browser: Chrome
Version: 80.0.3987.163

Chat readability is poor

Camera resolutions fail to fill the div

When different cameras with varying resolutions begin streaming, they sometimes are unable to fill the video div container.

Share screen not ending

When clicking chromes stop sharing screen, the screenshare doesn't stop on the chatroom

Chat overlapping issue

An issue has occurred where the video component overlaps the chat component making it inaccessible.

Can post empty message in text chat

When on text chat the user can spam Enter and post empty messages

To Reproduce Steps to reproduce the behavior:

Log in
Open text chat
Press 'Enter'
See error

The user will post an empty message in text chat

Desktop (please complete the following information):
OS: Win10
Browser: Chrome
Version: 85.0.4183.83

Can enter empty message in chat

Describe the bug
Can enter an empty message.

To Reproduce
Steps to reproduce the behavior:

1. Enter a space in the chat
2. Press enter

Expected behavior
Should filter using regex.

Duplicate of yourself within user list

Describe the bug
When you stream and stop streaming, your user profile duplicates within the user list.

To Reproduce
Steps to reproduce the behavior:

1. Start streaming your webcam
2. Stop streaming your webcam
3. Check the user list for a duplicate

Expected behavior
It should simply remove the streaming icon from the user profile.

Screenshots

Userlist remains populated after disconnect

When being disconnected either remotely by another user or by the server itself, the user list remains populated and duplicates on reconnect. This is probably due to the state not being cleared when the disconnect event is triggered.

Participants and text chat

They both can be opened simultaneously but they overlay eachother. One needs to close when another opens

Large code blocks freeze users

Describe the bug
A large block of code such as a webpack chunk may freeze every connected client
To Reproduce
Steps to reproduce the behavior:
Send a large block of code

Expected behavior
The code is show clearly or the an error is show saying the given code is too long.

Muting microphone during screen-share doesn't work

This is due to the amount of audio MediaStreamTracks present while screen-sharing.