@remotion/webcodecs 4.0.339 → 4.0.341

package/LICENSE.md

@@ -6,10 +6,10 @@ In Remotion 5.0, the license will slightly change. [View the changes here](https
 
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
-- [Free license](#free-license)
-- [Company license](#company-license)
+- [Free License](#free-license)
+- [Company License](#company-license)
 
-## Free license
+## Free License
 
 Copyright © 2025 [Remotion](https://www.remotion.dev)
 
@@ -24,7 +24,7 @@ You are eligible to use Remotion for free if you are:
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
@@ -38,12 +38,12 @@ The software is provided "as is", without warranty of any kind, express or impli
 
 Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
-## Company license
+## Company License
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
+You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
 
 Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
 
 ### FAQs
 
-Are you not sure whether you need a company license because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).
+Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

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/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/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.339",
+  "version": "4.0.341",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -19,8 +19,8 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
   "dependencies": {
-    "@remotion/media-parser": "4.0.339",
-    "@remotion/licensing": "4.0.339"
+    "@remotion/media-parser": "4.0.341",
+    "@remotion/licensing": "4.0.341"
   },
   "peerDependencies": {},
   "devDependencies": {
@@ -29,8 +29,8 @@
     "vite": "5.4.19",
     "@playwright/test": "1.51.1",
     "eslint": "9.19.0",
-    "@remotion/example-videos": "4.0.339",
-    "@remotion/eslint-config-internal": "4.0.339"
+    "@remotion/example-videos": "4.0.341",
+    "@remotion/eslint-config-internal": "4.0.341"
   },
   "keywords": [],
   "publishConfig": {

package/dist/extract-frames-on-worker.js

@@ -1 +0,0 @@
-"use strict";