feat(docs): document MP4 export support and enhanced recording capabilities

2026-04-12 23:34:04 +00:00
parent 73a975e9e9
commit fec1dffd37
4 changed files with 38 additions and 18 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog

+## 2026-04-12 - 3.9.0 - feat(docs)
+document MP4 export support and enhanced recording capabilities
+
+- Update recording documentation to cover MP4/WebM export options, 60fps capture, and conversion via RecorderService
+- Add API and type references for output format selection and MP4 conversion in the TypeScript web docs
+- Clarify related UI capabilities such as recording panel format selection and sidebar search support
+
 ## 2026-04-12 - 3.8.5 - fix(recording)
 improve recording capture quality and align preview button loading state

--- a/readme.md
+++ b/readme.md
@@ -10,7 +10,7 @@
 - 🔧 **Real-time Property Editing** — Modify component props on the fly with auto-detected editors
 - 🌓 **Theme Switching** — Test light/dark modes instantly
 - 📱 **Responsive Viewport Testing** — Phone, phablet, tablet, and desktop views
- 🎬 **Screen Recording** — Record component demos with audio support and video trimming
+- 🎬 **Screen Recording** — Record component demos with audio, trimming, and MP4/WebM export
 - 🧪 **Advanced Demo Tools** — Post-render hooks for interactive testing
 - 📂 **Section-based Organization** — Group components into custom sections with filtering and sorting
 - 🚀 **Zero-config Setup** — TypeScript and Lit support out of the box
@@ -235,15 +235,17 @@ public static styles = [

 ### 🎬 Screen Recording

-Record component demos directly from the catalogue:
+Record component demos directly from the catalogue with full export control:

 - **Viewport Recording** — Record just the component viewport
 - **Full Screen Recording** — Capture the entire screen
 - **Audio Support** — Add microphone commentary with live level monitoring
- **Video Trimming** — Trim start/end before export with visual timeline
- **WebM Export** — High-quality video output
+- **Video Trimming** — Trim start/end before export with a visual timeline
+- **60fps Capture** — Smooth, high-bitrate recording at up to 60 frames per second
+- **MP4 Export** — Universal H.264/AAC format via [mediabunny](https://mediabunny.dev) WebCodecs conversion (plays everywhere: WhatsApp, iMessage, Slack, etc.)
+- **WebM Export** — Native VP9 output for maximum quality

-Click the red record button in the bottom toolbar to start.
+Click the red record button in the bottom toolbar, choose your format (MP4 or WebM), and start recording.

 ### 🧪 Demo Tools

@@ -438,7 +440,7 @@ The wrapper provides full DOM API access:
 For custom recording integrations:

 ```typescript
-import { RecorderService } from '@design.estate/dees-wcctools';
+import { RecorderService, type TOutputFormat } from '@design.estate/dees-wcctools';

 const recorder = new RecorderService({
  onDurationUpdate: (duration) => console.log(`${duration}s`),
@@ -446,9 +448,13 @@ const recorder = new RecorderService({
  onAudioLevelUpdate: (level) => console.log(`Audio: ${level}%`),
 });

+// Record (always captures as WebM internally)
 await recorder.startRecording({ mode: 'viewport' });
 // ... later
 recorder.stopRecording();
+
+// Convert to MP4 for universal playback (H.264 + AAC via WebCodecs)
+const mp4Blob = await recorder.convertToMp4(recorder.recordedBlob);
 ```

 ## Project Structure
@@ -481,7 +487,7 @@ my-component-library/

 ## License and Legal Information

-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.

 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

@@ -493,7 +499,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G

 ### Company Information

-Task Venture Capital GmbH
+Task Venture Capital GmbH  
 Registered at District Court Bremen HRB 35230 HB, Germany

 For any legal inquiries or further information, please contact us via email at hello@task.vc.
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-wcctools',
-  version: '3.8.5',
+  version: '3.9.0',
  description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }
--- a/ts_web/readme.md
+++ b/ts_web/readme.md
@@ -71,11 +71,12 @@ setupWccTools({

 | Export | Description |
 |--------|-------------|
-| `RecorderService` | Service class for screen/viewport recording |
+| `RecorderService` | Service class for screen/viewport recording and MP4 conversion |
 | `WccRecordButton` | Record button UI component |
 | `WccRecordingPanel` | Recording options and preview panel |
 | `IRecorderEvents` | TypeScript interface for recorder callbacks |
 | `IRecordingOptions` | TypeScript interface for recording options |
+| `TOutputFormat` | Type for output format selection (`'webm' \| 'mp4'`) |

 ## Section Configuration

@@ -96,15 +97,15 @@ The module includes these internal web components:
 | Component | Description |
 |-----------|-------------|
 | `wcc-dashboard` | Main dashboard container with routing |
-| `wcc-sidebar` | Navigation sidebar with collapsible sections |
+| `wcc-sidebar` | Navigation sidebar with collapsible sections and search |
 | `wcc-frame` | Responsive viewport with size controls |
 | `wcc-properties` | Property panel with live editing |
 | `wcc-record-button` | Recording state indicator button |
-| `wcc-recording-panel` | Recording workflow UI |
+| `wcc-recording-panel` | Recording workflow UI with format selection |

 ## RecorderService API

-For programmatic recording control:
+For programmatic recording and MP4 conversion:

 ```typescript
 import { RecorderService, type IRecorderEvents } from '@design.estate/dees-wcctools';
@@ -125,7 +126,7 @@ const mics = await recorder.loadMicrophones(true);
 // Start audio level monitoring
 await recorder.startAudioMonitoring(mics[0].deviceId);

-// Start recording
+// Start recording (always captures as WebM internally at up to 60fps)
 await recorder.startRecording({
  mode: 'viewport',
  audioDeviceId: mics[0].deviceId,
@@ -135,7 +136,10 @@ await recorder.startRecording({
 // Stop recording
 recorder.stopRecording();

-// Export trimmed video
+// Convert to MP4 for universal playback (H.264 + AAC via WebCodecs)
+const mp4Blob = await recorder.convertToMp4(recorder.recordedBlob);
+
+// Or export trimmed video
 const trimmedBlob = await recorder.exportTrimmedVideo(videoElement, startTime, endTime);

 // Cleanup
@@ -148,6 +152,9 @@ recorder.dispose();
 ts_web/
 ├── index.ts                    # Main exports
 ├── wcctools.interfaces.ts      # Type definitions
+├── types/
+│   ├── dom-webcodecs-stub/     # TS6 compatibility shim
+│   └── dom-mediacapture-stub/  # MediaCapture Transform types
 ├── elements/
 │   ├── wcc-dashboard.ts        # Root dashboard component
 │   ├── wcc-sidebar.ts          # Navigation sidebar
@@ -157,7 +164,7 @@ ts_web/
 │   ├── wcc-recording-panel.ts  # Recording options/preview
 │   └── wcctools.helpers.ts     # Shared utilities
 ├── services/
-│   └── recorder.service.ts     # MediaRecorder abstraction
+│   └── recorder.service.ts     # MediaRecorder + mediabunny MP4 conversion
 └── pages/
    └── index.ts                # Built-in pages
 ```
@@ -165,9 +172,9 @@ ts_web/
 ## Features

 - 🎨 Interactive component preview
- 📂 Section-based sidebar with filtering & sorting
+- 📂 Section-based sidebar with filtering, sorting & search (by name, tag, or group)
 - 🔧 Real-time property editing with type detection
 - 🌓 Theme switching (light/dark)
 - 📱 Responsive viewport testing
- 🎬 Screen recording with trimming
+- 🎬 Screen recording with MP4/WebM export, trimming, and audio
 - 🔗 URL-based deep linking