@rajeev02/video-editor 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +197 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# @rajeev02/video-editor
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@rajeev02/video-editor)
|
|
4
|
+
[](https://github.com/Rajeev02/rajeev-sdk/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
**Video editor** with multi-track timeline, transitions, color grading, chroma key, speed ramps, and export presets for Instagram/YouTube/WhatsApp.
|
|
7
|
+
|
|
8
|
+
Part of [Rajeev SDK](https://github.com/Rajeev02/rajeev-sdk) — cross-platform infrastructure libraries for building apps that work everywhere.
|
|
9
|
+
|
|
10
|
+
## Why use this?
|
|
11
|
+
|
|
12
|
+
- **Multi-track timeline** — Video, audio, text, and sticker tracks with precise positioning
|
|
13
|
+
- **Transitions** — Crossfade, slide, zoom, wipe, dissolve, rotate between clips
|
|
14
|
+
- **Color grading** — 10+ filter presets (cinematic, vintage, warm, cool) plus custom LUT support
|
|
15
|
+
- **Speed control** — Constant speed (0.25x–4x) and speed ramps with ease curves
|
|
16
|
+
- **Chroma key** — Green/blue screen removal with tolerance and edge smoothing
|
|
17
|
+
- **Export presets** — Instagram Reels (9:16), YouTube (16:9), WhatsApp Status, TikTok, Twitter — all pre-configured
|
|
18
|
+
- **Text & stickers** — Animated text overlays, sticker tracks with timing
|
|
19
|
+
|
|
20
|
+
## Platform Support
|
|
21
|
+
|
|
22
|
+
| Platform | Engine | Status |
|
|
23
|
+
| ---------- | ---------- | ------ |
|
|
24
|
+
| iOS 16+ | TypeScript | ✅ |
|
|
25
|
+
| Android 7+ | TypeScript | ✅ |
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install @rajeev02/video-editor
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Peer Dependencies
|
|
34
|
+
|
|
35
|
+
- `react` >= 18.3.0
|
|
36
|
+
- `react-native` >= 0.84.0 _(optional)_
|
|
37
|
+
|
|
38
|
+
## Quick Start
|
|
39
|
+
|
|
40
|
+
### Timeline
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { VideoTimeline } from "@rajeev02/video-editor";
|
|
44
|
+
|
|
45
|
+
const timeline = new VideoTimeline();
|
|
46
|
+
|
|
47
|
+
// Add video clips
|
|
48
|
+
const clip1 = timeline.addVideoClip({
|
|
49
|
+
sourceUri: "video1.mp4",
|
|
50
|
+
sourceStartMs: 0,
|
|
51
|
+
sourceEndMs: 5000,
|
|
52
|
+
durationMs: 5000,
|
|
53
|
+
speed: 1,
|
|
54
|
+
volume: 1,
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// Split a clip
|
|
58
|
+
const clip2 = timeline.splitClip(clip1, 2500);
|
|
59
|
+
|
|
60
|
+
// Add transition between clips
|
|
61
|
+
timeline.addTransition(clip1, clip2, "crossfade", 500);
|
|
62
|
+
|
|
63
|
+
// Add audio track
|
|
64
|
+
timeline.addAudioClip({
|
|
65
|
+
sourceUri: "bg-music.mp3",
|
|
66
|
+
timelineStartMs: 0,
|
|
67
|
+
durationMs: 10000,
|
|
68
|
+
volume: 0.5,
|
|
69
|
+
fadeInMs: 1000,
|
|
70
|
+
fadeOutMs: 1000,
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// Add text overlay
|
|
74
|
+
timeline.addTextClip({
|
|
75
|
+
text: "Summer 2026",
|
|
76
|
+
fontFamily: "Helvetica",
|
|
77
|
+
fontSize: 32,
|
|
78
|
+
color: "#FFFFFF",
|
|
79
|
+
position: { x: 0.5, y: 0.1 },
|
|
80
|
+
startMs: 0,
|
|
81
|
+
durationMs: 3000,
|
|
82
|
+
animation: "fade_in",
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
// Get timeline state
|
|
86
|
+
const state = timeline.getState();
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Export
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
import { ExportController, getExportPresets } from "@rajeev02/video-editor";
|
|
93
|
+
|
|
94
|
+
// See all available presets
|
|
95
|
+
const presets = getExportPresets();
|
|
96
|
+
// → ["instagram_reels", "youtube_1080p", "youtube_4k", "whatsapp_status", "tiktok", "twitter"]
|
|
97
|
+
|
|
98
|
+
// Export for Instagram Reels
|
|
99
|
+
const exporter = new ExportController({
|
|
100
|
+
format: "mp4",
|
|
101
|
+
codec: "h264",
|
|
102
|
+
quality: "high",
|
|
103
|
+
resolution: { width: 1080, height: 1920 }, // 9:16
|
|
104
|
+
fps: 30,
|
|
105
|
+
videoBitrate: 8_000_000,
|
|
106
|
+
audioBitrate: 192_000,
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
exporter.onProgress((p) => {
|
|
110
|
+
console.log(`${p.percent}% — ETA: ${p.estimatedTimeRemainingMs}ms`);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
exporter.startExport();
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Color Grading & Effects
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
import { getVideoFilterPresets } from "@rajeev02/video-editor";
|
|
120
|
+
|
|
121
|
+
const filters = getVideoFilterPresets();
|
|
122
|
+
// → ["cinematic", "vintage", "warm_sunset", "cool_blue", "noir", "vivid", ...]
|
|
123
|
+
|
|
124
|
+
// Apply to a clip
|
|
125
|
+
timeline.applyFilter(clip1, "cinematic");
|
|
126
|
+
|
|
127
|
+
// Chroma key (green screen)
|
|
128
|
+
timeline.applyChromaKey(clip1, {
|
|
129
|
+
color: "#00FF00",
|
|
130
|
+
tolerance: 0.3,
|
|
131
|
+
edgeSmoothing: 0.1,
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
// Speed ramp
|
|
135
|
+
timeline.applySpeedRamp(clip1, [
|
|
136
|
+
{ timeMs: 0, speed: 1 },
|
|
137
|
+
{ timeMs: 1000, speed: 0.25 }, // Slow-mo
|
|
138
|
+
{ timeMs: 2000, speed: 2 }, // Speed up
|
|
139
|
+
{ timeMs: 3000, speed: 1 }, // Normal
|
|
140
|
+
]);
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Transition Types
|
|
144
|
+
|
|
145
|
+
| Transition | Description |
|
|
146
|
+
| ---------------------------- | -------------------- |
|
|
147
|
+
| `crossfade` | Smooth opacity blend |
|
|
148
|
+
| `slide_left` / `slide_right` | Slide in from side |
|
|
149
|
+
| `zoom_in` / `zoom_out` | Zoom transition |
|
|
150
|
+
| `wipe_left` / `wipe_right` | Wipe reveal |
|
|
151
|
+
| `dissolve` | Pixel dissolve |
|
|
152
|
+
| `rotate` | Rotation transition |
|
|
153
|
+
|
|
154
|
+
## Export Presets
|
|
155
|
+
|
|
156
|
+
| Preset | Resolution | FPS | Bitrate |
|
|
157
|
+
| --------------- | ---------------- | --- | ------- |
|
|
158
|
+
| Instagram Reels | 1080×1920 (9:16) | 30 | 8 Mbps |
|
|
159
|
+
| YouTube 1080p | 1920×1080 (16:9) | 30 | 8 Mbps |
|
|
160
|
+
| YouTube 4K | 3840×2160 (16:9) | 30 | 35 Mbps |
|
|
161
|
+
| WhatsApp Status | 720×1280 (9:16) | 30 | 3 Mbps |
|
|
162
|
+
| TikTok | 1080×1920 (9:16) | 30 | 6 Mbps |
|
|
163
|
+
| Twitter | 1280×720 (16:9) | 30 | 5 Mbps |
|
|
164
|
+
|
|
165
|
+
## API Reference
|
|
166
|
+
|
|
167
|
+
### `VideoTimeline`
|
|
168
|
+
|
|
169
|
+
| Method | Description |
|
|
170
|
+
| ----------------------------------------------- | ----------------------- |
|
|
171
|
+
| `addVideoClip(config)` | Add video to timeline |
|
|
172
|
+
| `addAudioClip(config)` | Add audio track |
|
|
173
|
+
| `addTextClip(config)` | Add text overlay |
|
|
174
|
+
| `splitClip(clipId, timeMs)` | Split clip at position |
|
|
175
|
+
| `addTransition(clip1, clip2, type, durationMs)` | Add transition |
|
|
176
|
+
| `applyFilter(clipId, filterId)` | Apply color filter |
|
|
177
|
+
| `applyChromaKey(clipId, config)` | Apply green screen |
|
|
178
|
+
| `applySpeedRamp(clipId, keyframes)` | Apply speed ramp |
|
|
179
|
+
| `removeClip(clipId)` | Remove a clip |
|
|
180
|
+
| `getState()` | Get full timeline state |
|
|
181
|
+
| `undo()` / `redo()` | Undo/redo edits |
|
|
182
|
+
|
|
183
|
+
### `ExportController`
|
|
184
|
+
|
|
185
|
+
| Method | Description |
|
|
186
|
+
| ---------------------- | ------------------------- |
|
|
187
|
+
| `startExport()` | Begin export |
|
|
188
|
+
| `cancelExport()` | Cancel in-progress export |
|
|
189
|
+
| `onProgress(callback)` | Track export progress |
|
|
190
|
+
|
|
191
|
+
## Full Documentation
|
|
192
|
+
|
|
193
|
+
📖 [Complete API docs with all effects and export options](https://github.com/Rajeev02/rajeev-sdk/blob/main/docs/usage/VIDEO-EDITOR.md)
|
|
194
|
+
|
|
195
|
+
## License
|
|
196
|
+
|
|
197
|
+
MIT © 2026 [Rajeev Kumar Joshi](https://rajeev02.github.io)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rajeev02/video-editor",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Video editor — timeline, trim, merge, split, transitions, effects, music, text, stickers, speed, export",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"author": "Rajeev Kumar Joshi <rajeevjoshi91@gmail.com> (https://rajeev02.github.io)",
|