@shotstack/shotstack-studio 1.0.0 → 1.1.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/shotstack-studio.es.js +538 -785
- package/dist/shotstack-studio.umd.js +6 -6
- package/package.json +4 -2
- package/readme.md +23 -5
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"cpuccino",
|
|
6
6
|
"dazzatron"
|
|
7
7
|
],
|
|
8
|
-
"version": "1.
|
|
8
|
+
"version": "1.1.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,6 +31,9 @@
|
|
|
31
31
|
"build": "vite build && tsc --emitDeclarationOnly",
|
|
32
32
|
"prepublishOnly": "npm run build"
|
|
33
33
|
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@ffmpeg/ffmpeg": "^0.12.15"
|
|
36
|
+
},
|
|
34
37
|
"devDependencies": {
|
|
35
38
|
"@types/howler": "^2.2.12",
|
|
36
39
|
"@types/node": "^22.9.0",
|
|
@@ -46,7 +49,6 @@
|
|
|
46
49
|
"vite": "^5.4.10"
|
|
47
50
|
},
|
|
48
51
|
"dependencies": {
|
|
49
|
-
"@ffmpeg/ffmpeg": "^0.12.15",
|
|
50
52
|
"howler": "^2.2.4",
|
|
51
53
|
"opentype.js": "^1.3.4",
|
|
52
54
|
"pixi-filters": "^6.0.5",
|
package/readme.md
CHANGED
|
@@ -6,6 +6,15 @@
|
|
|
6
6
|
|
|
7
7
|
A JavaScript library for creating and editing videos in the browser.
|
|
8
8
|
|
|
9
|
+
## Interactive Examples
|
|
10
|
+
|
|
11
|
+
Try Shotstack Studio in your preferred framework:
|
|
12
|
+
|
|
13
|
+
[](https://stackblitz.com/edit/studio-sdk-typescript)
|
|
14
|
+
[](https://stackblitz.com/edit/shotstack-studio-react)
|
|
15
|
+
[](https://stackblitz.com/edit/shotstack-studio-vue)
|
|
16
|
+
[](https://stackblitz.com/edit/shotstack-studio-angular)
|
|
17
|
+
|
|
9
18
|
## Installation
|
|
10
19
|
|
|
11
20
|
```bash
|
|
@@ -16,14 +25,23 @@ npm install @shotstack/shotstack-studio
|
|
|
16
25
|
yarn add @shotstack/shotstack-studio
|
|
17
26
|
```
|
|
18
27
|
|
|
28
|
+
### FFmpeg (peer dependency)
|
|
29
|
+
|
|
30
|
+
Install FFmpeg to use the browser based `VideoExporter` class. This is kept separate to prevent WASM / Web‑Worker clashes in frameworks like Next.js.
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm i @ffmpeg/ffmpeg
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
You can skip this if you’re using the Shotstack Edit API.
|
|
37
|
+
|
|
19
38
|
## Quick Start
|
|
20
39
|
|
|
21
40
|
```typescript
|
|
22
41
|
import { Edit, Canvas, Controls } from "@shotstack/shotstack-studio";
|
|
23
|
-
import myTemplateJson from "hello.json"
|
|
24
42
|
|
|
25
43
|
// 1. Retrieve an edit from a template
|
|
26
|
-
const templateUrl =
|
|
44
|
+
const templateUrl = "https://shotstack-assets.s3.amazonaws.com/templates/hello-world/hello.json";
|
|
27
45
|
const response = await fetch(templateUrl);
|
|
28
46
|
const template = await response.json();
|
|
29
47
|
|
|
@@ -36,7 +54,7 @@ const canvas = new Canvas(template.output.size, edit);
|
|
|
36
54
|
await canvas.load(); // Renders to [data-shotstack-studio] element
|
|
37
55
|
|
|
38
56
|
// 4. Load the template
|
|
39
|
-
await edit.loadEdit(
|
|
57
|
+
await edit.loadEdit(template);
|
|
40
58
|
|
|
41
59
|
// 5. Add keyboard controls
|
|
42
60
|
const controls = new Controls(edit);
|
|
@@ -46,13 +64,13 @@ await controls.load();
|
|
|
46
64
|
Your HTML should include a container with the `data-shotstack-studio` attribute:
|
|
47
65
|
|
|
48
66
|
```html
|
|
49
|
-
<div data-shotstack-studio
|
|
67
|
+
<div data-shotstack-studio></div>
|
|
50
68
|
```
|
|
51
69
|
|
|
52
70
|
## Features
|
|
53
71
|
|
|
54
72
|
- Create video compositions with multiple tracks and clips
|
|
55
|
-
- Use in conjunction with the Shotstack Edit API to render video
|
|
73
|
+
- Use in conjunction with the [Shotstack Edit API](https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/) to render video
|
|
56
74
|
- Export to video using browser-based FFmpeg
|
|
57
75
|
|
|
58
76
|
## Main Components
|