I-Player

Custom media player for telecom/raw codecs with decoding, streaming, and waveform playback.

Project Summary

I-Player is a custom media player that supports non-standard telecom codecs (G711, G726, G728) and enables:

• Decoding to WAV/MP3
• Instant playback via live chunked streaming
• Stable file-based playback with waveform
• Server-generated waveform for live streams

Visual Overview

🖥️ Main Dashboard

High-fidelity engineering dashboard for real-time signal processing and archive management.

📱 Mobile Interface

Fully responsive mobile architecture for remote telemetry monitoring.

📖 Documentation Portal

Premium dark-theme documentation system.

High-contrast light-theme documentation.

⚡ Technical Capabilities

Core system architecture and codec compatibility modules.

🎨 Identity & Branding

Industrial core design language and system identity.

Tech Stack

Client

• React + TypeScript (Vite)
• WaveSurfer.js (file-based waveform)
• Custom canvas waveform (live chunked streaming)

Server

• Node.js + Express + TypeScript
• FFmpeg (decode/transcode/stream)
• Prisma (metadata storage)

Prerequisites

• Node.js 18+ (recommended)
• npm 9+ (or pnpm/yarn)
• FFmpeg available in PATH
• SQLite (default Prisma DB)

Repository URL (for reference):

https://github.com/getabalewKemaw/I-Player

How to Clone

git clone https://github.com/getabalewKemaw/I-Player.git
cd I-Player

How to Run

1) Install Dependencies

cd client
npm install

cd ../server
npm install

Create a .env file in the root of the server/ folder:

DATABASE_URL="postgresql://Username:Password@localhost:Port/Dbname?schema=public"
PORT=3000
FFMPEG_PATH=
FFPROBE_PATH=
UPLOADS_DIR=./uploads
PROCESSED_DIR=./processed
TEMP_DIR=./temp

2) Start the Server

cd server
npm run dev

3) Start the Client

cd client
npm run dev

4) Open the App

http://localhost:5173

What We Built

Core Features

• Decode telecom codecs to WAV/MP3
• File-based streaming with HTTP Range
• Live chunked streaming with MSE for instant playback
• Server-generated waveform peaks for live streams
• Seamless switch to file-based playback after decode
• Playback controls: play/pause, seek, skip, volume, rate

Operational Flow

• File discovery and metadata extraction
• Store metadata in Prisma DB
• Stream from uploads/ (live) or processed/ (file-based)

Folder Structure (Overview)

client/        # React UI + hooks + components
server/        # Express API + ffmpeg + chunking
docs/          # Architecture and implementation docs

---

Generated by Telecom Signal Systems