@remotion/webcodecs 4.0.231 → 4.0.233

package/dist/on-video-track.js

@@ -10,11 +10,13 @@ const default_on_video_track_handler_1 = require("./default-on-video-track-handl
 const error_cause_1 = __importDefault(require("./error-cause"));
 const log_1 = require("./log");
 const on_frame_1 = require("./on-frame");
+const rotation_1 = require("./rotation");
 const video_decoder_1 = require("./video-decoder");
 const video_decoder_config_1 = require("./video-decoder-config");
 const video_encoder_1 = require("./video-encoder");
 const video_encoder_config_1 = require("./video-encoder-config");
-const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, container, }) => async (track) => {
+const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, container, rotate, progress, }) => async (track) => {
+    var _a;
     if (controller.signal.aborted) {
         throw new error_cause_1.default('Aborted');
     }
@@ -23,6 +25,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
         defaultVideoCodec,
         logLevel,
         container,
+        rotate,
     });
     if (videoOperation.type === 'drop') {
         return null;
@@ -57,10 +60,19 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
             });
         };
     }
+    if (videoOperation.type !== 'reencode') {
+        throw new error_cause_1.default(`Video track with ID ${track.trackId} could not be resolved with a valid operation. Received ${JSON.stringify(videoOperation)}, but must be either "copy", "reencode", "drop" or "fail"`);
+    }
+    const rotation = (_a = videoOperation.rotate) !== null && _a !== void 0 ? _a : -track.rotation;
+    const { height: newHeight, width: newWidth } = (0, rotation_1.calculateNewDimensionsFromDimensions)({
+        width: track.codedWidth,
+        height: track.codedHeight,
+        rotation,
+    });
     const videoEncoderConfig = await (0, video_encoder_config_1.getVideoEncoderConfig)({
         codec: videoOperation.videoCodec,
-        height: track.displayAspectHeight,
-        width: track.displayAspectWidth,
+        height: newHeight,
+        width: newWidth,
         fps: track.fps,
     });
     const videoDecoderConfig = await (0, video_decoder_config_1.getVideoDecoderConfigWithHardwareAcceleration)(track);
@@ -75,8 +87,8 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
     const { trackNumber } = await state.addTrack({
         type: 'video',
         color: track.color,
-        width: track.codedWidth,
-        height: track.codedHeight,
+        width: newWidth,
+        height: newHeight,
         codec: videoOperation.videoCodec,
         codecPrivate: null,
         timescale: track.timescale,
@@ -108,6 +120,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
         config: videoEncoderConfig,
         logLevel,
         outputCodec: videoOperation.videoCodec,
+        progress,
     });
     const videoDecoder = (0, video_decoder_1.createVideoDecoder)({
         config: videoDecoderConfig,
@@ -118,6 +131,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
                 videoEncoder,
                 onVideoFrame,
                 outputCodec: videoOperation.videoCodec,
+                rotation,
             });
         },
         onError: (err) => {
@@ -127,6 +141,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
         },
         signal: controller.signal,
         logLevel,
+        progress,
     });
     state.addWaitForFinishPromise(async () => {
         log_1.Log.verbose(logLevel, 'Waiting for video decoder to finish');

package/dist/rotate-video-frame.d.ts

@@ -0,0 +1,5 @@
+export declare const normalizeVideoRotation: (rotation: number) => number;
+export declare const rotateVideoFrame: ({ frame, rotation, }: {
+    frame: VideoFrame;
+    rotation: number;
+}) => VideoFrame;

package/dist/rotate-video-frame.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotateVideoFrame = exports.normalizeVideoRotation = void 0;
+const rotation_1 = require("./rotation");
+const normalizeVideoRotation = (rotation) => {
+    return ((rotation % 360) + 360) % 360;
+};
+exports.normalizeVideoRotation = normalizeVideoRotation;
+const rotateVideoFrame = ({ frame, rotation, }) => {
+    var _a;
+    const normalized = ((rotation % 360) + 360) % 360;
+    if (normalized % 360 === 0) {
+        return frame;
+    }
+    if (normalized % 90 !== 0) {
+        throw new Error('Only 90 degree rotations are supported');
+    }
+    const { height, width } = (0, rotation_1.calculateNewDimensionsFromDimensions)({
+        height: frame.displayHeight,
+        width: frame.displayWidth,
+        rotation,
+    });
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get 2d context');
+    }
+    canvas.width = width;
+    canvas.height = height;
+    if (normalized === 90) {
+        ctx.translate(width, 0);
+    }
+    else if (normalized === 180) {
+        ctx.translate(width, height);
+    }
+    else if (normalized === 270) {
+        ctx.translate(0, height);
+    }
+    ctx.rotate(normalized * (Math.PI / 180));
+    ctx.drawImage(frame, 0, 0);
+    return new VideoFrame(canvas, {
+        displayHeight: height,
+        displayWidth: width,
+        duration: (_a = frame.duration) !== null && _a !== void 0 ? _a : undefined,
+        timestamp: frame.timestamp,
+    });
+};
+exports.rotateVideoFrame = rotateVideoFrame;

package/dist/rotate-video.d.ts

@@ -0,0 +1,4 @@
+export declare const rotateVideo: ({ frame, rotation, }: {
+    frame: VideoFrame;
+    rotation: number;
+}) => VideoFrame;

package/dist/rotate-video.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotateVideo = void 0;
+const rotation_1 = require("./rotation");
+const rotateVideo = ({ frame, rotation, }) => {
+    const normalized = ((rotation % 360) + 360) % 360;
+    if (normalized % 360 === 0) {
+        return frame;
+    }
+    if (normalized % 90 !== 0) {
+        throw new Error('Only 90 degree rotations are supported');
+    }
+    const { height, width } = (0, rotation_1.calculateNewDimensionsFromDimensions)({
+        height: frame.displayHeight,
+        width: frame.displayWidth,
+        rotation,
+    });
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get 2d context');
+    }
+    canvas.width = width;
+    canvas.height = height;
+    if (normalized === 90) {
+        ctx.translate(width, 0);
+    }
+    else if (normalized === 180) {
+        ctx.translate(width, height);
+    }
+    else if (normalized === 270) {
+        ctx.translate(0, height);
+    }
+    ctx.rotate(normalized * (Math.PI / 180));
+    ctx.drawImage(frame, 0, 0);
+    return new VideoFrame(canvas, {
+        displayHeight: height,
+        displayWidth: width,
+        duration: frame.duration,
+        timestamp: frame.timestamp,
+    });
+};
+exports.rotateVideo = rotateVideo;

package/dist/rotation.d.ts

@@ -0,0 +1,8 @@
+export declare const calculateNewDimensionsFromDimensions: ({ width, height, rotation, }: {
+    width: number;
+    height: number;
+    rotation: number;
+}) => {
+    height: number;
+    width: number;
+};

package/dist/rotation.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateNewDimensionsFromDimensions = void 0;
+const calculateNewDimensionsFromDimensions = ({ width, height, rotation, }) => {
+    const switchDimensions = rotation % 90 === 0 && rotation % 180 !== 0;
+    const newHeight = switchDimensions ? width : height;
+    const newWidth = switchDimensions ? height : width;
+    return { height: newHeight, width: newWidth };
+};
+exports.calculateNewDimensionsFromDimensions = calculateNewDimensionsFromDimensions;

package/dist/select-container-creator.d.ts

@@ -0,0 +1,2 @@
+import type { ConvertMediaContainer } from './get-available-containers';
+export declare const selectContainerCreator: (container: ConvertMediaContainer) => ({ writer, onBytesProgress, onMillisecondsProgress, logLevel, filename, progressTracker, }: import("@remotion/media-parser/dist/create/media-fn").MediaFnGeneratorInput) => Promise<import("@remotion/media-parser").MediaFn>;

package/dist/select-container-creator.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectContainerCreator = void 0;
+const media_parser_1 = require("@remotion/media-parser");
+const selectContainerCreator = (container) => {
+    if (container === 'mp4') {
+        return media_parser_1.MediaParserInternals.createIsoBaseMedia;
+    }
+    if (container === 'wav') {
+        return media_parser_1.MediaParserInternals.createWav;
+    }
+    if (container === 'webm') {
+        return media_parser_1.MediaParserInternals.createMatroskaMedia;
+    }
+    throw new Error(`Unsupported container: ${container}`);
+};
+exports.selectContainerCreator = selectContainerCreator;

package/dist/test/avi-to-mp4.test.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const example_videos_1 = require("@remotion/example-videos");
+const node_1 = require("@remotion/media-parser/node");
+const bun_test_1 = require("bun:test");
+const convert_media_1 = require("../convert-media");
+(0, bun_test_1.test)('Convert AVI to MP4', async () => {
+    const output = await (0, convert_media_1.convertMedia)({
+        src: example_videos_1.exampleVideos.avi,
+        container: 'mp4',
+        reader: node_1.nodeReader,
+    });
+    const f = await output.save();
+    (0, bun_test_1.expect)(f.size).toBeGreaterThan(0);
+});

package/dist/video-decoder.d.ts

@@ -1,14 +1,15 @@
-import type { AudioOrVideoSample, LogLevel } from '@remotion/media-parser';
+import type { AudioOrVideoSample, LogLevel, ProgressTracker } from '@remotion/media-parser';
 export type WebCodecsVideoDecoder = {
     processSample: (videoSample: AudioOrVideoSample) => Promise<void>;
     waitForFinish: () => Promise<void>;
     close: () => void;
     flush: () => Promise<void>;
 };
-export declare const createVideoDecoder: ({ onFrame, onError, signal, config, logLevel, }: {
+export declare const createVideoDecoder: ({ onFrame, onError, signal, config, logLevel, progress, }: {
     onFrame: (frame: VideoFrame) => Promise<void>;
     onError: (error: DOMException) => void;
     signal: AbortSignal;
     config: VideoDecoderConfig;
     logLevel: LogLevel;
+    progress: ProgressTracker;
 }) => WebCodecsVideoDecoder;

package/dist/video-decoder.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createVideoDecoder = void 0;
 const io_synchronizer_1 = require("./io-manager/io-synchronizer");
 const log_1 = require("./log");
-const createVideoDecoder = ({ onFrame, onError, signal, config, logLevel, }) => {
-    const ioSynchronizer = (0, io_synchronizer_1.makeIoSynchronizer)(logLevel, 'Video decoder');
+const createVideoDecoder = ({ onFrame, onError, signal, config, logLevel, progress, }) => {
+    const ioSynchronizer = (0, io_synchronizer_1.makeIoSynchronizer)({
+        logLevel,
+        label: 'Video decoder',
+        progress,
+    });
     let outputQueue = Promise.resolve();
     const videoDecoder = new VideoDecoder({
         output(inputFrame) {
@@ -55,7 +59,11 @@ const createVideoDecoder = ({ onFrame, onError, signal, config, logLevel, }) =>
         if (videoDecoder.state === 'closed') {
             return;
         }
-        await ioSynchronizer.waitFor({ unemitted: 20, _unprocessed: 2 });
+        await ioSynchronizer.waitFor({
+            unemitted: 20,
+            _unprocessed: 2,
+            minimumProgress: sample.timestamp - 5000000,
+        });
         if (sample.type === 'key') {
             await videoDecoder.flush();
         }

package/dist/video-encoder-config.d.ts

@@ -1,4 +1,4 @@
-import type { ConvertMediaVideoCodec } from './codec-id';
+import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
 export declare const getVideoEncoderConfig: ({ codec, height, width, fps, }: {
     width: number;
     height: number;

package/dist/video-encoder.d.ts

@@ -1,16 +1,17 @@
-import type { LogLevel } from '@remotion/media-parser';
-import type { ConvertMediaVideoCodec } from './codec-id';
+import type { LogLevel, ProgressTracker } from '@remotion/media-parser';
+import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
 export type WebCodecsVideoEncoder = {
     encodeFrame: (videoFrame: VideoFrame, timestamp: number) => Promise<void>;
     waitForFinish: () => Promise<void>;
     close: () => void;
     flush: () => Promise<void>;
 };
-export declare const createVideoEncoder: ({ onChunk, onError, signal, config, logLevel, outputCodec, }: {
+export declare const createVideoEncoder: ({ onChunk, onError, signal, config, logLevel, outputCodec, progress, }: {
     onChunk: (chunk: EncodedVideoChunk, metadata: EncodedVideoChunkMetadata | null) => Promise<void>;
     onError: (error: DOMException) => void;
     signal: AbortSignal;
     config: VideoEncoderConfig;
     logLevel: LogLevel;
     outputCodec: ConvertMediaVideoCodec;
+    progress: ProgressTracker;
 }) => WebCodecsVideoEncoder;

package/dist/video-encoder.js

@@ -4,11 +4,15 @@ exports.createVideoEncoder = void 0;
 const convert_to_correct_videoframe_1 = require("./convert-to-correct-videoframe");
 const io_synchronizer_1 = require("./io-manager/io-synchronizer");
 const log_1 = require("./log");
-const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, outputCodec, }) => {
+const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, outputCodec, progress, }) => {
     if (signal.aborted) {
         throw new Error('Not creating video encoder, already aborted');
     }
-    const ioSynchronizer = (0, io_synchronizer_1.makeIoSynchronizer)(logLevel, 'Video encoder');
+    const ioSynchronizer = (0, io_synchronizer_1.makeIoSynchronizer)({
+        logLevel,
+        label: 'Video encoder',
+        progress,
+    });
     let outputQueue = Promise.resolve();
     const encoder = new VideoEncoder({
         error(error) {
@@ -57,6 +61,7 @@ const createVideoEncoder = ({ onChunk, onError, signal, config, logLevel, output
             // Firefox stalls if too few frames are passed
             unemitted: 10,
             _unprocessed: 10,
+            minimumProgress: frame.timestamp - 5000000,
         });
         // @ts-expect-error - can have changed in the meanwhile
         if (encoder.state === 'closed') {

package/dist/wav-audio-encoder.d.ts

@@ -0,0 +1,2 @@
+import type { AudioEncoderInit, WebCodecsAudioEncoder } from './audio-encoder';
+export declare const getWaveAudioEncoder: ({ onChunk, signal, }: Pick<AudioEncoderInit, "onChunk" | "signal">) => WebCodecsAudioEncoder;

package/dist/wav-audio-encoder.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWaveAudioEncoder = void 0;
+const getWaveAudioEncoder = ({ onChunk, signal, }) => {
+    return {
+        close: () => {
+            return Promise.resolve();
+        },
+        encodeFrame: (audioData) => {
+            if (signal.aborted) {
+                return Promise.resolve();
+            }
+            const chunk = {
+                timestamp: audioData.timestamp,
+                duration: audioData.duration,
+                type: 'key',
+                copyTo: (destination) => audioData.copyTo(destination, { planeIndex: 0, format: 's16' }),
+                byteLength: audioData.allocationSize({ planeIndex: 0, format: 's16' }),
+            };
+            return onChunk(chunk);
+        },
+        flush: () => Promise.resolve(),
+        waitForFinish: () => Promise.resolve(),
+    };
+};
+exports.getWaveAudioEncoder = getWaveAudioEncoder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/webcodecs",
-  "version": "4.0.231",
+  "version": "4.0.233",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -17,13 +17,14 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
   "dependencies": {
-    "@remotion/media-parser": "4.0.231"
+    "@remotion/media-parser": "4.0.233",
+    "@remotion/example-videos": "4.0.233"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@types/dom-webcodecs": "0.1.11",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.231"
+    "@remotion/eslint-config-internal": "4.0.233"
   },
   "keywords": [],
   "publishConfig": {
@@ -34,6 +35,7 @@
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src",
+    "test": "bun test src",
     "watch": "tsc -w",
     "make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
   }