@grundyjs/canvas-take 0.4.0 → 0.4.1
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/CHANGELOG.md +6 -0
- package/README.md +7 -1
- package/docs/gif-encoder.md +2 -0
- package/package.json +9 -4
- package/ru/README.md +12 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.4.1 — 2026-10-28
|
|
4
|
+
|
|
5
|
+
- Correct package homepage to the CanvasTake page; refresh package description, keywords and English/Russian README navigation and test instructions.
|
|
6
|
+
|
|
7
|
+
- Browser CI tests in Chromium and Firefox exercise the real GIF module Worker, cancellation and a fresh export on the same page. Downloaded GIFs are independently decoded to verify pixels, dimensions, frame timings and loop count.
|
|
8
|
+
|
|
3
9
|
## 0.4.0 — 2026-10-26
|
|
4
10
|
|
|
5
11
|
- Ready-made `gif/worker` adapter with a dedicated module Worker, transferable frames, request timeouts and cleanup on completion/cancellation/errors.
|
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
[Русский](ru/README.md)
|
|
4
4
|
|
|
5
|
+
[Website](https://grundyjs.ru/en/canvas-take/) · [npm](https://www.npmjs.com/package/@grundyjs/canvas-take) · [Issues](https://github.com/urffin/canvas-take/issues)
|
|
6
|
+
|
|
5
7
|
Independent TypeScript library for HTML canvas video recording with optional audio tracks and offline GIF export through a separate entry point. No external runtime dependencies or dependency on AlgiViz. ESM only, with TypeScript declarations. MIT licensed. The package does not start or draw your animation.
|
|
6
8
|
|
|
7
9
|
## Install
|
|
@@ -27,7 +29,7 @@ recorder.dispose();
|
|
|
27
29
|
|
|
28
30
|
Auto format order: WebM VP9, VP8, generic WebM, MP4. With audio, the VP9 and VP8 candidates include Opus. An explicit unsupported MIME fails without silently changing the format. The result reports the actual MIME and matching extension. FPS and bitrate are targets, not guarantees. durationMs measures recording wall time, not parsed file duration.
|
|
29
31
|
|
|
30
|
-
Keep canvas bitmap dimensions fixed from start until stop. CSS scaling is allowed. Size changes fail the recording. Canvas must remain origin-clean.
|
|
32
|
+
Keep canvas bitmap dimensions fixed from start until stop. CSS scaling is allowed. Size changes fail the recording. Canvas must remain origin-clean. The video recorder does not support screen capture, pause, frame-by-frame video encoding or server upload. Chunks are retained in memory: the caller should limit duration. If background-tab throttling is unacceptable, the caller should dispose when the page becomes hidden. Codec support depends on the browser and available resources.
|
|
31
33
|
|
|
32
34
|
Development: Node.js 22+, `npm install`, `npm test`, `npm pack`. ESM and declarations are emitted to dist. `npm pack` rebuilds automatically; `npm publish` runs tests before packing. The integration example expects AlgiViz in a sibling directory and is served by the included local server.
|
|
33
35
|
|
|
@@ -193,6 +195,10 @@ Recording requires a browser with `canvas.captureStream`, `MediaRecorder` and `M
|
|
|
193
195
|
|
|
194
196
|
The integration example was verified with an actual VP9 recording at 1920×1080. This is not a promise that every browser can produce WebM or MP4. A canvas containing cross-origin content without CORS may not be captured.
|
|
195
197
|
|
|
198
|
+
## Development checks
|
|
199
|
+
|
|
200
|
+
Run `npm test` for unit and Node Worker tests, and `npm run test:package` for an isolated packed consumer. For real browser tests, first run `npx playwright install chromium firefox`, then `npm run test:browser`. These check GIF export, cancellation, a fresh export on the same page, Worker cleanup and independently decoded output. `npm run test:next` checks the packed library with Next.js/Turbopack. See [GIF verification details](docs/gif-encoder.md#verification).
|
|
201
|
+
|
|
196
202
|
## Release
|
|
197
203
|
|
|
198
204
|
Run `npm test` and `npm run test:package` (packs and installs the tarball in an isolated consumer, then checks TypeScript declarations and runtime imports). The archive contains dist, README, LICENSE, CHANGELOG and package metadata. Source and issues: [urffin/canvas-take](https://github.com/urffin/canvas-take). The 0.x API may change in later minor releases.
|
package/docs/gif-encoder.md
CHANGED
|
@@ -33,6 +33,8 @@ The controller's optional `onProgress` observer works with every encoder. It rep
|
|
|
33
33
|
|
|
34
34
|
## Verification
|
|
35
35
|
|
|
36
|
+
Run `npx playwright install chromium firefox` once, then `npm run test:browser`. The browser suite serves built modules with `worker-src 'self'`, observes actual Worker creation/closure, exports through a real canvas and downloads the GIF for independent decoding with gifuct-js. It checks every pixel, dimensions, frame count/durations, repeat count and progress events. An open-ended frame producer keeps the cancellation case active until the test clicks Cancel after observing a completed frame; no machine-speed-dependent delay is used. A second export on the same page must create and close a fresh Worker and produce the expected GIF. CI installs both browsers and retains the HTML report, GIF outputs, and failure screenshots/traces for seven days. These tests exercise direct module loading; the separate Next.js job covers bundler compilation.
|
|
37
|
+
|
|
36
38
|
`npm run test:next` packs the local library and builds an isolated Next.js 16.3.0 / React 19.2.8 consumer with Turbopack. These are the site's installed versions at the time this fixture was added. Its client component uses the default Worker URL, export progress and cancellation under `worker-src 'self'`. The temporary directory is printed and retained for browser checks with the printed `npm start` command. A build pass alone does not establish browser execution or cancellation; verify those separately. This check does not modify the website checkout or publish a package. CI runs the build as a separate job.
|
|
37
39
|
|
|
38
40
|
Tests use gifuct-js as an independent parser/LZW decoder, checking full pixel patches, dimensions, frame delays, long final holds, loop extension values, alpha composition and palette limits. Lifecycle tests cover pre-abort, abort/dispose during pending frame/finalization calls, late rejection, codec exceptions, tainted canvas, resize, empty exports, duplicate operations and exactly-once adapter disposal. Releasing references makes buffers eligible for garbage collection; tests do not claim a particular GC schedule.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grundyjs/canvas-take",
|
|
3
|
-
"version": "0.4.
|
|
4
|
-
"description": "Record HTML canvas
|
|
3
|
+
"version": "0.4.1",
|
|
4
|
+
"description": "Record HTML canvas video with audio and export GIFs with pluggable encoders, Worker support and explicit resource cleanup",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist",
|
|
@@ -40,9 +40,11 @@
|
|
|
40
40
|
"prepack": "npm run build",
|
|
41
41
|
"prepublishOnly": "npm test",
|
|
42
42
|
"test:package": "node scripts/test-package.mjs",
|
|
43
|
-
"test:next": "node scripts/test-next.mjs"
|
|
43
|
+
"test:next": "node scripts/test-next.mjs",
|
|
44
|
+
"test:browser": "npm run build && playwright test"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
47
|
+
"@playwright/test": "1.64.1",
|
|
46
48
|
"esbuild": "0.28.2",
|
|
47
49
|
"gifenc": "1.0.3",
|
|
48
50
|
"gifuct-js": "2.1.2",
|
|
@@ -53,12 +55,15 @@
|
|
|
53
55
|
"name": "Grundy",
|
|
54
56
|
"url": "https://grundyjs.ru/"
|
|
55
57
|
},
|
|
56
|
-
"homepage": "https://grundyjs.ru/
|
|
58
|
+
"homepage": "https://grundyjs.ru/canvas-take/",
|
|
57
59
|
"keywords": [
|
|
58
60
|
"canvas",
|
|
59
61
|
"video",
|
|
60
62
|
"recording",
|
|
61
63
|
"mediarecorder",
|
|
64
|
+
"gif",
|
|
65
|
+
"audio",
|
|
66
|
+
"web-worker",
|
|
62
67
|
"typescript"
|
|
63
68
|
],
|
|
64
69
|
"sideEffects": false,
|
package/ru/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
[English](../README.md)
|
|
4
4
|
|
|
5
|
+
[Сайт](https://grundyjs.ru/canvas-take/) · [npm](https://www.npmjs.com/package/@grundyjs/canvas-take) · [Ошибки и предложения](https://github.com/urffin/canvas-take/issues)
|
|
6
|
+
|
|
5
7
|
Независимая TypeScript-библиотека для записи видео с HTML canvas с необязательными
|
|
6
8
|
аудиодорожками и покадрового экспорта GIF через отдельную точку входа. Без внешних
|
|
7
9
|
зависимостей во время выполнения и без зависимости от AlgiViz. Только ESM,
|
|
@@ -301,6 +303,16 @@ AlgiViz и не изменяет тот проект.
|
|
|
301
303
|
Это не обещание, что любой браузер создаст WebM или MP4. Canvas с содержимым
|
|
302
304
|
из другого источника без CORS может оказаться недоступен для захвата.
|
|
303
305
|
|
|
306
|
+
## Проверки при разработке
|
|
307
|
+
|
|
308
|
+
`npm test` запускает модульные тесты и проверки Node Worker, а `npm run test:package`
|
|
309
|
+
проверяет установку упакованной библиотеки в отдельный проект. Для настоящих браузеров
|
|
310
|
+
сначала выполните `npx playwright install chromium firefox`, затем `npm run test:browser`.
|
|
311
|
+
Проверяются GIF-экспорт, отмена, повторный экспорт на той же странице, завершение Worker
|
|
312
|
+
и независимое декодирование результата. `npm run test:next` проверяет сборку
|
|
313
|
+
упакованной библиотеки с Next.js/Turbopack. Подробности — в
|
|
314
|
+
[описании проверок GIF](../docs/gif-encoder.md#verification).
|
|
315
|
+
|
|
304
316
|
## Выпуск версии
|
|
305
317
|
|
|
306
318
|
Запустите `npm test` и `npm run test:package`: последняя команда упаковывает архив,
|