@shotstack/shotstack-studio 1.5.1 → 1.7.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/dist/index.d.ts +13460 -2563
- package/dist/shotstack-studio.es.js +46 -8962
- package/dist/shotstack-studio.umd.js +194 -8
- package/package.json +3 -4
- package/readme.md +5 -15
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"cpuccino",
|
|
6
6
|
"dazzatron"
|
|
7
7
|
],
|
|
8
|
-
"version": "1.
|
|
8
|
+
"version": "1.7.0",
|
|
9
9
|
"description": "A video editing library for creating and editing videos with Shotstack",
|
|
10
10
|
"type": "module",
|
|
11
11
|
"main": "dist/shotstack-studio.umd.js",
|
|
@@ -31,9 +31,6 @@
|
|
|
31
31
|
"build": "vite build",
|
|
32
32
|
"prepublishOnly": "npm run build"
|
|
33
33
|
},
|
|
34
|
-
"peerDependencies": {
|
|
35
|
-
"@ffmpeg/ffmpeg": "^0.12.15"
|
|
36
|
-
},
|
|
37
34
|
"devDependencies": {
|
|
38
35
|
"@types/howler": "^2.2.12",
|
|
39
36
|
"@types/node": "^22.9.0",
|
|
@@ -50,8 +47,10 @@
|
|
|
50
47
|
"vite-plugin-dts": "^4.5.4"
|
|
51
48
|
},
|
|
52
49
|
"dependencies": {
|
|
50
|
+
"@shotstack/shotstack-canvas": "^1.1.2",
|
|
53
51
|
"fast-deep-equal": "^3.1.3",
|
|
54
52
|
"howler": "^2.2.4",
|
|
53
|
+
"mediabunny": "^1.11.2",
|
|
55
54
|
"opentype.js": "^1.3.4",
|
|
56
55
|
"pixi-filters": "^6.0.5",
|
|
57
56
|
"pixi.js": "^8.5.2",
|
package/readme.md
CHANGED
|
@@ -23,7 +23,7 @@ Try Shotstack Studio in your preferred framework:
|
|
|
23
23
|
- WYSIWYG text editing
|
|
24
24
|
- Multi-track, drag-and-drop clip manipulation with snap-to-grid
|
|
25
25
|
- Use in conjunction with the [Shotstack Edit API](https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/) to render video
|
|
26
|
-
- Export to video
|
|
26
|
+
- Export to video via the browser
|
|
27
27
|
|
|
28
28
|
## Installation
|
|
29
29
|
|
|
@@ -35,16 +35,6 @@ npm install @shotstack/shotstack-studio
|
|
|
35
35
|
yarn add @shotstack/shotstack-studio
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
### FFmpeg (peer dependency)
|
|
39
|
-
|
|
40
|
-
Install FFmpeg to use the browser based `VideoExporter` class. This is kept separate to prevent WASM / Web Worker clashes in frameworks like Next.js.
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npm install @ffmpeg/ffmpeg
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
You can skip this if you're using the [Shotstack Edit API](https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/) for rendering videos.
|
|
47
|
-
|
|
48
38
|
## Quick Start
|
|
49
39
|
|
|
50
40
|
```typescript
|
|
@@ -186,6 +176,7 @@ await controls.load();
|
|
|
186
176
|
// Period - Step forward one frame
|
|
187
177
|
// Cmd/Ctrl + Z - Undo
|
|
188
178
|
// Cmd/Ctrl + Shift + Z - Redo
|
|
179
|
+
// Cmd/Ctrl + E - Export/download video
|
|
189
180
|
```
|
|
190
181
|
|
|
191
182
|
### Timeline
|
|
@@ -209,7 +200,7 @@ await timeline.load();
|
|
|
209
200
|
|
|
210
201
|
### VideoExporter
|
|
211
202
|
|
|
212
|
-
The VideoExporter class exports the
|
|
203
|
+
The VideoExporter class exports the Edit to a MP4 video file encoded in h264 and AAC.
|
|
213
204
|
|
|
214
205
|
```typescript
|
|
215
206
|
const exporter = new VideoExporter(edit, canvas);
|
|
@@ -302,7 +293,6 @@ const timeline = new Timeline(edit, { width: 1280, height: 300 }, { theme: custo
|
|
|
302
293
|
Themes are organized by component, making it intuitive to customize specific parts of the interface:
|
|
303
294
|
|
|
304
295
|
- **Timeline**: Controls the appearance of the timeline interface
|
|
305
|
-
|
|
306
296
|
- `toolbar`: Playback controls and buttons
|
|
307
297
|
- `ruler`: Time markers and labels
|
|
308
298
|
- `tracks`: Track backgrounds and borders
|
|
@@ -483,7 +473,7 @@ Creates a new timeline interface for the provided Edit.
|
|
|
483
473
|
|
|
484
474
|
### VideoExporter
|
|
485
475
|
|
|
486
|
-
The `VideoExporter` class handles exporting the edit to
|
|
476
|
+
The `VideoExporter` class handles exporting the edit to MP4.
|
|
487
477
|
|
|
488
478
|
```typescript
|
|
489
479
|
import { VideoExporter } from "@shotstack/shotstack-studio";
|
|
@@ -499,4 +489,4 @@ Creates a new exporter for the provided Edit and Canvas.
|
|
|
499
489
|
|
|
500
490
|
#### Methods
|
|
501
491
|
|
|
502
|
-
- `async export(filename: string = "shotstack-export.mp4", fps: number = 25)` - Export the edit to
|
|
492
|
+
- `async export(filename: string = "shotstack-export.mp4", fps: number = 25)` - Export the edit to an MP4 video file
|