pa_encoder 0.2.2 → 0.2.3
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 +84 -114
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,169 +1,139 @@
|
|
|
1
|
-
|
|
1
|
+
HTML canvas frame encoder made for personal use (ツ)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# Installation
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
```bash
|
|
6
|
+
npm install pa_encoder
|
|
7
|
+
```
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Provides:
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
- JavaScript API (ES module)
|
|
12
|
+
- CLI tool (`pa_encoder`)
|
|
12
13
|
|
|
13
14
|
---
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
# Usage
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
npm install pa_encoder
|
|
19
|
-
```
|
|
18
|
+
## CLI (recommended)
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
Starts a local proxy server and opens a browser UI.
|
|
22
21
|
|
|
23
22
|
```bash
|
|
24
|
-
|
|
23
|
+
pa_encoder --url http://localhost:5173 --entry /src/main.js
|
|
25
24
|
```
|
|
26
25
|
|
|
27
|
-
###
|
|
26
|
+
### Options
|
|
28
27
|
|
|
29
|
-
|
|
28
|
+
- `--url` Target site URL
|
|
29
|
+
- `--entry` Entry script imported in preview iframe
|
|
30
|
+
- `--port` UI server port (default: `8787`)
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
npx pa_encoder
|
|
33
|
-
```
|
|
32
|
+
The UI shows a live preview, capture controls, and progress logs.
|
|
34
33
|
|
|
35
|
-
|
|
34
|
+
---
|
|
36
35
|
|
|
37
|
-
|
|
38
|
-
- entry 파일: /src/main.js
|
|
36
|
+
## JavaScript API
|
|
39
37
|
|
|
40
|
-
|
|
38
|
+
### Live capture (real-time)
|
|
41
39
|
|
|
42
|
-
|
|
40
|
+
```js
|
|
41
|
+
import { startLiveCapture, createZipExporter } from "pa_encoder";
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
```
|
|
43
|
+
const canvas = document.querySelector("canvas");
|
|
44
|
+
const exporter = await createZipExporter({ zipName: "frames.zip" });
|
|
47
45
|
|
|
48
|
-
|
|
46
|
+
const { stop } = await startLiveCapture({
|
|
47
|
+
canvas,
|
|
48
|
+
exporter,
|
|
49
|
+
fps: 30,
|
|
50
|
+
});
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
npx pa_encoder --url http://localhost:3000 --entry /src/sketch.js
|
|
52
|
+
await stop();
|
|
52
53
|
```
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
1. **Entry**에 스케치 엔트리 파일 경로를 입력합니다(예: `/src/main.js`).
|
|
57
|
-
2. **Mode**를 선택합니다.
|
|
58
|
-
- Live: 실시간 인터랙션 포함 캡처
|
|
59
|
-
- Frame: fps/frames 기반 정밀 캡처
|
|
60
|
-
3. **Canvas**에서 캡처할 캔버스를 선택합니다(기본: auto).
|
|
61
|
-
4. **Start**로 시작, **Stop**으로 종료합니다.
|
|
55
|
+
---
|
|
62
56
|
|
|
63
|
-
|
|
57
|
+
### Deterministic frame capture (virtual time)
|
|
64
58
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
- `P`: Passthrough 토글
|
|
68
|
-
- `C`: Compact 토글
|
|
69
|
-
- `D`: Dock 위치 변경
|
|
70
|
-
- `Space`: Start
|
|
71
|
-
- 녹화 **진행 중(Running)** 에는 UI가 키보드를 가로채지 않습니다.
|
|
72
|
-
즉, 키 입력이 스케치(캔버스) 쪽으로 들어가도록 설계되어 있습니다.
|
|
73
|
-
필요 시 `Focus Sketch` 버튼을 누른 뒤 캔버스를 한 번 클릭하면 포커스가 확실해집니다(브라우저 정책에 따라 자동 포커스가 제한될 수 있음).
|
|
59
|
+
```js
|
|
60
|
+
import { virtualTimeCaptureFromStart, createZipExporter } from "pa_encoder";
|
|
74
61
|
|
|
75
|
-
|
|
62
|
+
const exporter = await createZipExporter({ zipName: "frames.zip" });
|
|
76
63
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
64
|
+
await virtualTimeCaptureFromStart({
|
|
65
|
+
fps: 60,
|
|
66
|
+
frameCount: 300,
|
|
67
|
+
start: async () => {
|
|
68
|
+
await import("/src/main.js");
|
|
69
|
+
},
|
|
70
|
+
onFrame: async (canvas, i) => {
|
|
71
|
+
const blob = await new Promise((r) => canvas.toBlob(r, "image/png"));
|
|
72
|
+
await exporter.write(i, blob);
|
|
73
|
+
},
|
|
74
|
+
});
|
|
80
75
|
|
|
81
|
-
|
|
76
|
+
await exporter.finalize();
|
|
77
|
+
```
|
|
82
78
|
|
|
83
|
-
|
|
84
|
-
- WebGL FBO/render target 텍스처를 “직접 선택”해 인코딩하는 기능은 없습니다.
|
|
85
|
-
오프스크린 결과를 화면 canvas로 출력하면 캡처 가능합니다.
|
|
86
|
-
- OffscreenCanvas + Worker 렌더링은 Live에서는 동작할 수 있으나, Frame에서 결정성을 보장하지 않습니다.
|
|
87
|
-
- cross-origin 이미지/비디오 등을 CORS 설정 없이 텍스처로 사용하면 canvas가 tainted 되어 `toBlob()` 캡처가 실패할 수 있습니다.
|
|
79
|
+
Hooks `requestAnimationFrame`, time APIs, and timers to ensure deterministic output.
|
|
88
80
|
|
|
89
81
|
---
|
|
90
82
|
|
|
91
|
-
|
|
83
|
+
## Exporters
|
|
92
84
|
|
|
93
|
-
|
|
94
|
-
npm install pa_encoder
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
Or:
|
|
85
|
+
All exporters share the same interface:
|
|
98
86
|
|
|
99
|
-
```
|
|
100
|
-
|
|
87
|
+
```ts
|
|
88
|
+
{
|
|
89
|
+
write(frameIndex, blob);
|
|
90
|
+
finalize();
|
|
91
|
+
}
|
|
101
92
|
```
|
|
102
93
|
|
|
103
|
-
###
|
|
104
|
-
|
|
105
|
-
Run from your project root:
|
|
94
|
+
### ZIP exporter
|
|
106
95
|
|
|
107
|
-
```
|
|
108
|
-
|
|
96
|
+
```js
|
|
97
|
+
import { createZipExporter } from "pa_encoder";
|
|
98
|
+
await createZipExporter({ zipName: "frames.zip" });
|
|
109
99
|
```
|
|
110
100
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
- dev server: http://localhost:5173
|
|
114
|
-
- entry file: /src/main.js
|
|
115
|
-
|
|
116
|
-
The encoder UI opens in your browser.
|
|
117
|
-
|
|
118
|
-
### CLI Options
|
|
101
|
+
Downloads a ZIP of PNG frames.
|
|
119
102
|
|
|
120
|
-
|
|
121
|
-
npx pa_encoder --url <dev_server_url> --entry <entry_path> --port <ui_port>
|
|
122
|
-
```
|
|
103
|
+
---
|
|
123
104
|
|
|
124
|
-
|
|
105
|
+
### File System exporter (Chromium)
|
|
125
106
|
|
|
126
|
-
```
|
|
127
|
-
|
|
107
|
+
```js
|
|
108
|
+
import { createFsExporter } from "pa_encoder";
|
|
109
|
+
await createFsExporter({ dirNameHint: "frames" });
|
|
128
110
|
```
|
|
129
111
|
|
|
130
|
-
|
|
112
|
+
Writes directly to a directory (secure context required).
|
|
131
113
|
|
|
132
|
-
|
|
133
|
-
2. Choose **Mode**:
|
|
134
|
-
- Live: realtime capture with interaction
|
|
135
|
-
- Frame: deterministic capture by fps/frames
|
|
136
|
-
3. Select **Canvas** (default: auto).
|
|
137
|
-
4. Click **Start** to begin and **Stop** to finish.
|
|
114
|
+
---
|
|
138
115
|
|
|
139
|
-
|
|
116
|
+
### Best exporter
|
|
140
117
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
- `D`: change dock position
|
|
146
|
-
- `Space`: start
|
|
147
|
-
- When **Running (recording)**, the UI does not consume keyboard events.
|
|
148
|
-
This is intended to keep keyboard input going to the sketch/canvas.
|
|
149
|
-
If focus is not acquired automatically (browser-dependent), click `Focus Sketch` and then click the canvas once.
|
|
118
|
+
```js
|
|
119
|
+
import { createBestExporter } from "pa_encoder";
|
|
120
|
+
await createBestExporter({ prefer: "fs" });
|
|
121
|
+
```
|
|
150
122
|
|
|
151
|
-
|
|
123
|
+
Uses File System export when available, otherwise ZIP.
|
|
152
124
|
|
|
153
|
-
|
|
154
|
-
- **FS (directory)**: writes files via the File System Access API
|
|
155
|
-
- **Best (auto)**: chooses ZIP or FS depending on the environment
|
|
125
|
+
---
|
|
156
126
|
|
|
157
|
-
|
|
127
|
+
## Supported Environments
|
|
158
128
|
|
|
159
|
-
-
|
|
160
|
-
-
|
|
161
|
-
|
|
162
|
-
- OffscreenCanvas
|
|
163
|
-
-
|
|
129
|
+
- Modern Chromium-based browsers recommended
|
|
130
|
+
- Requires:
|
|
131
|
+
- ES module Web Workers
|
|
132
|
+
- `OffscreenCanvas`
|
|
133
|
+
- `createImageBitmap`
|
|
134
|
+
- ZIP export works in most modern browsers
|
|
135
|
+
- File System export requires Chromium + secure context
|
|
164
136
|
|
|
165
137
|
---
|
|
166
138
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
MIT
|
|
139
|
+
(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)(ツ)
|