feat(recording): add output format options and MP4 conversion support

- Introduced `outputFormat` state in `WccRecordingPanel` for selecting between MP4 and WebM formats.
- Updated `RecorderService` to handle MP4 conversion using mediabunny.
- Added type stubs for `MediaStreamAudioTrack` and `MediaStreamVideoTrack` to ensure type safety.
- Updated documentation to reflect changes in output format handling.

ts_web/elements/wcc-recording-panel.ts

@@ -1,5 +1,5 @@
 import { DeesElement, customElement, html, css, property, state, type TemplateResult } from '@design.estate/dees-element';
-import { RecorderService } from '../services/recorder.service.js';
+import { RecorderService, type TOutputFormat } from '../services/recorder.service.js';
 import type { WccDashboard } from './wcc-dashboard.js';
 
 @customElement('wcc-recording-panel')
@@ -16,6 +16,9 @@ export class WccRecordingPanel extends DeesElement {
   @state()
   accessor recordingMode: 'viewport' | 'screen' = 'viewport';
 
+  @state()
+  accessor outputFormat: TOutputFormat = 'mp4';
+
   @state()
   accessor audioEnabled: boolean = false;
 
@@ -591,6 +594,24 @@ export class WccRecordingPanel extends DeesElement {
             </div>
           </div>
 
+          <div class="recording-option-group">
+            <div class="recording-option-label">Format</div>
+            <div class="recording-mode-buttons">
+              <button
+                class="recording-mode-btn ${this.outputFormat === 'mp4' ? 'selected' : ''}"
+                @click=${() => this.outputFormat = 'mp4'}
+              >
+                MP4 (H.264)
+              </button>
+              <button
+                class="recording-mode-btn ${this.outputFormat === 'webm' ? 'selected' : ''}"
+                @click=${() => this.outputFormat = 'webm'}
+              >
+                WebM (VP9)
+              </button>
+            </div>
+          </div>
+
           <div class="recording-option-group">
             <div class="recording-option-label">Audio</div>
             <div class="audio-toggle">
@@ -716,7 +737,9 @@ export class WccRecordingPanel extends DeesElement {
               ?disabled=${this.isExporting}
               @click=${() => this.downloadRecording()}
             >
-              ${this.isExporting ? html`<span class="export-spinner"></span>Exporting...` : 'Download WebM'}
+              ${this.isExporting
+                ? html`<span class="export-spinner"></span>${this.outputFormat === 'mp4' ? 'Converting to MP4...' : 'Exporting...'}`
+                : `Download ${this.outputFormat === 'mp4' ? 'MP4' : 'WebM'}`}
             </button>
           </div>
         </div>
@@ -764,7 +787,7 @@ export class WccRecordingPanel extends DeesElement {
       await this.recorderService.startRecording({
         mode: this.recordingMode,
         audioDeviceId: this.audioEnabled ? this.selectedMicrophoneId : undefined,
-        viewportElement
+        viewportElement,
       });
 
       this.panelState = 'recording';
@@ -817,7 +840,7 @@ export class WccRecordingPanel extends DeesElement {
     try {
       let blobToDownload: Blob;
 
-      // Handle trimming if needed
+      // Handle trimming if needed — always produces WebM
       const needsTrim = this.trimStart > 0.1 || this.trimEnd < this.videoDuration - 0.1;
 
       if (needsTrim) {
@@ -831,9 +854,15 @@ export class WccRecordingPanel extends DeesElement {
         blobToDownload = recordedBlob;
       }
 
+      // Convert WebM → MP4 if MP4 format selected
+      if (this.outputFormat === 'mp4') {
+        blobToDownload = await this.recorderService.convertToMp4(blobToDownload);
+      }
+
       // Trigger download
       const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
-      const filename = `wcctools-recording-${timestamp}.webm`;
+      const ext = this.outputFormat === 'mp4' ? 'mp4' : 'webm';
+      const filename = `wcctools-recording-${timestamp}.${ext}`;
 
       const url = URL.createObjectURL(blobToDownload);
       const a = document.createElement('a');