https://github.com/tinspham209/zoom-clone-expressjs
Zoom Clone Web Application
https://github.com/tinspham209/zoom-clone-expressjs
bootstrap4 cors ejs express fontawesome-icons jquery nodejs peer uuid video webrtc
Last synced: 7 months ago
JSON representation
Zoom Clone Web Application
- Host: GitHub
- URL: https://github.com/tinspham209/zoom-clone-expressjs
- Owner: tinspham209
- Created: 2020-08-14T07:27:44.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T14:55:18.000Z (almost 2 years ago)
- Last Synced: 2025-01-18T05:43:49.068Z (9 months ago)
- Topics: bootstrap4, cors, ejs, express, fontawesome-icons, jquery, nodejs, peer, uuid, video, webrtc
- Language: JavaScript
- Homepage:
- Size: 92.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mini Project: Zoom Clone Web Application - 14-Aug-2020
### Tech-Stack
- `NodeJS v14.7.0`
- `ExpressJS v4.17.1`
- `jQuery`
- `bootstrap 4`
- `Socket.IO v2.3.0` : communicate client & server REAL-TIME ENGINE
- `WebRTC` : provides web browsers and mobile applications with real-time communication
- `peer v0.5.3` : provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.
- `Nodemon v2.0.4` : restarting the app when file changes
- `Morgan v1.10.0` : HTTP Logger
- `ejs v3.1.3` : Embedded Javascript, get variables from the BE to FE
- `CORS v2.8.5`
- `uuid v8.3.0` : unique id
- `FontAwesome icons`
### Deploy
https://zoom-clone-nodejs-sdgsdg.herokuapp.com
### Screenshot
### Plan Of Action
- Initialize NodeJS Project - DONE
- Initialize first view - DONE
- Create a room id - DONE
- Add the ability to view own video - DONE
- Add ability to allow others to stream their video - DONE
- Add styling - DONE
- Add the ability to create messages - DONE
- Add mute button - DONE
- Add stop video button - DONE
### After this project
I have improve my knowledge about
- set layout with flex-box
- class name with BEM
- bootstrap to set font-family
- Skills of Express & NodeJS
- Template engine with ejs
- Debug with console.log
I have understand about
- Create unique id room with uuid
- Create unique id user with uuid
- Using Socket.IO to communicate between Client & Server in Real-Time
- Using Peer to PTP API on top of WebRTC, share media streams & data channels in Real-Time
- Using jQuery
- tracking message when user typing text and hit enter key
- append 'li' tag when server send the message
- tracking to scrollBottom when chat_window is full
- set mute/unmute audio, play/stop video button onClick
Next Steps:
- Responsive for App
- Add notification when user connect/disconnect to room
### Directory Structure
```
.
├── package.json
├── package-lock.json
├── README.md
└── src
├── public
├── script.js
├── style.css
├── views
├── room.ejs
├── server.js
```
### Set up
- `git clone https://github.com/tinspham209/zoom-clone-expressjs`
- `npm install`
- `npm start`