@design.estate/wcctools 5.1.0

package/ts_web/services/recorder.service.ts

@@ -0,0 +1,451 @@
+/**
+ * RecorderService - Handles all MediaRecorder, audio monitoring, and video export logic.
+ * Recording always uses MediaRecorder → WebM (the reliable browser path).
+ * MP4 output is produced by converting WebM → MP4 via mediabunny at export time.
+ */
+
+export type TOutputFormat = 'webm' | 'mp4';
+
+export interface IRecorderEvents {
+  onDurationUpdate?: (duration: number) => void;
+  onRecordingComplete?: (blob: Blob) => void;
+  onAudioLevelUpdate?: (level: number) => void;
+  onError?: (error: Error) => void;
+  onStreamEnded?: () => void;
+}
+
+export interface IRecordingOptions {
+  mode: 'viewport' | 'screen';
+  audioDeviceId?: string;
+  viewportElement?: HTMLElement;
+  outputFormat?: TOutputFormat;
+}
+
+export class RecorderService {
+  // Recording state
+  private mediaRecorder: MediaRecorder | null = null;
+  private recordedChunks: Blob[] = [];
+  private durationInterval: number | null = null;
+  private _duration: number = 0;
+  private _recordedBlob: Blob | null = null;
+  private _isRecording: boolean = false;
+  private _outputFormat: TOutputFormat = 'webm';
+
+  // Audio monitoring state
+  private audioContext: AudioContext | null = null;
+  private audioAnalyser: AnalyserNode | null = null;
+  private audioMonitoringInterval: number | null = null;
+  private monitoringStream: MediaStream | null = null;
+
+  // Current recording stream
+  private currentStream: MediaStream | null = null;
+
+  // Event callbacks
+  private events: IRecorderEvents = {};
+
+  constructor(events?: IRecorderEvents) {
+    if (events) {
+      this.events = events;
+    }
+  }
+
+  // Public getters
+  get isRecording(): boolean {
+    return this._isRecording;
+  }
+
+  get duration(): number {
+    return this._duration;
+  }
+
+  get recordedBlob(): Blob | null {
+    return this._recordedBlob;
+  }
+
+  get outputFormat(): TOutputFormat {
+    return this._outputFormat;
+  }
+
+  // Update event callbacks
+  setEvents(events: IRecorderEvents): void {
+    this.events = { ...this.events, ...events };
+  }
+
+  // ==================== Microphone Management ====================
+
+  async loadMicrophones(requestPermission: boolean = false): Promise<MediaDeviceInfo[]> {
+    try {
+      if (requestPermission) {
+        // Request permission by getting a temporary stream
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        stream.getTracks().forEach(track => track.stop());
+      }
+
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      return devices.filter(d => d.kind === 'audioinput');
+    } catch (error) {
+      console.error('Error loading microphones:', error);
+      return [];
+    }
+  }
+
+  async startAudioMonitoring(deviceId: string): Promise<void> {
+    this.stopAudioMonitoring();
+
+    if (!deviceId) return;
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { deviceId: { exact: deviceId } }
+      });
+
+      this.monitoringStream = stream;
+      this.audioContext = new AudioContext();
+      const source = this.audioContext.createMediaStreamSource(stream);
+      this.audioAnalyser = this.audioContext.createAnalyser();
+      this.audioAnalyser.fftSize = 256;
+      source.connect(this.audioAnalyser);
+
+      const dataArray = new Uint8Array(this.audioAnalyser.frequencyBinCount);
+
+      this.audioMonitoringInterval = window.setInterval(() => {
+        if (this.audioAnalyser) {
+          this.audioAnalyser.getByteFrequencyData(dataArray);
+          const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
+          const level = Math.min(100, (average / 128) * 100);
+          this.events.onAudioLevelUpdate?.(level);
+        }
+      }, 50);
+    } catch (error) {
+      console.error('Error starting audio monitoring:', error);
+      this.events.onAudioLevelUpdate?.(0);
+    }
+  }
+
+  stopAudioMonitoring(): void {
+    if (this.audioMonitoringInterval) {
+      clearInterval(this.audioMonitoringInterval);
+      this.audioMonitoringInterval = null;
+    }
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+    if (this.monitoringStream) {
+      this.monitoringStream.getTracks().forEach(track => track.stop());
+      this.monitoringStream = null;
+    }
+    this.audioAnalyser = null;
+  }
+
+  // ==================== Recording Control ====================
+
+  async startRecording(options: IRecordingOptions): Promise<void> {
+    try {
+      this._outputFormat = options.outputFormat || 'webm';
+
+      // Stop audio monitoring before recording
+      this.stopAudioMonitoring();
+
+      // Get video stream based on mode
+      const displayMediaOptions: DisplayMediaStreamOptions = {
+        video: {
+          displaySurface: options.mode === 'viewport' ? 'browser' : 'monitor',
+          frameRate: { ideal: 60 },
+        } as MediaTrackConstraints,
+        audio: false
+      };
+
+      // Add preferCurrentTab hint for viewport mode
+      if (options.mode === 'viewport') {
+        (displayMediaOptions as any).preferCurrentTab = true;
+      }
+
+      const videoStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+
+      // If viewport mode, try to crop to viewport element using Element Capture API
+      if (options.mode === 'viewport' && options.viewportElement) {
+        try {
+          if ('CropTarget' in window) {
+            const cropTarget = await (window as any).CropTarget.fromElement(options.viewportElement);
+            const [videoTrack] = videoStream.getVideoTracks();
+            await (videoTrack as any).cropTo(cropTarget);
+          }
+        } catch (e) {
+          console.warn('Element Capture not supported, recording full tab:', e);
+        }
+      }
+
+      // Combine video with audio if enabled
+      let combinedStream = videoStream;
+      if (options.audioDeviceId) {
+        try {
+          const audioStream = await navigator.mediaDevices.getUserMedia({
+            audio: { deviceId: { exact: options.audioDeviceId } }
+          });
+          combinedStream = new MediaStream([
+            ...videoStream.getVideoTracks(),
+            ...audioStream.getAudioTracks()
+          ]);
+        } catch (audioError) {
+          console.warn('Could not add audio:', audioError);
+        }
+      }
+
+      // Store stream for cleanup
+      this.currentStream = combinedStream;
+
+      // Handle stream ending (user clicks "Stop sharing")
+      videoStream.getVideoTracks()[0].onended = () => {
+        if (this._isRecording) {
+          this.stopRecording();
+          this.events.onStreamEnded?.();
+        }
+      };
+
+      // Always record as WebM — conversion to MP4 happens at export time
+      const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+        ? 'video/webm;codecs=vp9'
+        : 'video/webm';
+
+      this.mediaRecorder = new MediaRecorder(combinedStream, {
+        mimeType,
+        videoBitsPerSecond: 8_000_000, // 8 Mbps for smooth, high-quality capture
+      });
+      this.recordedChunks = [];
+
+      this.mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          this.recordedChunks.push(e.data);
+        }
+      };
+
+      this.mediaRecorder.onstop = () => this.handleRecordingComplete();
+
+      this.mediaRecorder.start(1000); // Capture in 1-second chunks
+
+      // Start duration timer
+      this._duration = 0;
+      this.durationInterval = window.setInterval(() => {
+        this._duration++;
+        this.events.onDurationUpdate?.(this._duration);
+      }, 1000);
+
+      this._isRecording = true;
+    } catch (error) {
+      console.error('Error starting recording:', error);
+      this._isRecording = false;
+      this.events.onError?.(error as Error);
+      throw error;
+    }
+  }
+
+  stopRecording(): void {
+    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+      this.mediaRecorder.stop();
+    }
+
+    if (this.durationInterval) {
+      clearInterval(this.durationInterval);
+      this.durationInterval = null;
+    }
+  }
+
+  private async handleRecordingComplete(): Promise<void> {
+    const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
+    this._recordedBlob = blob;
+
+    // Stop all tracks
+    if (this.currentStream) {
+      this.currentStream.getTracks().forEach(track => track.stop());
+      this.currentStream = null;
+    }
+
+    this._isRecording = false;
+    this.events.onRecordingComplete?.(this._recordedBlob);
+  }
+
+  // ==================== Conversion & Export ====================
+
+  /**
+   * Converts a WebM blob to MP4 using mediabunny's Conversion API.
+   * Uses WebCodecs for hardware-accelerated H.264 encoding.
+   */
+  async convertToMp4(webmBlob: Blob): Promise<Blob> {
+    const {
+      Input, Output, Conversion, BlobSource, BufferTarget, Mp4OutputFormat, WEBM, QUALITY_HIGH,
+    } = await import('mediabunny');
+
+    const input = new Input({
+      source: new BlobSource(webmBlob),
+      formats: [WEBM],
+    });
+
+    const target = new BufferTarget();
+    const output = new Output({
+      format: new Mp4OutputFormat({ fastStart: 'in-memory' }),
+      target,
+    });
+
+    const conversion = await Conversion.init({
+      input,
+      output,
+      // Force transcoding from VP9 → H.264 and Opus → AAC
+      video: {
+        codec: 'avc',
+        bitrate: QUALITY_HIGH,
+        fit: 'contain',
+      },
+      audio: {
+        codec: 'aac',
+        bitrate: QUALITY_HIGH,
+      },
+    });
+    await conversion.execute();
+
+    const buffer = target.buffer;
+    if (!buffer || buffer.byteLength === 0) {
+      throw new Error('MP4 conversion produced empty output');
+    }
+
+    return new Blob([buffer], { type: 'video/mp4' });
+  }
+
+  async exportTrimmedVideo(
+    videoElement: HTMLVideoElement,
+    trimStart: number,
+    trimEnd: number
+  ): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      // Create a canvas for capturing frames
+      const canvas = document.createElement('canvas');
+      canvas.width = videoElement.videoWidth || 1280;
+      canvas.height = videoElement.videoHeight || 720;
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        reject(new Error('Could not get canvas context'));
+        return;
+      }
+
+      // Create canvas stream for video
+      const canvasStream = canvas.captureStream(30);
+
+      // Try to capture audio from video element
+      let combinedStream: MediaStream;
+
+      try {
+        // Create audio context to capture video's audio
+        const audioCtx = new AudioContext();
+        const source = audioCtx.createMediaElementSource(videoElement);
+        const destination = audioCtx.createMediaStreamDestination();
+        source.connect(destination);
+        source.connect(audioCtx.destination); // Also play through speakers
+
+        // Combine video (from canvas) and audio (from video element)
+        combinedStream = new MediaStream([
+          ...canvasStream.getVideoTracks(),
+          ...destination.stream.getAudioTracks()
+        ]);
+
+        // Store audioCtx for cleanup
+        const cleanup = () => {
+          audioCtx.close();
+        };
+
+        this.recordTrimmedStream(videoElement, canvas, ctx, combinedStream, trimStart, trimEnd, cleanup, resolve, reject);
+      } catch (audioError) {
+        console.warn('Could not capture audio, recording video only:', audioError);
+        combinedStream = canvasStream;
+        this.recordTrimmedStream(videoElement, canvas, ctx, combinedStream, trimStart, trimEnd, () => {}, resolve, reject);
+      }
+    });
+  }
+
+  private recordTrimmedStream(
+    video: HTMLVideoElement,
+    canvas: HTMLCanvasElement,
+    ctx: CanvasRenderingContext2D,
+    stream: MediaStream,
+    trimStart: number,
+    trimEnd: number,
+    cleanup: () => void,
+    resolve: (blob: Blob) => void,
+    reject: (error: Error) => void
+  ): void {
+    const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+      ? 'video/webm;codecs=vp9'
+      : 'video/webm';
+
+    const recorder = new MediaRecorder(stream, { mimeType });
+    const chunks: Blob[] = [];
+
+    recorder.ondataavailable = (e) => {
+      if (e.data.size > 0) {
+        chunks.push(e.data);
+      }
+    };
+
+    recorder.onstop = () => {
+      cleanup();
+      resolve(new Blob(chunks, { type: 'video/webm' }));
+    };
+
+    recorder.onerror = (e) => {
+      cleanup();
+      reject(new Error('Recording error: ' + e));
+    };
+
+    // Seek to trim start
+    video.currentTime = trimStart;
+
+    video.onseeked = () => {
+      // Start recording
+      recorder.start(100);
+
+      // Start playing
+      video.play();
+
+      // Draw frames to canvas
+      const drawFrame = () => {
+        if (video.currentTime >= trimEnd || video.paused || video.ended) {
+          video.pause();
+          video.onseeked = null;
+
+          // Give a small delay before stopping to ensure last frame is captured
+          setTimeout(() => {
+            if (recorder.state === 'recording') {
+              recorder.stop();
+            }
+          }, 100);
+          return;
+        }
+
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        requestAnimationFrame(drawFrame);
+      };
+
+      drawFrame();
+    };
+  }
+
+  // ==================== Cleanup ====================
+
+  reset(): void {
+    this._recordedBlob = null;
+    this.recordedChunks = [];
+    this._duration = 0;
+    this._isRecording = false;
+  }
+
+  dispose(): void {
+    this.stopRecording();
+    this.stopAudioMonitoring();
+    this.reset();
+
+    if (this.currentStream) {
+      this.currentStream.getTracks().forEach(track => track.stop());
+      this.currentStream = null;
+    }
+  }
+}

package/ts_web/tspublish.json

@@ -0,0 +1,3 @@
+{
+  "order": 1
+}

package/ts_web/types/dom-mediacapture-stub/index.d.ts

@@ -0,0 +1,12 @@
+// Minimal type stubs for MediaCapture Transform API types not yet in lib.dom.d.ts.
+// These specialize MediaStreamTrack for audio/video so mediabunny's API is type-safe.
+
+interface MediaStreamAudioTrack extends MediaStreamTrack {
+  readonly kind: 'audio';
+  clone(): MediaStreamAudioTrack;
+}
+
+interface MediaStreamVideoTrack extends MediaStreamTrack {
+  readonly kind: 'video';
+  clone(): MediaStreamVideoTrack;
+}

package/ts_web/types/dom-mediacapture-stub/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@types/dom-mediacapture-transform",
+  "version": "0.0.0",
+  "description": "Minimal stub providing MediaStreamVideoTrack/MediaStreamAudioTrack for TS 6",
+  "types": "index.d.ts"
+}

package/ts_web/types/dom-webcodecs-stub/index.d.ts

@@ -0,0 +1,2 @@
+// Empty stub: TypeScript 6 includes WebCodecs types in lib.dom.d.ts natively.
+// This prevents @types/dom-webcodecs from conflicting with the built-in types.

package/ts_web/types/dom-webcodecs-stub/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@types/dom-webcodecs",
+  "version": "0.0.0",
+  "description": "Empty stub — TypeScript 6 provides WebCodecs types natively in lib.dom.d.ts",
+  "types": "index.d.ts"
+}

package/ts_web/wcctools.interfaces.ts

@@ -0,0 +1,31 @@
+/**
+ * Configuration for a section in the WCC Tools sidebar
+ */
+export interface IWccSection {
+  /** Display name for the section header */
+  name: string;
+  /** How items in this section are rendered - 'elements' show demos, 'pages' render directly */
+  type: 'elements' | 'pages';
+  /** The items in this section - either element classes or page factory functions */
+  items: Record<string, any>;
+  /** Optional filter function to include/exclude items */
+  filter?: (name: string, item: any) => boolean;
+  /** Optional sort function for ordering items */
+  sort?: (a: [string, any], b: [string, any]) => number;
+  /** Optional Material icon name for the section header */
+  icon?: string;
+  /** Whether this section should start collapsed (default: false) */
+  collapsed?: boolean;
+}
+
+/**
+ * Configuration object for setupWccTools
+ */
+export interface IWccConfig {
+  sections: IWccSection[];
+}
+
+/**
+ * Type for element selection types - now section-based
+ */
+export type TElementType = 'element' | 'page';

package/ts_web/wcctools.plugins.ts

@@ -0,0 +1,5 @@
+import * as deesDomtools from '@design.estate/dees-domtools';
+
+export {
+  deesDomtools
+};