ProcessPro Video Meeting Application
A comprehensive business collaboration platform built with React, TypeScript, and modern web technologies. Features include video conferencing with attention
tracking, AI-powered analytics, team chat, and performance management dashboard.
Core Features
1. Video Conferencing
Real-time peer-to-peer video and audio communication using WebRTC
Support for multiple STUN servers for NAT traversal
Automatic connection handling and recovery
Video and audio muting controls
Meeting recording and playback
Innovative attention tracking using WebGazer.js
2. AI-Powered Features
Meeting Minutes Generation
Automatic transcription of meetings
AI-generated summaries and key points
Action item extraction
Sentiment analysis of discussions
Performance Analytics
AI-driven performance insights
Productivity trend analysis
Team engagement metrics
Automated performance reports
Smart Notifications
Context-aware notification generation
Priority-based alert system
AI-curated daily summaries
3. Team Chat
Real-time messaging with typing indicators
File sharing and media support
Thread-based discussions
Message reactions and emoji support
Chat search and filtering
Direct messages and group chats
Message history and archiving
4. Manager Dashboard
Task Management
Drag-and-drop task board
Task assignment and tracking
Priority and deadline management
Progress visualization
Performance Monitoring
Real-time performance metrics
Employee productivity tracking
Project success rates
Workload distribution charts
Team Analytics
Attendance tracking
Meeting participation metrics
Task completion rates
Team engagement scores
5. Meeting Management
Create and schedule meetings
Join via unique room IDs
View upcoming and ongoing meetings
Track meeting participants
Meeting calendar integration
6. Attention Tracking
Real-time eye tracking using WebGazer.js
Focus detection during meetings
Visual indicators for attention status
Automatic notifications for loss of attention
Privacy-focused implementation
7. Recording & Playback
Record meeting sessions
Save recordings locally in WebM format
Pause and resume recording
Download recorded sessions
Playback with timeline markers
8. User Interface
Clean, modern design using Tailwind CSS
Responsive layout for all devices
Real-time status indicators
Intuitive meeting controls
User avatars and presence indicators
Dark/Light mode support
Accessibility features
Technical Architecture
Core Technologies
Frontend: React, TypeScript
Video/Audio: WebRTC
Real-time Communication: Socket.IO
Eye Tracking: WebGazer.js
Styling: Tailwind CSS
State Management : Custom stores (Meeting Store, Auth Store)
Key Components
1. Meetings Component ( src/pages/Meetings.tsx )
Main component handling video conferencing functionality:
WebRTC peer connection management
Media stream handling
Meeting UI and controls
Recording functionality
Eye tracking integration
2. WebGazer Integration ( src/components/WebGazerInit.tsx )
Handles eye tracking functionality:
WebGazer.js initialization
Focus detection
Attention monitoring
UI feedback
3. Dashboard Layout ( src/components/Layout/DashboardLayout.tsx )
Provides the application shell:
Navigation
User interface structure
Responsive layout
Setup and Installation
Prerequisites
Node.js (v16 or higher)
npm or yarn
Modern web browser with WebRTC support (Chrome, Firefox, Edge)
Webcam and microphone
SSL certificate for local development (required for WebRTC and WebGazer)
Installation Steps
1. Clone the Repository
git clone https://github.com/yourusername/processpro.git
cd processpro
2. Install Dependencies
npm install
# or using yarn
yarn install
3. Environment Configuration Create a .env file in the root directory:
VITE_SOCKET_URL=your_socket_server_url
VITE_API_URL=your_api_server_url
VITE_GROQ_API_KEY=your_groq_api_key
4. SSL Setup for Local Development Create a self-signed certificate for HTTPS:
# Using mkcert (recommended)
mkcert -install
mkcert localhost
Update vite.config.ts:
import { defineConfig } from 'vite';
import fs from 'fs';
export default defineConfig({
server: {
https: {
key: fs.readFileSync('localhost-key.pem'),
cert: fs.readFileSync('localhost.pem'),
},
},
});
5. Start Development Server
npm run dev
# or using yarn
yarn dev
Access the application at https://localhost:5173
Docker Deployment
1. Build Docker Image
docker build -t processpro .
2. Run Container
docker run -p 3000:3000 processpro
Production Deployment
1. Build Application
npm run build
# or using yarn
yarn build
2. Serve Production Build
npm run serve
# or using yarn
yarn serve
Configuration Options
WebRTC Configuration
Customize STUN/TURN servers in src/config/webrtc.ts :
export const webrtcConfig = {
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' },
{
urls: 'turn:your-turn-server.com',
username: 'username',
credential: 'password',
},
],
};
WebGazer Configuration
Adjust eye tracking settings in src/config/webgazer.ts :
export const webgazerConfig = {
showVideo: false,
showFaceOverlay: false,
showFaceFeedbackBox: false,
showVideoPreview: false,
trackingThreshold: 5000, // ms before triggering unfocused state
};
System Requirements
Minimum Requirements
CPU: Dual-core processor (2.0 GHz or higher)
RAM: 4GB
Network: Stable broadband connection (1 Mbps up/down)
Camera: 720p webcam
Browser: Latest version of Chrome, Firefox, or Edge
Recommended Requirements
CPU: Quad-core processor (2.5 GHz or higher)
RAM: 8GB
Network: High-speed connection (5+ Mbps up/down)
Camera: 1080p webcam
Browser: Chrome (latest version) for optimal WebGazer performance
Troubleshooting Installation
1. SSL Certificate Issues
Ensure mkcert is properly installed
Trust the local certificate authority
Clear browser cache and restart
2. WebGazer Installation
Check browser compatibility
Verify camera permissions
Ensure proper lighting conditions
3. Dependencies Issues
# Clear npm cache
npm cache clean --force
# Remove node_modules and reinstall
rm -rf node_modules
npm install
Implementation Details
WebRTC Connection Flow
1. User joins a meeting room
2. Socket.IO establishes initial connection
3. WebRTC peer connection is created
4. ICE candidates are exchanged
5. Media streams are connected
6. Video/audio communication begins
Eye Tracking Implementation
1. WebGazer.js is initialized when enabled
2. Tracks user's gaze position
3. Monitors focus on the remote video area
4. Triggers notifications for attention loss
5. Updates UI to reflect attention status
Recording Process
1. MediaRecorder API captures local stream
2. Data is stored in chunks
3. On stop, chunks are combined into a Blob
4. Blob is converted to downloadable format
5. User can save recording locally
Usage Guide
Creating a Meeting
1. Click "New Meeting" button
2. Fill in meeting details:
Title
Description
Start time
End time
3. Submit to create meeting
Joining a Meeting
1. Select meeting from the list
2. Grant camera/microphone permissions
3. Wait for connection to establish
4. Begin video conference
Using Attention Tracking
1. Click the eye icon to enable tracking
2. Green indicator shows focused state
3. Red indicator shows unfocused state
4. Notifications appear when attention is lost
5. Click eye icon again to disable tracking
Recording a Meeting
1. Click record button (circle icon)
2. Recording begins with red indicator
3. Click stop button to end recording
4. Click save button to download recording
API Integration
Socket.IO Events
room:joined : Handle new participant joining
interface RoomJoinedData {
roomId: string;
userId: string;
username: string;
}
peer:joined : Initialize peer connection
interface PeerJoinedData {
peerId: string;
username: string;
avatar: string;
}
peer:offer : Handle connection offer
interface PeerOfferData {
offer: RTCSessionDescription;
peerId: string;
}
peer:answer : Process connection answer
interface PeerAnswerData {
answer: RTCSessionDescription;
peerId: string;
}
peer:ice : Exchange ICE candidates
interface PeerIceData {
candidate: RTCIceCandidate;
peerId: string;
}
peer:left : Handle participant disconnection
interface PeerLeftData {
peerId: string;
reason?: string;
}
REST API Endpoints
Authentication
// POST /api/auth/login
interface LoginRequest {
email: string;
password: string;
}
interface LoginResponse {
token: string;
user: User;
}
// POST /api/auth/register
interface RegisterRequest {
email: string;
password: string;
name: string;
role: 'user' | 'admin';
department: string;
}
// GET /api/auth/me
interface UserProfile {
id: string;
email: string;
name: string;
role: string;
department: string;
avatar: string;
}
Meetings
// GET /api/meetings
interface Meeting {
id: string;
title: string;
description: string;
startTime: Date;
endTime: Date;
participants: User[];
host: User;
status: 'scheduled' | 'ongoing' | 'completed';
}
// POST /api/meetings
interface CreateMeetingRequest {
title: string;
description: string;
startTime: Date;
endTime: Date;
participantIds: string[];
}
// GET /api/meetings/:id/recordings
interface MeetingRecording {
id: string;
meetingId: string;
url: string;
duration: number;
createdAt: Date;
size: number;
}
Tasks
// GET /api/tasks
interface TaskResponse {
id: string;
title: string;
description: string;
assignee: User;
dueDate: Date;
priority: 'low' | 'medium' | 'high';
status: 'todo' | 'in-progress' | 'completed';
createdAt: Date;
updatedAt: Date;
}
// POST /api/tasks
interface CreateTaskRequest {
title: string;
description: string;
assigneeId: string;
dueDate: Date;
priority: 'low' | 'medium' | 'high';
}
Chat
// GET /api/messages
interface MessageResponse {
id: string;
content: string;
sender: User;
timestamp: Date;
type: 'text' | 'file' | 'image' | 'video';
reactions: Reaction[];
threadId?: string;
}
// POST /api/messages
interface SendMessageRequest {
content: string;
type: 'text' | 'file' | 'image' | 'video';
threadId?: string;
}
Performance Optimization
1. Resource Management
Automatic cleanup of WebRTC connections on unmount
Media stream tracks stopped when not in use
Socket connection pooling for efficient real-time communication
Efficient memory management for recording chunks
Proper disposal of WebGazer resources
2. UI Optimization
React.memo for expensive components
Virtual scrolling for chat messages
Lazy loading of meeting recordings
Image optimization with next-gen formats
Debounced event handlers for performance
CSS containment for layout optimization
3. Network Optimization
WebRTC connection quality monitoring
Adaptive video quality based on bandwidth
Socket message batching
Progressive image loading
Caching of static assets
Compression of data transfers
Error Handling
1. Connection Issues
Automatic reconnection with exponential backoff
Fallback to lower video quality
Socket connection health monitoring
ICE connection state management
Clear user feedback on connection status
2. Media Errors
Graceful fallback to audio-only mode
Device change detection and handling
Automatic stream recovery
Clear permission request prompts
Helpful error messages for users
3. Application Errors
Global error boundary implementation
Structured error logging
User-friendly error messages
Automatic error reporting
Recovery mechanisms for critical features
Future Enhancements
1. Planned Features
Multi-party screen sharing
Live document collaboration
Meeting transcription with AI
Virtual backgrounds
Meeting polls and surveys
Breakout rooms
Meeting templates
Calendar integration
2. Technical Improvements
WebAssembly optimization for WebGazer
Custom TURN server deployment
Enhanced security features
Mobile application development
Offline support
End-to-end encryption
Advanced analytics dashboard
