@thi.ng/dl-asset 2.2.1 → 2.3.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2021-11-19T07:59:50Z
+- **Last updated**: 2022-03-11T12:13:49Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,12 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+## [2.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/dl-asset@2.3.0) (2021-12-13)
+
+#### 🚀 Features
+
+- add canvasVideoRecorder() ([6736463](https://github.com/thi-ng/umbrella/commit/6736463))
+
 ## [2.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/dl-asset@2.2.0) (2021-11-17)
 
 #### 🚀 Features

package/README.md

@@ -23,7 +23,7 @@ This project is part of the
 
 ## About
 
-Local asset download for web apps, with automatic MIME type detection.
+Canvas, video recording & file asset download helpers for web apps.
 
 ### Status
 
@@ -58,7 +58,7 @@ node --experimental-repl-await
 > const dlAsset = await import("@thi.ng/dl-asset");
 ```
 
-Package sizes (gzipped, pre-treeshake): ESM: 516 bytes
+Package sizes (gzipped, pre-treeshake): ESM: 648 bytes
 
 ## Dependencies
 
@@ -158,4 +158,4 @@ If this project contributes to an academic publication, please cite it as:
 
 ## License
 
-© 2020 - 2021 Karsten Schmidt // Apache Software License 2.0
+© 2020 - 2022 Karsten Schmidt // Apache Software License 2.0

package/api.d.ts

@@ -21,4 +21,15 @@ export interface DownloadOpts {
      */
     expire: number;
 }
+/**
+ * User options for {@link canvasRecorder}.
+ */
+export interface CanvasRecorderOpts extends Pick<MediaRecorderOptions, "mimeType" | "bitsPerSecond" | "videoBitsPerSecond"> {
+    /**
+     * Recording frame rate (fps)
+     *
+     * @defaultValue 60
+     */
+    fps: number;
+}
 //# sourceMappingURL=api.d.ts.map

package/canvas.d.ts

@@ -1,12 +1,28 @@
+import type { CanvasRecorderOpts } from "./api.js";
 /**
  * Triggers canvas-to-blob conversion for given file type (and opt. `quality`),
  * then triggers download via {@link downloadWithMime}. Default file type is
  * `png`. Default quality is 0.95 (only used for JPEG/WebP).
  *
- * @param canvas
- * @param baseName
- * @param type
- * @param quality
+ * @param canvas -
+ * @param baseName -
+ * @param type -
+ * @param quality -
  */
 export declare const downloadCanvas: (canvas: HTMLCanvasElement, baseName: string, type?: "png" | "jpeg" | "webp", quality?: number) => void;
+/**
+ * Constructs, initializes and returns a `MediaRecorder` instance for the given
+ * canvas. The recording MUST be started & ended manually by the caller (via
+ * `.start()` and `.stop()`). The downloading starts only once sufficient frames
+ * were recorded, or latest when `.stop()` was called.
+ *
+ * @remarks
+ * The default recording format is WebM (VP9 codec) @ 60 fps, using the browser
+ * defined default bit rate.
+ *
+ * @param canvas -
+ * @param fileName -
+ * @param opts -
+ */
+export declare const canvasRecorder: (canvas: HTMLCanvasElement, fileName: string, opts?: Partial<CanvasRecorderOpts> | undefined) => MediaRecorder;
 //# sourceMappingURL=canvas.d.ts.map

package/canvas.js

@@ -4,10 +4,10 @@ import { downloadWithMime } from "./raw.js";
  * then triggers download via {@link downloadWithMime}. Default file type is
  * `png`. Default quality is 0.95 (only used for JPEG/WebP).
  *
- * @param canvas
- * @param baseName
- * @param type
- * @param quality
+ * @param canvas -
+ * @param baseName -
+ * @param type -
+ * @param quality -
  */
 export const downloadCanvas = (canvas, baseName, type = "png", quality = 0.95) => {
     const mime = `image/${type}`;
@@ -15,3 +15,35 @@ export const downloadCanvas = (canvas, baseName, type = "png", quality = 0.95) =
         ? downloadWithMime(`${baseName}.${type}`, blob, { mime })
         : console.warn("can't download canvas"), mime, quality);
 };
+/**
+ * Constructs, initializes and returns a `MediaRecorder` instance for the given
+ * canvas. The recording MUST be started & ended manually by the caller (via
+ * `.start()` and `.stop()`). The downloading starts only once sufficient frames
+ * were recorded, or latest when `.stop()` was called.
+ *
+ * @remarks
+ * The default recording format is WebM (VP9 codec) @ 60 fps, using the browser
+ * defined default bit rate.
+ *
+ * @param canvas -
+ * @param fileName -
+ * @param opts -
+ */
+export const canvasRecorder = (canvas, fileName, opts) => {
+    opts = { fps: 60, mimeType: "video/webm; codecs=vp9", ...opts };
+    const stream = canvas.captureStream(opts.fps);
+    const recorder = new MediaRecorder(stream, {
+        mimeType: opts.mimeType,
+    });
+    let blobs = [];
+    recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+            blobs.push(e.data);
+            downloadWithMime(fileName, new Blob(blobs, { type: opts.mimeType }), {
+                mime: opts.mimeType,
+            });
+            blobs = [];
+        }
+    };
+    return recorder;
+};

package/download.d.ts

@@ -6,9 +6,9 @@ import type { DownloadOpts } from "./api.js";
  * derive it from the given filename's extension (e.g. `.svg`) and if
  * that fails, falls back to default value.
  *
- * @param name
- * @param src
- * @param opts
+ * @param name -
+ * @param src -
+ * @param opts -
  */
 export declare const download: (name: string, src: string | TypedArray | ArrayBuffer | Blob, opts?: Partial<DownloadOpts>) => void;
 //# sourceMappingURL=download.d.ts.map

package/download.js

@@ -6,9 +6,9 @@ import { downloadWithMime } from "./raw.js";
  * derive it from the given filename's extension (e.g. `.svg`) and if
  * that fails, falls back to default value.
  *
- * @param name
- * @param src
- * @param opts
+ * @param name -
+ * @param src -
+ * @param opts -
  */
 export const download = (name, src, opts = {}) => {
     if (opts.mime === undefined) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thi.ng/dl-asset",
-  "version": "2.2.1",
-  "description": "Local asset download for web apps, with automatic MIME type detection",
+  "version": "2.3.1",
+  "description": "Canvas, video recording & file asset download helpers for web apps",
   "type": "module",
   "module": "./index.js",
   "typings": "./index.d.ts",
@@ -34,17 +34,17 @@
     "test": "testament test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.3.1",
-    "@thi.ng/checks": "^3.1.1",
-    "@thi.ng/mime": "^2.1.1"
+    "@thi.ng/api": "^8.3.4",
+    "@thi.ng/checks": "^3.1.4",
+    "@thi.ng/mime": "^2.1.4"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.18.19",
-    "@thi.ng/testament": "^0.2.1",
+    "@microsoft/api-extractor": "^7.19.4",
+    "@thi.ng/testament": "^0.2.4",
     "rimraf": "^3.0.2",
     "tools": "^0.0.1",
-    "typedoc": "^0.22.9",
-    "typescript": "^4.5.2"
+    "typedoc": "^0.22.13",
+    "typescript": "^4.6.2"
   },
   "keywords": [
     "browser",
@@ -52,7 +52,9 @@
     "download",
     "file",
     "mime",
-    "typescript"
+    "mediarecorder",
+    "typescript",
+    "video"
   ],
   "publishConfig": {
     "access": "public"
@@ -87,5 +89,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "8bd27c8bde0b770e7c001943f11c951cd345d668\n"
+  "gitHead": "0fc692a3225c068aacafdc4cb6140cf603c67ad8\n"
 }

package/raw.d.ts

@@ -18,9 +18,9 @@ import type { DownloadOpts } from "./api.js";
  * again after `expire` millseconds (default: 10000) to free up memory.
  * The URL won't be expired if `expire <= 0`.
  *
- * @param name
- * @param src
- * @param opts
+ * @param name -
+ * @param src -
+ * @param opts -
  */
 export declare const downloadWithMime: (name: string, src: string | TypedArray | ArrayBuffer | Blob, opts: Partial<DownloadOpts> & {
     mime: string;

package/raw.js

@@ -17,9 +17,9 @@ import { isString } from "@thi.ng/checks/is-string";
  * again after `expire` millseconds (default: 10000) to free up memory.
  * The URL won't be expired if `expire <= 0`.
  *
- * @param name
- * @param src
- * @param opts
+ * @param name -
+ * @param src -
+ * @param opts -
  */
 export const downloadWithMime = (name, src, opts) => {
     const _opts = {