The main objective of this project is to build a Real-Time Video Chat Web Application using WebRTC, which will allow us to establish peer-to-peer connection between 2 or more browsers. This application should enable a chat/messaging option to the user and the user should also be able to stream his/her video and see the video streamed by the other users. Apart from the video streaming feature, the user should also be able to mute/unmute and turn on/turn off his/her video. To add more functionalities to the application, the option of changing the way the user’s video appears, i.e., the addition of filters/effects should be implemented in the application. Screen-sharing and screen-recording features are also available.
-
Embedded JavaScript - EJS is used for integrating Frontend and Backend. It is basically a template engine used by Node JS to create HTML template with minimal code.
-
Nodejs/Express - It is used for server framework. Express will be the backbone of our application. Express is one of the most popular web application frameworks for Node.js.
-
Simple-Peer (WebRTC) - Captures and optionally streams audio and/or video. This will be incorporated by the PeerJS library.
-
Socket.io - It enables real-time, bidirectional communication between web clients and servers.
-
CSS - CSS is used to add style to a webpage by dictating how a site is displayed on a browser.
Password to access the application: dcn123
- When the user runs the application, this is the first page that they can see - Homepage/Login page:
- When the user enters the wrong password, an alert message alerts the user that they have entered an Invalid Password:
- When the user enters the correct password, they can access the video chat web application as shown below. Three people have joined the video chat room and are able to communicate with one another:
- Here, we have shown the implementation of the filters/effects feature (we have chosen B&W) and the implementation of our chat window where users can communicate with one another:
- Here, we have shown the implementation of the recording feature. When the user clicks on ‘start recording’, they are asked to choose which screen they want to record and then the recording starts immediately:
- When the user clicks on ‘stop recording’, they are asked to enter a filename under which they wish to save the recording. Once that is done, the recording is saved under that name and downloaded immediately:
- When the user clicks on ‘leave meeting’, they are redirected to this page where it gives them the option to either re-join the meeting or to return to the homepage. It also includes a star rating feedback for the user:
The Real-Time Video Chat Web Application has been deployed on Heroku App. The Heroku App link which is generated during the deployment can be used by other users to join the server on which the WebRTC has been deployed.
Check out the project: https://fathomless-cliffs-47472.herokuapp.com/