soufianeodf/record-in-video-website-visits

Record video sessions for website visits

Record and replay users interaction

A proof of concept about recording and replaying users' interactions on the web.

Youtube video

• rrweb, record and replay users interaction on the web.

Demo video

record-and-replay.mp4

Architecture Diagram

Template used

• Pavo

Technologies used

• Bootstrap 4/5
• rrweb library
• Spring Boot
• PostgreSQL
• PgAdmin
• Docker
• DigitalOcean and Play with Docker

Resources Used

• Record and Replay the Web: A rrweb Tale

Getting Started

Install chrome extension

• install moesif-origin-cors-change chrome extension

Clone repository

git clone https://github.com/soufianeodf/record-in-video-website-visits.git

cd record-in-video-website-visits

• Replace localhost with server ip-address

sed -i 's/localhost/ip-address/g' .env
sed -i 's/localhost/ip-address/g' website/website/index.html
sed -i 's/localhost/ip-address/g' website/website/replay.html

Deploy on DigitalOcean (method 1)

• Create a droplet

• ssh into it

ssh root@ip

• Open the following ports

sudo ufw allow 80/tcp
sudo ufw allow 8080/tcp
sudo ufw allow 55432/tcp
sudo ufw allow 16543/tcp

• Run docker compose

docker-compose up

Deploy on Play-with-Docker (method 2: free)

• Update alpine

apk update

• Run docker compose

docker-compose up

• Open all ports

netstat -lntu

License

Licensed under the Apache License.