SWISHR - Basketball Shot Analysis Web App

A Vue.js web application that helps basketball players record, analyze, and improve their shooting form using AI-powered pose estimation technology.

Features

Video Recording with Real-time Guidance

• Intuitive recording interface with live timer
• AI-powered voice guidance for positioning
• Visual position guides and status indicators
• 3-second countdown before recording starts
• Record, pause, and resume functionality

AI-Powered Pose Analysis

• Real-time skeleton tracking using MediaPipe Pose
• Joint angle calculations (elbow, knee, wrist, shoulder)
• Form correctness detection for legs, elbows, hands, and posture
• Color-coded visual feedback (green = correct, red = incorrect)
• Shot detection and key moment identification

Detailed Feedback & Analysis

• Video playback with skeleton overlay
• Frame-by-frame navigation
• Structured feedback organized by body region (legs, elbows, hands, posture)
• Average angle display vs. ideal angles
• Overall assessment with correctness percentages
• Performance score calculation

History & Progress Tracking

• Complete recording history with video thumbnails
• Favorites system with star ratings
• Filter options (All, Favorites)
• Date and time stamps for each recording
• Delete functionality with confirmation
• Persistent storage using browser localStorage

Privacy & Data Security

• All data stored locally on your device
• No server uploads or external data transmission
• Complete control over your recordings
• Clear browser data to remove all videos

Technology Stack

• Vue.js 3 with Composition API
• Pinia for state management
• Vue Router for navigation
• MediaPipe Pose for pose estimation
• Web Speech API for voice guidance
• MediaRecorder API for video recording
• Canvas API for skeleton overlay rendering
• Vite for build tooling

Prerequisites

• Node.js 16.x or higher
• npm or yarn package manager
• Modern web browser with support for:
  • WebRTC (camera access)
  • Web Speech API (voice guidance)
  • MediaRecorder API (video recording)
  • localStorage (data persistence)
  • Canvas API (overlay rendering)

Recommended Browsers:

• Chrome 90+
• Edge 90+
• Safari 14+

Project Structure

src/
├── App.vue                 # Main application component
├── main.js                 # Application entry point
├── assets/
│   ├── favicon/           # App icon
│   └── styles/
│       ├── main.css       # Global styles
│       └── audio/         # Voice guidance audio files
├── router/
│   └── index.js           # Vue Router configuration
├── stores/
│   └── videoStore.js      # Pinia store for video data
├── utils/
│   ├── poseAnalyzer.js    # Pose analysis logic
│   └── voiceGuidance.js   # Voice guidance system
└── views/
    ├── Home.vue           # Landing page
    ├── Record.vue         # Recording interface
    ├── Feedback.vue       # Analysis and feedback page
    ├── History.vue        # Recording history
    └── Terms.vue          # Terms and conditions

Installation & Setup

Option 1: Using start.bat (Windows Only)

1. Clone the repository and navigate to the directory:

cd Mod06_Project_Grp03-Team1

2. Run the batch file:

start.bat

Option 2: Manual Setup (All Platforms)

1. Clone the repository and navigate to the directory:

cd Mod06_Project_Grp03-Team1

2. Install dependencies:

npm install

3. Start the development server:

npm build dev ; npm run dev

4. Open your browser to the URL shown in the terminal (typically http://localhost:5173) check vite.config file for this

5. Grant camera and microphone permissions when prompted when opening recording page

Usage Guide

Recording a Shot

1. Click "Start Recording" from the home page
2. Allow camera and microphone permissions
3. Position yourself so your full body is visible in the frame
4. Follow the voice guidance to center yourself properly
5. Click "Start Recording" when the status shows "Ready"
6. Wait for the 3-second countdown
7. Perform your shooting motion
8. Click "Stop Recording" when finished

Viewing Feedback

1. After recording, you'll be redirected to the Feedback page
2. Watch your recording with the AI-generated skeleton overlay
3. Review detailed analysis including:
   • Body region-specific feedback (legs, elbows, hands, posture)
   • Angle measurements with color-coded correctness indicators
   • Overall performance score and assessment
4. Navigate through the video using the timeline
5. Click "Save to History" to keep the recording

Managing Your History

1. Navigate to the History page from the navigation menu
2. View all saved recordings with thumbnails and timestamps
3. Click on any recording to view its detailed feedback
4. Star your favorite shots for quick access
5. Use the filter to show All or Favorites only
6. Delete unwanted recordings using the delete button

Privacy & Data Management

• All recordings are stored locally in your browser
• No data is sent to external servers
• To delete all data: clear your browser's localStorage
• Individual recordings can be deleted from the History page

Best Practices for Recording

Camera Setup

• Place camera at chest height
• Position camera 6-10 feet away from shooting area
• Ensure your full body is visible in the frame
• Use a stable surface or tripod for best results

Environment

• Record in a well-lit area
• Use a clear, uncluttered background
• Ensure there's enough space for your full shooting motion
• Minimize background movement and distractions

Recording Tips

• Wait for the "Ready" status before starting
• Follow voice guidance for optimal positioning
• Perform your natural shooting motion
• Keep your body within the frame throughout the shot

Configuration

Pose Analysis Settings

Adjust pose detection parameters in src/utils/poseAnalyzer.js:

{
  modelComplexity: 1,           // 0, 1, or 2 (higher = more accurate, slower)
  minDetectionConfidence: 0.5,  // 0.0 to 1.0
  minTrackingConfidence: 0.5    // 0.0 to 1.0
}

Ideal Angle Thresholds

Modify angle thresholds in poseAnalyzer.js:

idealAngles = {
  elbow: { min: 85, max: 95 },
  knee: { min: 110, max: 130 },
  // ... other angles
}

Building for Production

Build the application for production deployment:

npm run build

Preview the production build locally:

npm run preview

The built files will be in the dist/ directory.

Troubleshooting

Camera Not Working

• Ensure browser permissions are granted
• Check if another application is using the camera
• Try a different browser
• Restart your browser

Voice Guidance Not Working

• Check browser microphone permissions
• Ensure system volume is not muted
• Try enabling Web Speech API in browser settings

Recordings Not Saving

• Check available browser storage space
• Ensure localStorage is not disabled
• Try clearing old recordings to free up space

Poor Pose Detection

• Improve lighting conditions
• Ensure full body is visible
• Reduce background clutter
• Move closer to or farther from camera

Browser Storage Limits

• Videos are stored in localStorage (typically 5-10MB limit)
• Older recordings may need to be deleted to make room for new ones
• Consider exporting important recordings before clearing data

Acknowledgments

• Inspired by AI-basketball-analysis
• Built with MediaPipe Pose by Google

Legal

• Terms of Service: See Terms.vue for complete terms and conditions
• Data Privacy: All data is stored locally; no external data collection
• MediaPipe License: Apache License 2.0
• Project License: Educational and personal use only