We aim to provide free and open-source web video chat application to be used in the customer service domain.
This project is designed as a video call and customer service management system that can be used by companies that want to provide video support services to their existing customers or external customers. It is foreseen that it will be a good alternative to the existing video calling platforms, as it is free, modern, minimal, fast and is in the hands of the service provider company. It also includes features not found on platforms designed for general use. For example, the company using the application can control the customer representatives through the kept call logs. Customers can file video support requests to customer representatives without an intermediary. Thus, the action time of customer representatives is reduced and customer satisfaction is increased.
- Python 3
- Pip 3
-
Install Python dependencies.
pip3 install -r requirements.txt
-
Install Python PostgreSQL driver psycopg2.
-
Build prerequisites (installation shown for Ubuntu derivatives)
Note: Update apt cache first withsudo apt update
.- A C compiler
sudo apt install gcc
- python3-dev system package
sudo apt install python3-dev
- libpq-dev system package
sudo apt install libpq-dev
- PostgreSQL server
sudo apt install postgresql postgresql-contrib
- A C compiler
-
Build from source.
pip3 install psycopg2
-
-
After this step you need a working PostgreSQL server.
# Linux derivatives sudo service postgresql start
-
You must write PostgreSQL connection parameters to the
instance/config.py
file. You should create the file if it does not exist. A sample config is given below:# PostgreSQL sample values DB_HOST = "localhost" DB_PORT = "5432" DB_NAME = "webrtc_customer_service" DB_USER = "postgres" DB_PASSWORD = ""
-
Initiate the PostgreSQL database with Flask CLI command.
flask init-db
-
[OPTIONAL] Insert mock data to database for test purposes. All mock passwords are
1234
.flask import-mock-data
-
Define OS environment variables.
# Activate Flask debugger export FLASK_ENV=development # Choose HTTPS mode export HTTPS_MODE="adhoc" # "adhoc": create random certificate with each run # Other options are "self-signed" and "none" # If you choose "self-signed" you must have SSL certificate files # ready in the certificate/ directory
-
Start the Flask development server.
python app.py
-
Access the application from browser
https://localhost:5000
This Flask Werkzeug server is for development only. Check Flask docs deploying section to learn how to deploy WSGI server to production. If you want to use additional HTTP server as a reverse proxy than you must declare that in the app/init.py
. How to do that is explained in proxy fix subsection.
There are customer only, representative only and general routes in the application. Users can access different interfaces of the app by using the routes explained below. User authentication information are stored as sessions in the database using signed cookies. Unauthenticated access requests to routes are denied.
Route | Description | Methods |
---|---|---|
/auth/register | Interface where user creates an account. | GET, POST |
/auth/login | Interface where user enters the application with his account. | GET, POST |
/auth/logout | Logouts from the user's account and clears the session. | GET |
/representative/create-room | Interface where customer representatives create meeting rooms. | GET, POST |
/representative/get-customers | Returns matching customers as JSON list according to GET parameters. | GET |
/ | Welcome page | GET |
/join-meeting/<int:id> | Interface where customers join the meeting by entering information. | GET, POST |
/request-meeting | Interface where customers file a video call request. | GET, POST |
/leave-meeting | Ends the meeting. | GET |
/meeting | Interface where the meeting happens. | GET, POST |
-
Customer representatives can create a meeting room.
There are two types of meeting rooms. If representative selects the customer from customer database while creating the room, then meeting room is assigned to that customer only. Otherwise general meeting room is created.
-
Customers can join a meeting by following the invite link.
User interface differs between customer and guest customer. Customers enter phone number and room password. Guest customers enter contact info and room password. Guest customers are stored in a seperate table than customers.
-
One to one live meeting between customer and representative.
- Python Flask back-end
- Jinja2 template engine for Flask
- HTML, CSS, JS front-end
- Bootstrap 5.1 CSS framework
- Socket.io JS client API and flask-socketio library
- PostgreSQL database
- Font Awesome 6.1 icon pack
WebRTC Customer Service is free software published under the MIT license. See LICENSE for details.
- Erkan Vatan: Front-end, back-end, documentation
- Ozan Kukul: Back-end, WebRTC connections