Release v0.2.1: Add VideoFile support and remove AudioWorklet - Add VideoFile processing support in core/encode.ts - Remove unused AudioWorklet feature (was unimplemented) - Update version to 0.2.1 in package.json and README.md - Simplify MediaStreamRecorder to use only MediaStreamTrackProcessor - Clean up build configuration and exports - Update tests and maintain test coverage

Author: romot-co

README.md

@@ -2,8 +2,8 @@
 
 A TypeScript library to encode video (H.264/AVC, VP9, VP8) and audio (AAC, Opus) using the WebCodecs API and mux them into MP4 or WebM containers with a simple, function-first design.
 
-> **🎉 v1.0.0 Release**  
-> This is the stable release with the new function-first API. The API is now simplified and production-ready with automatic configuration, quality presets, and progressive enhancement.
+> **🎉 v0.2.1 Release**  
+> This release includes VideoFile support and improved API stability. The function-first API is production-ready with automatic configuration, quality presets, and progressive enhancement.
 
 ## Features
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcodecs-encoder",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A TypeScript library for browser environments to encode video (H.264/AVC, VP9, VP8) and audio (AAC, Opus) using the WebCodecs API and mux them into MP4 or WebM containers with real-time streaming support. New function-first API design.",
   "homepage": "https://github.com/romot-co/webcodecs-encoder",
   "repository": {
@@ -35,12 +35,7 @@
       "require": "./dist/utils/can-encode.cjs",
       "import": "./dist/utils/can-encode.js"
     },
-    "./worker": "./dist/worker.js",
-    "./audio-worklet": {
-      "types": "./dist/audio-worklet.d.ts",
-      "require": "./dist/audio-worklet.cjs",
-      "import": "./dist/audio-worklet.js"
-    }
+    "./worker": "./dist/worker.js"
   },
   "scripts": {
     "build:main": "tsup",

scripts/postinstall.js

@@ -16,7 +16,6 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // Find the package root (where this script is located)
 const packageRoot = path.resolve(__dirname, '..');
 const workerSource = path.join(packageRoot, 'dist', 'worker.js');
-const audioWorkletSource = path.join(packageRoot, 'dist', 'audio-worklet.js');
 
 // Also check the actual file location for better detection
 const scriptPath = fileURLToPath(import.meta.url);
@@ -98,12 +97,10 @@ function installWorker() {
       const publicDir = path.join(projectRoot, pattern);
       if (fs.existsSync(publicDir)) {
         const workerDestination = path.join(publicDir, 'webcodecs-worker.js');
-        const audioWorkletDestination = path.join(publicDir, 'webcodecs-audio-worklet.js');
 
         const workerCopied = safeCopy(workerSource, workerDestination);
-        const audioWorkletCopied = safeCopy(audioWorkletSource, audioWorkletDestination);
 
-        if (workerCopied || audioWorkletCopied) {
+        if (workerCopied) {
           copied = true;
           break; // Only copy to the first available public directory
         }
@@ -114,19 +111,17 @@ function installWorker() {
       // Try to create a public directory
       const publicDir = path.join(projectRoot, 'public');
       const workerDestination = path.join(publicDir, 'webcodecs-worker.js');
-      const audioWorkletDestination = path.join(publicDir, 'webcodecs-audio-worklet.js');
 
       const workerCopied = safeCopy(workerSource, workerDestination);
-      const audioWorkletCopied = safeCopy(audioWorkletSource, audioWorkletDestination);
 
-      if (workerCopied || audioWorkletCopied) {
+      if (workerCopied) {
         copied = true;
       }
     }
 
     if (copied) {
       console.log('\n🎉 WebCodecs Encoder is ready to use!');
-      console.log('Worker and AudioWorklet files have been automatically copied to your public directory.');
+      console.log('Worker files have been automatically copied to your public directory.');
       console.log('\nUsage:');
       console.log('  import { encode, canEncode } from "webcodecs-encoder";');
       console.log('  const isSupported = await canEncode();');
@@ -135,7 +130,6 @@ function installWorker() {
       console.log('\n⚠️  WebCodecs Encoder setup info:');
       console.log('Unable to auto-copy worker files. You may need to copy them manually:');
       console.log('  1. Copy node_modules/webcodecs-encoder/dist/worker.js to your public directory as webcodecs-worker.js');
-      console.log('  2. Copy node_modules/webcodecs-encoder/dist/audio-worklet.js to your public directory as webcodecs-audio-worklet.js');
       console.log('\nOr specify custom worker URLs in your bundler configuration.');
     }
   }

src/core/encode.ts

@@ -8,6 +8,7 @@ import {
   EncodeError,
   Frame,
   ProgressInfo,
+  VideoFile,
 } from "../types";
 import { inferAndBuildConfig } from "../utils/config-parser";
 import { WorkerCommunicator } from "../worker/worker-communicator";
@@ -163,11 +164,8 @@ async function processVideoSource(
     // AsyncIterableの処理
     await processAsyncIterable(communicator, source);
   } else {
-    // VideoFileの処理（今回は基本実装）
-    throw new EncodeError(
-      "invalid-input",
-      "VideoFile processing not yet implemented",
-    );
+    // VideoFileの処理
+    await processVideoFile(communicator, source as VideoFile, config);
   }
 }
 
@@ -422,3 +420,88 @@ async function convertToVideoFrame(
     `Unsupported frame type: ${typeof frame}. Frame must be VideoFrame, HTMLCanvasElement, OffscreenCanvas, ImageBitmap, or ImageData.`,
   );
 }
+
+/**
+ * VideoFileを処理してフレームを抽出
+ */
+async function processVideoFile(
+  communicator: WorkerCommunicator,
+  videoFile: VideoFile,
+  config: any,
+): Promise<void> {
+  try {
+    // HTML5 Video要素を作成してファイルを読み込み
+    const video = document.createElement("video");
+    video.muted = true;
+    video.preload = "metadata";
+
+    // ファイルをオブジェクトURLとして設定
+    const objectUrl = URL.createObjectURL(videoFile.file);
+    video.src = objectUrl;
+
+    await new Promise<void>((resolve, reject) => {
+      video.onloadedmetadata = () => resolve();
+      video.onerror = () => reject(new Error("Failed to load video file"));
+    });
+
+    // 動画の情報を取得
+    const { duration, videoWidth, videoHeight } = video;
+    const frameRate = config.frameRate || 30;
+    const totalFrames = Math.floor(duration * frameRate);
+
+    // Canvasを作成してフレームを抽出
+    const canvas = document.createElement("canvas");
+    canvas.width = videoWidth;
+    canvas.height = videoHeight;
+    const ctx = canvas.getContext("2d");
+
+    if (!ctx) {
+      throw new EncodeError(
+        "initialization-failed",
+        "Failed to get canvas context",
+      );
+    }
+
+    // 動画の各フレームを処理
+    for (let frameIndex = 0; frameIndex < totalFrames; frameIndex++) {
+      const timestamp = frameIndex / frameRate;
+
+      // 動画の指定時間にシーク
+      video.currentTime = timestamp;
+
+      await new Promise<void>((resolve) => {
+        video.onseeked = () => resolve();
+        // タイムアウト処理を追加してデッドロックを防止
+        setTimeout(() => resolve(), 100);
+      });
+
+      // Canvasに現在のフレームを描画
+      ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
+
+      // VideoFrameを作成
+      const videoFrame = new VideoFrame(canvas, {
+        timestamp: frameIndex * (1000000 / frameRate), // マイクロ秒
+      });
+
+      // ワーカーに送信
+      await addFrameToWorker(
+        communicator,
+        videoFrame,
+        frameIndex * (1000000 / frameRate),
+      );
+
+      // フレームをクローズしてメモリリークを防止
+      videoFrame.close();
+    }
+
+    // リソースをクリーンアップ
+    URL.revokeObjectURL(objectUrl);
+    video.remove();
+  } catch (error) {
+    throw new EncodeError(
+      "invalid-input",
+      `VideoFile processing failed: ${error instanceof Error ? error.message : String(error)}`,
+      error,
+    );
+  }
+}

src/mediastream-recorder.ts

@@ -6,8 +6,6 @@ import { inferAndBuildConfig } from "./utils/config-parser";
 export interface MediaStreamRecorderOptions extends EncodeOptions {
   /** 最初のタイムスタンプの処理方法 */
   firstTimestampBehavior?: "offset" | "strict";
-  /** AudioWorkletを使用するかどうか */
-  useAudioWorklet?: boolean;
 }
 
 export class MediaStreamRecorder {
@@ -75,16 +73,12 @@ export class MediaStreamRecorder {
 
       if (aTrack) {
         this.audioTrack = aTrack;
-        if (mergedOptions.useAudioWorklet) {
-          await this.setupAudioWorklet(stream);
-        } else {
-          const processor = new MediaStreamTrackProcessor({
-            track: aTrack,
-          });
-          this.audioReader =
-            processor.readable.getReader() as ReadableStreamDefaultReader<AudioData>;
-          this.processAudio();
-        }
+        const processor = new MediaStreamTrackProcessor({
+          track: aTrack,
+        });
+        this.audioReader =
+          processor.readable.getReader() as ReadableStreamDefaultReader<AudioData>;
+        this.processAudio();
       }
     } catch (error) {
       this.cleanup();
@@ -148,12 +142,6 @@ export class MediaStreamRecorder {
     });
   }
 
-  private async setupAudioWorklet(_stream: MediaStream): Promise<void> {
-    // AudioWorkletのセットアップは複雑なため、基本実装のみ
-    // 実際の実装では AudioContext と AudioWorkletNode が必要
-    throw new EncodeError('not-supported', 'AudioWorklet setup not yet implemented for new API');
-  }
-
   private async processVideo(): Promise<void> {
     if (!this.videoReader || !this.communicator) return;
     const reader = this.videoReader;

src/types.ts

@@ -215,18 +215,12 @@ export interface CancelWorkerMessage {
   type: "cancel";
 }
 
-export interface ConnectAudioPortMessage {
-  type: "connectAudioPort";
-  port: MessagePort;
-}
-
 export type WorkerMessage =
   | InitializeWorkerMessage
   | AddVideoFrameMessage
   | AddAudioDataMessage
   | FinalizeWorkerMessage
-  | CancelWorkerMessage
-  | ConnectAudioPortMessage;
+  | CancelWorkerMessage;
 
 // Messages FROM the Worker
 export interface WorkerInitializedMessage {

src/worker/audio-worklet.ts

@@ -105,7 +105,6 @@ class EncoderWorker {
   private processedFrames: number = 0;
   private videoFrameCount: number = 0;
   private isCancelled: boolean = false;
-  private audioWorkletPort: MessagePort | null = null;
 
   constructor() {
     // コンストラクタで依存性を注入することも可能
@@ -1051,11 +1050,6 @@ class EncoderWorker {
     this.totalFramesToProcess = undefined;
     this.processedFrames = 0;
     this.videoFrameCount = 0;
-    if (this.audioWorkletPort) {
-      this.audioWorkletPort.onmessage = null;
-      this.audioWorkletPort.close();
-      this.audioWorkletPort = null;
-    }
     if (resetCancelled) {
       this.isCancelled = false;
     }
@@ -1080,15 +1074,6 @@ class EncoderWorker {
           this.cleanup();
           await this.initializeEncoders(eventData);
           break;
-        case "connectAudioPort":
-          this.audioWorkletPort = eventData.port;
-          this.audioWorkletPort.onmessage = async (
-            e: MessageEvent<AddAudioDataMessage>,
-          ) => {
-            if (this.isCancelled) return;
-            await this.handleAddAudioData(e.data);
-          };
-          break;
         case "addVideoFrame":
           await this.handleAddVideoFrame(eventData);
           break;