# media-studio — example app **Auteur** : Dr Hamid MADANI Next.js 16 starter that wires `@mostajs/media` end-to-end : capture (image / webcam / screen + webcam overlay + audio) → edit (split / speed / stickers / subtitles) → export (mp4 / gif / webm) → persist projects (SQLite via `@mostajs/orm`). The app code is **2 files** — everything else is in the npm package. ``` app/ page.tsx export { default } from '@mostajs/media/pages/CaptureEditorPage' layout.tsx {children} ``` The rest of the directory is the production deploy kit (Apache vhost, PM2 ecosystem, scripts) you can adapt to your own server. --- ## Local dev ```bash npm install cp .env.example .env # PORT, DB path, etc. npm run dev # → http://localhost:4499 ``` `ffmpeg` must be on your PATH for server-side video composition (image clips → video). Install it with `apt install ffmpeg` / `brew install ffmpeg`. --- ## Deploy to a server (Ubuntu + Apache + Let's Encrypt) ### 1. Configure connection / domain ```bash cp .env.deploy.example .env.deploy $EDITOR .env.deploy ``` | Variable | Example | Purpose | |---|---|---| | `DEPLOY_SSH` | `user@example.com` or alias `prod-server` | SSH target for rsync | | `DEPLOY_REMOTE_DIR` | `/var/www/media-studio` | Where to install on the server | | `DEPLOY_DOMAIN` | `studio.example.com` | Public hostname (must point A → your server) | | `DEPLOY_EMAIL` | `admin@example.com` | Let's Encrypt contact | | `DEPLOY_PORT` | `4499` | Local Next.js port (Apache reverse-proxies HTTPS → this) | `.env.deploy` is gitignored — never commit it. ### 2. Pre-flight on the server ``` sudo apt install -y nodejs npm ffmpeg apache2 certbot python3-certbot-apache sudo npm i -g pm2 ``` DNS : your `DEPLOY_DOMAIN` must resolve A → server-IP (no AAAA unless you have IPv6). ### 3. First deploy (full install, vhost + cert) ```bash ./deploy.sh # local build + rsync + npm i + pm2 start ssh "cd && ./install.sh" # vhost render + certbot + reload Apache ``` `install.sh` reads `.env.deploy` to render `apache/vhost.template.conf` into `/etc/apache2/sites-available/.conf` (substituting `${DOMAIN}`, `${EMAIL}`, `${PORT}`), enables it, and issues a Let's Encrypt cert via the webroot ACME challenge. ### 4. Subsequent deploys (code-only update) ```bash ./deploy.sh # local build + rsync + npm i + pm2 restart ``` If you also want a clean rebuild on the server : ```bash ssh "cd && ./update.sh" ``` --- ## Layout on the server ``` /var/www/media-studio/ ← DEPLOY_REMOTE_DIR (flat, no /src/) ├── .env (runtime — copied from .env.example on first deploy) ├── .env.deploy (your edited copy of .env.deploy.example) ├── ecosystem.config.cjs (PM2 config — reads .env) ├── apache/vhost.template.conf (rendered into /etc/apache2/...) ├── app/ (page.tsx + layout.tsx + api routes) ├── data/ (SQLite db — gitignored, rsync-preserved) ├── logs/ (PM2 logs) ├── node_modules/ (npm install on server) └── .next/ (Next.js build output) ``` --- ## What the studio does - **Image capture** : webcam still or upload, basic crop / rotate / brightness / contrast. - **Video capture** : webcam recording + screen recording with optional webcam overlay (round bottom-right) **baked into the recorded video** via canvas compositing (rAF + `canvas.captureStream(30)` + `MediaRecorder`). - **Audio mixing** : mic + system / tab audio mixed via Web Audio (`AudioContext` + `MediaStreamAudioDestinationNode`). Live VU meter (``) reads the same pipeline via an `AnalyserNode`. - **Swap toggle** : main view ↔ webcam fullscreen, screen as overlay corner — affects live preview AND the recorded video. - **Editor** : split, speed, stickers, subtitles, image-clip mode. - **Export** : MP4 (instant via stream copy), WebM (re-encode VP8), GIF (single-pass ffmpeg). Server-side ffmpeg via `/api/compose`. - **Persistence** : project files stored in SQLite (auto-schema migration via `@mostajs/orm`). --- ## Source code The studio's UI lives in `@mostajs/media` — see : - `pages/CaptureEditorPage.tsx` — the page re-exported here. - `components/RecorderPreview.tsx` — screen + webcam overlay live preview. - `components/AudioLevelMeter.tsx` — VU meter / spectrum bars. - `components/VideoEditor.tsx` — non-linear editor. - `hooks/useScreenCapture.ts` — capture + canvas compositing + audio pipeline. - `server/compose-route.ts` — ffmpeg server-side composition. - `server/project-db.ts` — SQLite project persistence. Repo :