WebM Video Builder

dev-docs/RFCs/vNext/encoding-rfc.md

@@ -10,6 +10,10 @@ This RFC proposes enhancements to the loaders.gl encode API.
 
 - **Video Encoding** Video encoding is obviously a very complex topic and loaders.gl very intentionally does not aspire to be even a remotely complete solution for this. That said, some basic ability to load and generate videos does make sense.
 
+Browsers support native canvas recording using `canvas.captureStream()` and the MediaRecorder API. This API is relatively straightforward to use, and outputs a webm-encoded video recorded in real-time.
+
+For more complex use cases, namely frame-by-frame non-realtime rendering, MediaRecorder doesn't have great support. An alternative is to use the webm-wasm package which allows for adding single frames to the webm container.
+
 ## Encoder APIs
 
 ## encode

docs/table-of-contents.json

@@ -301,7 +301,8 @@
           "title": "@loaders.gl/video",
           "entries": [
             {"entry": "modules/video/docs"},
-            {"entry": "modules/video/docs/api-reference/gif-builder"}
+            {"entry": "modules/video/docs/api-reference/gif-builder"},
+            {"entry": "modules/video/docs/api-reference/webm-video-builder"}
           ]
         },
         {

modules/video/docs/README.md

@@ -1,7 +1,7 @@
 # Overview
 
 <p class="badges">
-  <img src="https://img.shields.io/badge/From-v2.2-blue.svg?style=flat-square" alt="From-v2.2" /> 
+  <img src="https://img.shields.io/badge/From-v2.2-blue.svg?style=flat-square" alt="From-v2.2" />
 </p>
 
 The `@loaders.gl/video` module contains loader and writers for images that follow loaders.gl conventions.
@@ -17,6 +17,7 @@ npm install @loaders.gl/core
 
 ## API
 
-| Loader                                                         | Description |
-| -------------------------------------------------------------- | ----------- |
-| [`VideoLoader`](modules/video/docs/api-reference/video-loader) |             |
+| Loader                                                                    | Description |
+| ------------------------------------------------------------------------- | ----------- |
+| [`VideoLoader`](modules/video/docs/api-reference/video-loader)            |             |
+| [`WebMVideoBuilder`](modules/video/docs/api-reference/webm-video-Builder) |             |

modules/video/docs/api-reference/webm-video-builder.md

@@ -0,0 +1,46 @@
+# WebMVideoBuilder
+
+<p class="badges">
+  <img src="https://img.shields.io/badge/From-v3.2-blue.svg?style=flat-square" alt="From-v3.2" />
+</p>
+
+> The `WebMVideoBuilder` is experimental.
+
+A basic WebM Video encoder. Only works in the browser.
+
+| Encoder        | Characteristic                                          |
+| -------------- | ------------------------------------------------------- |
+| File Extension | `.webm`                                                 |
+| File Type      | Binary                                                  |
+| File Format    | WebM                                                    |
+| Data Format    | `Video` (browsers) (Not currently supported on node.js) |
+| Supported APIs | `addFrame`, `finalize`                                  |
+
+## Usage
+
+```js
+import {WebMVideoBuilder} from '@loaders.gl/video';
+
+const videoBuilder = new WebMVideoBuilder({ source: canvas, frameRate: 24 });
+
+for (const frame of frames) {
+  ctx.drawImage(frame);
+  videoBuilder.addFrame(ctx);
+}
+
+const url = await videoBuilder.finalize();
+video.src = url;
+```
+
+## Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `width` | number | 512 | The height of the output video
+| `height` | number | 512 | The width of the output video
+| `framerate` | number | 24 | How many frames per second the final container should hold
+| `bitrate` | number | 200 | The bitrate (in kbps) to record the
+| `realtime` | boolean | false | Whether to record in realtime. Used for streaming videos, for instance.
+
+## Attribution
+`WebMVideoBuilder` uses code from Google Chrome Labs' incredible [webm-wasm](https://github.com/GoogleChromeLabs/webm-wasm) package which is Apache 2.0 licensed.

modules/video/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@loaders.gl/loader-utils": "3.2.0-alpha.4",
     "@loaders.gl/worker-utils": "3.2.0-alpha.4",
-    "gifshot": "^0.4.5"
+    "gifshot": "^0.4.5",
+    "webm-wasm": "^0.4.1"
   }
 }

modules/video/src/index.ts

@@ -1,3 +1,4 @@
 export {VideoLoader} from './video-loader';
 
+export {default as WebMVideoBuilder} from './webm-video-builder';
 export {default as GIFBuilder} from './gif-builder';