@remotion/webcodecs 4.0.394 → 4.0.396

package/dist/audio-decoder.d.ts

@@ -0,0 +1,24 @@
+import type { MediaParserLogLevel } from '@remotion/media-parser';
+import type { WebCodecsController } from './webcodecs-controller';
+export type WebCodecsAudioDecoder = {
+    decode: (audioSample: EncodedAudioChunkInit | EncodedAudioChunk) => void;
+    close: () => void;
+    flush: () => Promise<void>;
+    waitForFinish: () => Promise<void>;
+    waitForQueueToBeLessThan: (items: number) => Promise<void>;
+};
+export type CreateAudioDecoderInit = {
+    onFrame: (frame: AudioData) => Promise<void> | void;
+    onError: (error: Error) => void;
+    controller: WebCodecsController | null;
+    config: AudioDecoderConfig;
+    logLevel: MediaParserLogLevel;
+};
+export declare const internalCreateAudioDecoder: ({ onFrame, onError, controller, config, logLevel, }: CreateAudioDecoderInit) => WebCodecsAudioDecoder;
+export declare const createAudioDecoder: ({ onFrame, onError, controller, track, logLevel, }: {
+    track: AudioDecoderConfig;
+    onFrame: (frame: AudioData) => Promise<void> | void;
+    onError: (error: Error) => void;
+    controller?: WebCodecsController | null;
+    logLevel?: MediaParserLogLevel;
+}) => WebCodecsAudioDecoder;

package/dist/audio-decoder.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAudioDecoder = exports.internalCreateAudioDecoder = void 0;
+const get_wave_audio_decoder_1 = require("./get-wave-audio-decoder");
+const io_synchronizer_1 = require("./io-manager/io-synchronizer");
+const internalCreateAudioDecoder = ({ onFrame, onError, controller, config, logLevel, }) => {
+    if (controller &&
+        controller._internals._mediaParserController._internals.signal.aborted) {
+        throw new Error('Not creating audio decoder, already aborted');
+    }
+    const ioSynchronizer = (0, io_synchronizer_1.makeIoSynchronizer)({
+        logLevel,
+        label: 'Audio decoder',
+        controller,
+    });
+    if (config.codec === 'pcm-s16') {
+        return (0, get_wave_audio_decoder_1.getWaveAudioDecoder)({
+            onFrame,
+            config,
+            sampleFormat: 's16',
+            logLevel,
+            ioSynchronizer,
+            onError,
+        });
+    }
+    const audioDecoder = new AudioDecoder({
+        async output(frame) {
+            try {
+                await onFrame(frame);
+            }
+            catch (err) {
+                frame.close();
+                onError(err);
+            }
+            ioSynchronizer.onOutput(frame.timestamp + (frame.duration ?? 0));
+        },
+        error(error) {
+            onError(error);
+        },
+    });
+    const close = () => {
+        if (controller) {
+            controller._internals._mediaParserController._internals.signal.removeEventListener('abort', 
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            onAbort);
+        }
+        if (audioDecoder.state === 'closed') {
+            return;
+        }
+        audioDecoder.close();
+    };
+    const onAbort = () => {
+        close();
+    };
+    if (controller) {
+        controller._internals._mediaParserController._internals.signal.addEventListener('abort', onAbort);
+    }
+    audioDecoder.configure(config);
+    const processSample = (audioSample) => {
+        if (audioDecoder.state === 'closed') {
+            return;
+        }
+        // Don't flush, it messes up the audio
+        const chunk = audioSample instanceof EncodedAudioChunk
+            ? audioSample
+            : new EncodedAudioChunk(audioSample);
+        audioDecoder.decode(chunk);
+        // https://test-streams.mux.dev/x36xhzz/url_0/url_525/193039199_mp4_h264_aac_hd_7.ts
+        // has a 16 byte audio sample at the end which chrome does not decode
+        // Might be empty audio
+        // For now only reporting chunks that are bigger than that
+        // 16 was chosen arbitrarily, can be improved
+        if (chunk.byteLength > 16) {
+            ioSynchronizer.inputItem(chunk.timestamp);
+        }
+    };
+    return {
+        decode: (sample) => {
+            processSample(sample);
+        },
+        waitForFinish: async () => {
+            // Firefox might throw "Needs to be configured first"
+            try {
+                await audioDecoder.flush();
+            }
+            catch { }
+            await ioSynchronizer.waitForFinish();
+        },
+        close,
+        flush: async () => {
+            await audioDecoder.flush();
+        },
+        waitForQueueToBeLessThan: ioSynchronizer.waitForQueueSize,
+    };
+};
+exports.internalCreateAudioDecoder = internalCreateAudioDecoder;
+const createAudioDecoder = ({ onFrame, onError, controller, track, logLevel, }) => {
+    return (0, exports.internalCreateAudioDecoder)({
+        onFrame,
+        onError,
+        controller: controller ?? null,
+        config: track,
+        logLevel: logLevel ?? 'error',
+    });
+};
+exports.createAudioDecoder = createAudioDecoder;

package/dist/can-use-webfs-target.d.ts

@@ -0,0 +1 @@
+export declare const canUseWebFsWriter: () => Promise<boolean>;

package/dist/can-use-webfs-target.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canUseWebFsWriter = void 0;
+const canUseWebFsWriter = async () => {
+    if (!('storage' in navigator)) {
+        return false;
+    }
+    if (!('getDirectory' in navigator.storage)) {
+        return false;
+    }
+    try {
+        const directoryHandle = await navigator.storage.getDirectory();
+        const fileHandle = await directoryHandle.getFileHandle('remotion-probe-web-fs-support', {
+            create: true,
+        });
+        const canUse = fileHandle.createWritable !== undefined;
+        return canUse;
+    }
+    catch {
+        return false;
+    }
+};
+exports.canUseWebFsWriter = canUseWebFsWriter;

package/dist/create/iso-base-media/primitives.d.ts

@@ -1,4 +1,4 @@
-export declare const stringsToUint8Array: (str: string) => Uint8Array<ArrayBuffer>;
+export declare const stringsToUint8Array: (str: string) => Uint8Array<ArrayBufferLike>;
 export declare const numberTo32BitUIntOrInt: (num: number) => Uint8Array<ArrayBuffer>;
 export declare const numberTo64BitUIntOrInt: (num: number | bigint) => Uint8Array<ArrayBuffer>;
 export declare const numberTo32BitUIntOrIntLeading128: (num: number) => Uint8Array<ArrayBuffer>;

package/dist/create-frames.d.ts

@@ -0,0 +1,8 @@
+export declare const extractFrames: ({ fromSeconds, toSeconds, width, height, src, onFrame, }: {
+    fromSeconds: number;
+    toSeconds: number;
+    width: number;
+    height: number;
+    src: string;
+    onFrame: (frame: VideoFrame) => void;
+}) => Promise<void>;

package/dist/create-frames.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractFrames = void 0;
+const media_parser_1 = require("@remotion/media-parser");
+const worker_1 = require("@remotion/media-parser/worker");
+const create_video_decoder_1 = require("./create-video-decoder");
+const extractFrames = async ({ fromSeconds, toSeconds, width, height, src, onFrame, }) => {
+    const controller = (0, media_parser_1.mediaParserController)();
+    controller.seek(fromSeconds);
+    const segmentDuration = toSeconds - fromSeconds;
+    const expectedFrames = [];
+    try {
+        await (0, worker_1.parseMediaOnWebWorker)({
+            src: new URL(src, window.location.href).toString(),
+            acknowledgeRemotionLicense: true,
+            controller,
+            onVideoTrack: ({ track }) => {
+                const aspectRatio = track.width / track.height;
+                const framesFitInWidth = Math.ceil(width / (height * aspectRatio));
+                const timestampTargets = [];
+                for (let i = 0; i < framesFitInWidth; i++) {
+                    timestampTargets.push(fromSeconds +
+                        ((segmentDuration * media_parser_1.WEBCODECS_TIMESCALE) / framesFitInWidth) *
+                            (i + 0.5));
+                }
+                const decoder = (0, create_video_decoder_1.createVideoDecoder)({
+                    onFrame: (frame) => {
+                        if (frame.timestamp >= expectedFrames[0] - 1) {
+                            expectedFrames.shift();
+                            onFrame(frame);
+                        }
+                        frame.close();
+                    },
+                    onError: console.error,
+                    track,
+                });
+                const queued = [];
+                return async (sample) => {
+                    const nextTimestampWeWant = timestampTargets[0];
+                    if (nextTimestampWeWant === undefined) {
+                        throw new Error('this should not happen');
+                    }
+                    if (sample.type === 'key') {
+                        queued.length = 0;
+                    }
+                    queued.push(sample);
+                    if (sample.timestamp > nextTimestampWeWant) {
+                        expectedFrames.push(timestampTargets.shift());
+                        while (queued.length > 0) {
+                            const sam = queued.shift();
+                            await decoder.waitForQueueToBeLessThan(10);
+                            await decoder.decode(sam);
+                        }
+                        if (timestampTargets.length === 0) {
+                            await decoder.flush();
+                            controller.abort();
+                        }
+                    }
+                };
+            },
+        });
+    }
+    catch (e) {
+        if (!(0, media_parser_1.hasBeenAborted)(e)) {
+            throw e;
+        }
+    }
+};
+exports.extractFrames = extractFrames;

package/dist/esm/index.mjs

@@ -1,111 +1,3 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-
-// ../licensing/dist/register-usage-point.js
-var require_register_usage_point = __commonJS((exports) => {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.registerUsageEvent = exports.HOST = undefined;
-  exports.HOST = "https://www.remotion.pro";
-  var registerUsageEvent = async ({ apiKey, host, succeeded, event }) => {
-    const abortController = new AbortController;
-    const timeout = setTimeout(() => {
-      abortController.abort();
-    }, 1e4);
-    try {
-      const res = await fetch(`${exports.HOST}/api/track/register-usage-point`, {
-        method: "POST",
-        body: JSON.stringify({
-          event,
-          apiKey,
-          host,
-          succeeded
-        }),
-        headers: {
-          "Content-Type": "application/json"
-        },
-        signal: abortController.signal
-      });
-      clearTimeout(timeout);
-      const json = await res.json();
-      if (json.success) {
-        return {
-          billable: json.billable,
-          classification: json.classification
-        };
-      }
-      if (!res.ok) {
-        throw new Error(json.error);
-      }
-      const read = await res.json();
-      return read;
-    } catch (err) {
-      clearTimeout(timeout);
-      if (err instanceof Error && err.name === "AbortError") {
-        throw new Error("Request timed out after 10 seconds");
-      }
-      throw err;
-    }
-  };
-  exports.registerUsageEvent = registerUsageEvent;
-});
-
-// ../licensing/dist/get-usage.js
-var require_get_usage = __commonJS((exports) => {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.getUsage = undefined;
-  var register_usage_point_1 = require_register_usage_point();
-  var getUsage = async ({ apiKey, since }) => {
-    const res = await fetch(`${register_usage_point_1.HOST}/api/track/get-usage`, {
-      method: "POST",
-      body: JSON.stringify({
-        apiKey,
-        since: since !== null && since !== undefined ? since : null
-      }),
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-    const json = await res.json();
-    if (json.success) {
-      return {
-        cloudRenders: json.cloudRenders,
-        webcodecConversions: json.webcodecConversions
-      };
-    }
-    throw new Error(json.error);
-  };
-  exports.getUsage = getUsage;
-});
-
-// ../licensing/dist/index.js
-var require_dist = __commonJS((exports) => {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.getUsage = exports.registerUsageEvent = undefined;
-  var register_usage_point_1 = require_register_usage_point();
-  Object.defineProperty(exports, "registerUsageEvent", { enumerable: true, get: function() {
-    return register_usage_point_1.registerUsageEvent;
-  } });
-  var get_usage_1 = require_get_usage();
-  Object.defineProperty(exports, "getUsage", { enumerable: true, get: function() {
-    return get_usage_1.getUsage;
-  } });
-});
-
 // src/writers/web-fs.ts
 var createContent = async ({
   filename
@@ -5353,8 +5245,55 @@ var makeVideoTrackHandler = ({
   });
 };
 
+// ../licensing/dist/esm/index.mjs
+var HOST = "https://www.remotion.pro";
+var registerUsageEvent = async ({
+  apiKey,
+  host,
+  succeeded,
+  event
+}) => {
+  const abortController = new AbortController;
+  const timeout = setTimeout(() => {
+    abortController.abort();
+  }, 1e4);
+  try {
+    const res = await fetch(`${HOST}/api/track/register-usage-point`, {
+      method: "POST",
+      body: JSON.stringify({
+        event,
+        apiKey,
+        host,
+        succeeded
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      },
+      signal: abortController.signal
+    });
+    clearTimeout(timeout);
+    const json = await res.json();
+    if (json.success) {
+      return {
+        billable: json.billable,
+        classification: json.classification
+      };
+    }
+    if (!res.ok) {
+      throw new Error(json.error);
+    }
+    const read = await res.json();
+    return read;
+  } catch (err) {
+    clearTimeout(timeout);
+    if (err instanceof Error && err.name === "AbortError") {
+      throw new Error("Request timed out after 10 seconds");
+    }
+    throw err;
+  }
+};
+
 // src/send-telemetry-event.ts
-var import_licensing = __toESM(require_dist(), 1);
 var sendUsageEvent = async ({
   apiKey,
   succeeded
@@ -5363,7 +5302,7 @@ var sendUsageEvent = async ({
   if (host === null) {
     return;
   }
-  await import_licensing.registerUsageEvent({
+  await registerUsageEvent({
     apiKey,
     event: "webcodec-conversion",
     host,

package/dist/esm/worker.mjs

@@ -1,21 +1,3 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-
 // src/extract-frames-on-web-worker.ts
 import { parseMediaOnWebWorker } from "@remotion/media-parser/worker";
 

package/dist/video-decoder.d.ts

@@ -0,0 +1,23 @@
+import type { MediaParserLogLevel, MediaParserVideoSample } from '@remotion/media-parser';
+import type { WebCodecsController } from './webcodecs-controller';
+export type WebCodecsVideoDecoder = {
+    decode: (videoSample: MediaParserVideoSample | EncodedVideoChunk) => void;
+    close: () => void;
+    flush: () => Promise<void>;
+    waitForFinish: () => Promise<void>;
+    waitForQueueToBeLessThan: (items: number) => Promise<void>;
+};
+export declare const internalCreateVideoDecoder: ({ onFrame, onError, controller, config, logLevel, }: {
+    onFrame: (frame: VideoFrame) => Promise<void> | void;
+    onError: (error: Error) => void;
+    controller: WebCodecsController | null;
+    config: VideoDecoderConfig;
+    logLevel: MediaParserLogLevel;
+}) => WebCodecsVideoDecoder;
+export declare const createVideoDecoder: ({ onFrame, onError, controller, track, logLevel, }: {
+    track: VideoDecoderConfig;
+    onFrame: (frame: VideoFrame) => Promise<void> | void;
+    onError: (error: Error) => void;
+    controller?: WebCodecsController;
+    logLevel?: MediaParserLogLevel;
+}) => WebCodecsVideoDecoder;

package/dist/video-decoder.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVideoDecoder = exports.internalCreateVideoDecoder = void 0;
+const io_synchronizer_1 = require("./io-manager/io-synchronizer");
+const log_1 = require("./log");
+const internalCreateVideoDecoder = ({ onFrame, onError, controller, config, logLevel, }) => {
+    const ioSynchronizer = (0, io_synchronizer_1.makeIoSynchronizer)({
+        logLevel,
+        label: 'Video decoder',
+        controller,
+    });
+    const videoDecoder = new VideoDecoder({
+        async output(frame) {
+            try {
+                await onFrame(frame);
+            }
+            catch (err) {
+                onError(err);
+                frame.close();
+            }
+            ioSynchronizer.onOutput(frame.timestamp);
+        },
+        error(error) {
+            onError(error);
+        },
+    });
+    const close = () => {
+        if (controller) {
+            controller._internals._mediaParserController._internals.signal.removeEventListener('abort', 
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            onAbort);
+        }
+        if (videoDecoder.state === 'closed') {
+            return;
+        }
+        videoDecoder.close();
+    };
+    const onAbort = () => {
+        close();
+    };
+    if (controller) {
+        controller._internals._mediaParserController._internals.signal.addEventListener('abort', onAbort);
+    }
+    videoDecoder.configure(config);
+    const decode = (sample) => {
+        if (videoDecoder.state === 'closed') {
+            return;
+        }
+        const encodedChunk = sample instanceof EncodedVideoChunk
+            ? sample
+            : new EncodedVideoChunk(sample);
+        videoDecoder.decode(encodedChunk);
+        ioSynchronizer.inputItem(sample.timestamp);
+    };
+    return {
+        decode,
+        waitForFinish: async () => {
+            await videoDecoder.flush();
+            log_1.Log.verbose(logLevel, 'Flushed video decoder');
+            await ioSynchronizer.waitForFinish();
+            log_1.Log.verbose(logLevel, 'IO synchro finished');
+        },
+        close,
+        flush: async () => {
+            await videoDecoder.flush();
+        },
+        waitForQueueToBeLessThan: ioSynchronizer.waitForQueueSize,
+    };
+};
+exports.internalCreateVideoDecoder = internalCreateVideoDecoder;
+const createVideoDecoder = ({ onFrame, onError, controller, track, logLevel, }) => {
+    return (0, exports.internalCreateVideoDecoder)({
+        onFrame,
+        onError,
+        controller: controller ?? null,
+        config: track,
+        logLevel: logLevel ?? 'info',
+    });
+};
+exports.createVideoDecoder = createVideoDecoder;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/webcodecs",
-	"version": "4.0.394",
+	"version": "4.0.396",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -27,14 +27,14 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
 	"dependencies": {
-		"@remotion/media-parser": "4.0.394",
-		"@remotion/licensing": "4.0.394"
+		"@remotion/media-parser": "4.0.396",
+		"@remotion/licensing": "4.0.396"
 	},
 	"peerDependencies": {},
 	"devDependencies": {
 		"@types/dom-webcodecs": "0.1.11",
-		"@remotion/example-videos": "4.0.394",
-		"@remotion/eslint-config-internal": "4.0.394",
+		"@remotion/example-videos": "4.0.396",
+		"@remotion/eslint-config-internal": "4.0.396",
 		"playwright": "1.55.1",
 		"vite": "5.4.21",
 		"@playwright/test": "1.55.1",