@thi.ng/dl-asset 2.2.2 → 2.3.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2021-11-21T17:09:28Z
+- **Last updated**: 2021-12-13T10:26:00Z
 - **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/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,3 +1,4 @@
+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
@@ -9,4 +10,19 @@
  * @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

@@ -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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thi.ng/dl-asset",
-  "version": "2.2.2",
-  "description": "Local asset download for web apps, with automatic MIME type detection",
+  "version": "2.3.0",
+  "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.2",
-    "@thi.ng/checks": "^3.1.2",
-    "@thi.ng/mime": "^2.1.2"
+    "@thi.ng/api": "^8.3.3",
+    "@thi.ng/checks": "^3.1.3",
+    "@thi.ng/mime": "^2.1.3"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.18.19",
-    "@thi.ng/testament": "^0.2.2",
+    "@microsoft/api-extractor": "^7.19.2",
+    "@thi.ng/testament": "^0.2.3",
     "rimraf": "^3.0.2",
     "tools": "^0.0.1",
-    "typedoc": "^0.22.9",
-    "typescript": "^4.5.2"
+    "typedoc": "^0.22.10",
+    "typescript": "^4.5.3"
   },
   "keywords": [
     "browser",
@@ -52,7 +52,9 @@
     "download",
     "file",
     "mime",
-    "typescript"
+    "mediarecorder",
+    "typescript",
+    "video"
   ],
   "publishConfig": {
     "access": "public"
@@ -87,5 +89,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "e8a7c2a40191b391cef182c2978e5a6c85987a87\n"
+  "gitHead": "2db9dd34c0c2c60cbfde3dad0bca352b20292f5c\n"
 }