AkiyamaKunka/rtconfer-whiteboard: Web conference platform, provide collaborative canvas + video-streaming + real-time code + rich-text editing + file displaying, team and session management.

Feature Hightlight

• Teams & Meetings: Easily create teams and manage them. View meetings and resume at any time.
• Canvas: Real-time collaborative web painting canvas enables you to keep everyone in the loop.
• Live Streaming: Engaging experience for group real-time online video streaming in session.
• Code & Rich-Text Editor: Share insparing code and text with teammater within canvas, in real-time.
• File Display: Upload and share your file on canvas and make notes supported by canvas painting.

Exhibition Cabinet

I'm pleased to show you the demo website here: www.rtconfer.com to try all the feature by your own!

Canvas (Displaying Code Editor)

Create Meeting

Main Page

Complete Guidebook

Click here for Developers' Guidebook!

Demo Video

Click Here for video on Youtube!

Tech Outline

• Designed website with robust session security and multi-person video & audio call stability with Socket.IO based on WebSocket
• Applied MERN: MongoDB, Express.js RESTful API, React.js, Node.js, JWT authentication, Chakra UI with Heroku in development
• Implemented real-time collaborative code and rich-text editing with Firepad, file uploading with AliCloud Open Storage Service
• Integrated Google Real-time Firebase handling input conflicts, realizing message playback to client-side of code/text editing

Build and Deploy

If you are a client who want to deploy our service or test:

Please follow the steps to deploy our web service as quickly as possible!

• git clone this repo to your computer, turn on your Windows shell or Unix Terminal command line tools.

• cd richmedia-project/client to enter the directory of our web demo project

• npm install to install all the dependencies that front-end needs, this might need to wait for a few seconds.

• npm run start to start the React.js serve.

• Enter http://localhost:3000/welcome in your Chrome browser's URL bar.

• Simply wait for a few seconds, and enjoy your usage of our RTConfer platform!

If you are a engineer who wanna further development:

Prerequisites:

Have Docker Installed in your System, and also a clear mind to follow these steps.

In Development Mode :

First copy the content of docker-compose-dev.yml to docker-compose.yml

and also copy the content of server/src/index.dev.js to server/src/index.js

Run the app using :

$ docker-compose up --build --remove-orphans

$ docker-compose up -d

Above command will start the services on (-d) detach mode (similar like running the app in background)

Then you can check the status of the containers by running:

$ docker ps

The App should be App :

visit client : http://localhost:3000

visit server : http://localhost:8080

To check the status of the running containers :

docker-compose ps

In Production Mode :

First copy the content of docker-compose-prod.yml to docker-compose.yml

and also copy the content of server/src/index.prod.js to server/src/index.js

Run the app using :

$ docker-compose up --build -remove-orphans

The App should be up at http://localhost:8080

Build the image for server :

docker build -t myapp-server:1 . docker images docker run --name "myapp-server" -p 80:8080 myapp-server:1 docker ps

Specially Thanks:

@Jisuanke Inc.

@Nankai University.

Contributors:

@AkiyamaKunka, @JamesYang, @WenBiming, @SweetieLee, @worldpresident