81 lines
2.3 KiB
Markdown
81 lines
2.3 KiB
Markdown
# 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
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd SignSync
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Running the Application
|
|
|
|
To run both the frontend and backend servers concurrently (recommended for development):
|
|
|
|
```bash
|
|
npm run dev:all
|
|
```
|
|
|
|
Alternatively, you can run them separately:
|
|
|
|
**Frontend (Vite):**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
**Backend (Express):**
|
|
```bash
|
|
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.
|
|
|
|
## License
|
|
|
|
[MIT](LICENSE) |