@hyperframes/producer 0.8.186 → 0.8.189
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 +26 -30
- package/dist/distributed.js +1301 -1329
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +65 -64
- package/dist/index.js +1673 -1668
- package/dist/public-server.js +1589 -1567
- package/dist/server.d.ts +1 -0
- package/dist/services/distributed/assemble.d.ts +2 -1
- package/dist/services/distributed/chunkFrames.d.ts +1 -1
- package/dist/services/distributed/plan.d.ts +2 -1
- package/dist/services/render/segmentManifest.d.ts +1 -0
- package/dist/services/render/stages/assembleStage.d.ts +1 -0
- package/dist/services/render/stages/audioStage.d.ts +6 -4
- package/dist/services/render/stages/captureStage.d.ts +3 -8
- package/dist/services/render/stages/freezePlan.d.ts +2 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -18,18 +18,13 @@ npm install @hyperframes/producer
|
|
|
18
18
|
import { createRenderJob, executeRenderJob } from "@hyperframes/producer";
|
|
19
19
|
|
|
20
20
|
const job = createRenderJob({
|
|
21
|
-
inputPath: "./my-composition.html",
|
|
22
|
-
outputPath: "./output.mp4",
|
|
23
|
-
width: 1920,
|
|
24
|
-
height: 1080,
|
|
25
21
|
fps: 30,
|
|
22
|
+
quality: "standard",
|
|
26
23
|
});
|
|
27
24
|
|
|
28
|
-
|
|
29
|
-
console.log(`${Math.round(progress
|
|
25
|
+
await executeRenderJob(job, "./my-project", "./output.mp4", (currentJob) => {
|
|
26
|
+
console.log(`${Math.round(currentJob.progress)}%`);
|
|
30
27
|
});
|
|
31
|
-
|
|
32
|
-
console.log(result.outputPath); // ./output.mp4
|
|
33
28
|
```
|
|
34
29
|
|
|
35
30
|
### Run as an HTTP server
|
|
@@ -40,24 +35,27 @@ The producer can also run as a render server, accepting render requests over HTT
|
|
|
40
35
|
import { startServer } from "@hyperframes/producer";
|
|
41
36
|
|
|
42
37
|
await startServer({ port: 8080 });
|
|
43
|
-
// POST /render with
|
|
38
|
+
// POST /render or /render/stream with projectDir, html, or previewUrl and render options
|
|
44
39
|
```
|
|
45
40
|
|
|
41
|
+
Both HTTP routes accept optional `pageMotionBlur: "off"` to disable authored page
|
|
42
|
+
motion blur. Omit it to preserve the composition's behavior. Other explicit values
|
|
43
|
+
are rejected before a render starts. This is separate from engine sub-frame
|
|
44
|
+
`motionBlur` sampling.
|
|
45
|
+
|
|
46
46
|
### Configuration
|
|
47
47
|
|
|
48
48
|
`RenderConfig` controls the render pipeline:
|
|
49
49
|
|
|
50
|
-
| Option | Default
|
|
51
|
-
| ------------------- |
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `hlsSegmentSeconds` | `4` | HLS target segment length in whole seconds. Ignored for every other format. |
|
|
60
|
-
| `videoFrameFormat` | `"auto"` | Source video frame extraction format — `"auto"`, `"jpg"`, or `"png"`. Use `"png"` for UI recordings, screen captures, and color-sensitive source videos. |
|
|
50
|
+
| Option | Default | Description |
|
|
51
|
+
| ------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
52
|
+
| `entryFile` | `index.html` | Entry composition inside the project directory. Its authored dimensions set the canvas size. |
|
|
53
|
+
| `fps` | required | Frame rate as an integer or exact `{ num, den }` rational. |
|
|
54
|
+
| `quality` | required | Encoder preset (`"draft"`, `"standard"`, `"high"`). |
|
|
55
|
+
| `pageMotionBlur` | authored setting | Set `"off"` to disable page motion blur; omit to preserve authored behavior. |
|
|
56
|
+
| `format` | `"mp4"` | Output container — `"mp4"`, `"webm"`, `"mov"`, `"gif"`, `"png-sequence"`, or `"hls"`. See [Transparent Video Output](#transparent-video-output) and [HLS Output](#hls-output) below. |
|
|
57
|
+
| `hlsSegmentSeconds` | `4` | HLS target segment length in whole seconds. Ignored for every other format. |
|
|
58
|
+
| `videoFrameFormat` | `"auto"` | Source video frame extraction format — `"auto"`, `"jpg"`, or `"png"`. Use `"png"` for UI recordings, screen captures, and color-sensitive source videos. |
|
|
61
59
|
|
|
62
60
|
## Transparent Video Output
|
|
63
61
|
|
|
@@ -68,7 +66,7 @@ The producer can render HTML compositions to formats that carry a **true alpha c
|
|
|
68
66
|
| `"mp4"` (default) | H.264 (yuv420p) or H.265 + HDR10 | No | AAC | Streaming, social, default deliverable |
|
|
69
67
|
| `"webm"` | VP9 + yuva420p | **True alpha** | Opus | Web playback as overlay (`<video>` over background); supported in Chrome, Edge, Firefox |
|
|
70
68
|
| `"mov"` | ProRes 4444 + yuva444p10le | **True alpha + 10-bit** | AAC | Editor ingest (Premiere, Final Cut Pro, DaVinci Resolve) |
|
|
71
|
-
| `"png-sequence"` | Numbered RGBA PNGs in a directory | **Lossless alpha** | Sidecar `audio.
|
|
69
|
+
| `"png-sequence"` | Numbered RGBA PNGs in a directory | **Lossless alpha** | Sidecar `audio.m4a` | After Effects / Nuke / Fusion, or pipelines that post-process frames before encoding |
|
|
72
70
|
| `"hls"` | H.264 (yuv420p) in MPEG-TS | No | AAC rendition | VOD streaming — see [HLS Output](#hls-output) |
|
|
73
71
|
|
|
74
72
|
### Example
|
|
@@ -77,15 +75,12 @@ The producer can render HTML compositions to formats that carry a **true alpha c
|
|
|
77
75
|
import { createRenderJob, executeRenderJob } from "@hyperframes/producer";
|
|
78
76
|
|
|
79
77
|
const job = createRenderJob({
|
|
80
|
-
inputPath: "./my-composition.html",
|
|
81
|
-
outputPath: "./output.webm", // or a directory for "png-sequence"
|
|
82
|
-
width: 1080,
|
|
83
|
-
height: 1920,
|
|
84
78
|
fps: 30,
|
|
79
|
+
quality: "standard",
|
|
85
80
|
format: "webm", // "mp4" | "webm" | "mov" | "png-sequence"
|
|
86
81
|
});
|
|
87
82
|
|
|
88
|
-
await executeRenderJob(job);
|
|
83
|
+
await executeRenderJob(job, "./my-project", "./output.webm");
|
|
89
84
|
```
|
|
90
85
|
|
|
91
86
|
### What "transparent background" means here
|
|
@@ -102,7 +97,7 @@ This is not chroma keying. There is no green/blue background to remove and no "k
|
|
|
102
97
|
|
|
103
98
|
- **Linux + alpha forces screenshot capture.** Chrome's BeginFrame compositor (the default deterministic capture path on Linux headless-shell) does not preserve alpha; the orchestrator falls back to `Page.captureScreenshot`, which is slower per frame. macOS and Windows already use screenshot mode by default, so they are unaffected.
|
|
104
99
|
- **HDR + alpha is not supported.** Setting `hdr: true` together with an alpha-capable format logs a warning and falls back to SDR. Use `format: "mp4"` for HDR10 output.
|
|
105
|
-
- **`png-sequence` does not produce a single muxed file.** When the composition contains audio elements, an `audio.
|
|
100
|
+
- **`png-sequence` does not produce a single muxed file.** When the composition contains audio elements, an `audio.m4a` sidecar is written alongside the PNGs in `outputPath`.
|
|
106
101
|
- **Safari + WebM alpha is incomplete.** For broad browser playback of an alpha video, ship `format: "mov"` to your editor and re-encode for the codec your distribution target supports.
|
|
107
102
|
|
|
108
103
|
### Authoring transparent compositions
|
|
@@ -124,11 +119,12 @@ audio_00000.ts
|
|
|
124
119
|
|
|
125
120
|
```typescript
|
|
126
121
|
const job = createRenderJob({
|
|
127
|
-
|
|
128
|
-
|
|
122
|
+
fps: 30,
|
|
123
|
+
quality: "standard",
|
|
129
124
|
format: "hls",
|
|
130
125
|
hlsSegmentSeconds: 4,
|
|
131
126
|
});
|
|
127
|
+
await executeRenderJob(job, "./my-project", "./renders/stream");
|
|
132
128
|
```
|
|
133
129
|
|
|
134
130
|
Segments are exactly `hlsSegmentSeconds` long except the last: the encoder's GOP
|
|
@@ -181,7 +177,7 @@ The activity functions plus their result types are also re-exported from `@hyper
|
|
|
181
177
|
1. **Serve** — spins up a local file server for the HTML composition
|
|
182
178
|
2. **Capture** — opens the page in headless Chrome, seeks frame-by-frame via `HeadlessExperimental.beginFrame` (or `Page.captureScreenshot` for transparent / non-Linux renders), captures screenshots
|
|
183
179
|
3. **Encode** — pipes frames through FFmpeg (with GPU encoder detection and chunked concat). Skipped for `format: "png-sequence"`.
|
|
184
|
-
4. **Mix** — extracts `<audio>` elements and mixes them into the final video. For `png-sequence`, audio is written as an `audio.
|
|
180
|
+
4. **Mix** — extracts `<audio>` elements and mixes them into the final video. For `png-sequence`, audio is written as an `audio.m4a` sidecar.
|
|
185
181
|
5. **Finalize** — applies faststart for streaming-friendly MP4 (no-op for WebM, MOV, and `png-sequence`). For `hls`, stream-copies the encode into playlists and MPEG-TS segments instead.
|
|
186
182
|
|
|
187
183
|
### Where each step lives
|