diff --git a/changelog.md b/changelog.md index acf8d9d..2851594 100644 --- 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 diff --git a/readme.md b/readme.md index 033bab6..54fcc82 100644 --- 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. diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index ad11963..747d04d 100644 --- 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.' } diff --git a/ts_web/readme.md b/ts_web/readme.md index 9556876..2c154ad 100644 --- 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