SignSync
SignSync is a web application designed for sign language interpreters to practice, record, and compare their interpretations against YouTube videos. It allows users to record themselves interpreting a source video and share their work with peers for collaborative feedback and comparison.
Features
- YouTube Integration: seamless playback of YouTube videos as source material.
- Webcam Recording: Record your interpretation while watching the source video in real-time.
- Synchronized Playback: Watch your recorded interpretation synced perfectly with the original YouTube video.
- Collaborative Comparison:
- Generate unique share links for your recordings.
- A second interpreter can record their version alongside yours.
- View two interpretations side-by-side for direct comparison.
- Video Controls:
- Play/Pause all videos simultaneously.
- Seek through the timeline to review specific sections.
- Swap video positions for better viewing preference.
- Headstart Offset: Automatic 2-second headstart for the first recording to align interpretation flow.
Tech Stack
- Frontend: React, Vite
- Backend: Node.js, Express
- Database: SQLite (for storing recording metadata)
- File Storage: Local filesystem (video uploads)
Getting Started
Prerequisites
- Node.js (v18+ recommended)
- npm
Installation
-
Clone the repository:
git clone <repository-url> cd SignSync -
Install dependencies:
npm install
Running the Application
To run both the frontend and backend servers concurrently (recommended for development):
npm run dev:all
Alternatively, you can run them separately:
Frontend (Vite):
npm run dev
Backend (Express):
npm run server
The application will be available at http://localhost:5173 (or the port shown in your terminal).
The backend server runs on http://localhost:3001.
Project Structure
src/: React frontend source code.components/: Reusable UI components (YouTubePlayer,WebcamRecorder,UserForm).
server/: Express backend source code.index.js: Server entry point and API routes.signsync.db: SQLite database file.
public/media/: Directory where recorded videos are stored locally.