@remotion/webcodecs 4.0.240 → 4.0.242

package/dist/index.d.ts

@@ -14,12 +14,22 @@ export { getDefaultAudioCodec } from './get-default-audio-codec';
 export { getDefaultVideoCodec } from './get-default-video-codec';
 export { AudioOperation, ConvertMediaOnAudioTrackHandler, } from './on-audio-track-handler';
 export { ConvertMediaOnVideoTrackHandler, VideoOperation, } from './on-video-track-handler';
+export type { ResizeOperation } from './resizing/mode';
 export { createVideoDecoder, WebCodecsVideoDecoder } from './video-decoder';
 export { createVideoEncoder, WebCodecsVideoEncoder } from './video-encoder';
 export declare const WebCodecsInternals: {
-    rotateVideoFrame: ({ frame, rotation, }: {
+    rotateAndResizeVideoFrame: ({ frame, rotation, videoCodec, resizeOperation, }: {
         frame: VideoFrame;
         rotation: number;
+        videoCodec: import("./get-available-video-codecs").ConvertMediaVideoCodec;
+        resizeOperation: import("./resizing/mode").ResizeOperation | null;
     }) => VideoFrame;
     normalizeVideoRotation: (rotation: number) => number;
+    calculateNewDimensionsFromDimensions: ({ width, height, rotation, resizeOperation, videoCodec, }: {
+        width: number;
+        height: number;
+        rotation: number;
+        resizeOperation: import("./resizing/mode").ResizeOperation | null;
+        videoCodec: import("./get-available-video-codecs").ConvertMediaVideoCodec | import("@remotion/media-parser").MediaParserVideoCodec;
+    }) => import("./resizing/mode").Dimensions;
 };

package/dist/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebCodecsInternals = exports.createVideoEncoder = exports.createVideoDecoder = exports.getDefaultVideoCodec = exports.getDefaultAudioCodec = exports.getAvailableVideoCodecs = exports.getAvailableContainers = exports.getAvailableAudioCodecs = exports.defaultOnVideoTrackHandler = exports.defaultOnAudioTrackHandler = exports.convertMedia = exports.canReencodeVideoTrack = exports.canReencodeAudioTrack = exports.canCopyVideoTrack = exports.canCopyAudioTrack = exports.createAudioEncoder = exports.createAudioDecoder = void 0;
-const rotate_video_frame_1 = require("./rotate-video-frame");
+const rotate_and_resize_video_frame_1 = require("./rotate-and-resize-video-frame");
+const rotation_1 = require("./rotation");
 const set_remotion_imported_1 = require("./set-remotion-imported");
 var audio_decoder_1 = require("./audio-decoder");
 Object.defineProperty(exports, "createAudioDecoder", { enumerable: true, get: function () { return audio_decoder_1.createAudioDecoder; } });
@@ -36,7 +37,8 @@ Object.defineProperty(exports, "createVideoDecoder", { enumerable: true, get: fu
 var video_encoder_1 = require("./video-encoder");
 Object.defineProperty(exports, "createVideoEncoder", { enumerable: true, get: function () { return video_encoder_1.createVideoEncoder; } });
 exports.WebCodecsInternals = {
-    rotateVideoFrame: rotate_video_frame_1.rotateVideoFrame,
-    normalizeVideoRotation: rotate_video_frame_1.normalizeVideoRotation,
+    rotateAndResizeVideoFrame: rotate_and_resize_video_frame_1.rotateAndResizeVideoFrame,
+    normalizeVideoRotation: rotate_and_resize_video_frame_1.normalizeVideoRotation,
+    calculateNewDimensionsFromDimensions: rotation_1.calculateNewDimensionsFromRotateAndScale,
 };
 (0, set_remotion_imported_1.setRemotionImported)();

package/dist/io-manager/io-synchronizer.js

@@ -69,14 +69,14 @@ const makeIoSynchronizer = ({ logLevel, label, progress, }) => {
         return promise;
     };
     const waitFor = async ({ unprocessed, unemitted, minimumProgress, signal, }) => {
-        const { timeoutPromise, clear } = (0, make_timeout_promise_1.makeTimeoutPromise)([
-            `Waited too long for ${label}:`,
+        const { timeoutPromise, clear } = (0, make_timeout_promise_1.makeTimeoutPromise)(() => [
+            `Waited too long for ${label} to finish:`,
             `${getUnemittedItems()} unemitted items`,
-            `${getUnprocessed()} unprocessed items`,
-            `minimum progress ${minimumProgress}`,
+            `${getUnprocessed()} unprocessed items: ${JSON.stringify(_unprocessed)}`,
             `smallest progress: ${progress.getSmallestProgress()}`,
             `inputs: ${JSON.stringify(inputs)}`,
             `last output: ${lastOutput}`,
+            `wanted: ${unemitted} unemitted items, ${unprocessed} unprocessed items, minimum progress ${minimumProgress}`,
         ].join('\n'), 10000);
         signal.addEventListener('abort', clear);
         await Promise.race([

package/dist/io-manager/make-timeout-promise.d.ts

@@ -1,4 +1,4 @@
-export declare const makeTimeoutPromise: (label: string, ms: number) => {
+export declare const makeTimeoutPromise: (label: () => string, ms: number) => {
     timeoutPromise: Promise<void>;
     clear: () => void;
 };

package/dist/io-manager/make-timeout-promise.js

@@ -5,7 +5,7 @@ const media_parser_1 = require("@remotion/media-parser");
 const makeTimeoutPromise = (label, ms) => {
     const { promise, reject, resolve } = media_parser_1.MediaParserInternals.withResolvers();
     const timeout = setTimeout(() => {
-        reject(new Error(`${label} (timed out after ${ms}ms)`));
+        reject(new Error(`${label()} (timed out after ${ms}ms)`));
     }, ms);
     return {
         timeoutPromise: promise,

package/dist/on-frame.d.ts

@@ -1,12 +1,14 @@
 import type { VideoTrack } from '@remotion/media-parser';
 import type { ConvertMediaOnVideoFrame } from './convert-media';
 import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
+import type { ResizeOperation } from './resizing/mode';
 import type { WebCodecsVideoEncoder } from './video-encoder';
-export declare const onFrame: ({ frame: unrotatedFrame, onVideoFrame, videoEncoder, track, outputCodec, rotation, }: {
+export declare const onFrame: ({ frame: unrotatedFrame, onVideoFrame, videoEncoder, track, outputCodec, rotation, resizeOperation, }: {
     frame: VideoFrame;
     onVideoFrame: ConvertMediaOnVideoFrame | null;
     videoEncoder: WebCodecsVideoEncoder;
     track: VideoTrack;
     outputCodec: ConvertMediaVideoCodec;
     rotation: number;
+    resizeOperation: ResizeOperation | null;
 }) => Promise<void>;

package/dist/on-frame.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.onFrame = void 0;
 const browser_quirks_1 = require("./browser-quirks");
 const convert_to_correct_videoframe_1 = require("./convert-to-correct-videoframe");
-const rotate_video_frame_1 = require("./rotate-video-frame");
-const onFrame = async ({ frame: unrotatedFrame, onVideoFrame, videoEncoder, track, outputCodec, rotation, }) => {
+const rotate_and_resize_video_frame_1 = require("./rotate-and-resize-video-frame");
+const onFrame = async ({ frame: unrotatedFrame, onVideoFrame, videoEncoder, track, outputCodec, rotation, resizeOperation, }) => {
     var _a, _b;
-    const rotated = (0, rotate_video_frame_1.rotateVideoFrame)({
+    const rotated = (0, rotate_and_resize_video_frame_1.rotateAndResizeVideoFrame)({
         rotation,
         frame: unrotatedFrame,
+        resizeOperation,
+        videoCodec: outputCodec,
     });
     if (unrotatedFrame !== rotated) {
         unrotatedFrame.close();

package/dist/on-video-track-handler.d.ts

@@ -1,10 +1,12 @@
 import type { LogLevel, ParseMediaContainer, VideoTrack } from '@remotion/media-parser';
 import type { ConvertMediaContainer } from './get-available-containers';
 import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
+import type { ResizeOperation } from './resizing/mode';
 export type VideoOperation = {
     type: 'reencode';
     videoCodec: ConvertMediaVideoCodec;
     rotate?: number;
+    resize?: ResizeOperation | null;
 } | {
     type: 'copy';
 } | {
@@ -18,6 +20,7 @@ export type ConvertMediaOnVideoTrackHandler = (options: {
     logLevel: LogLevel;
     outputContainer: ConvertMediaContainer;
     rotate: number;
+    resizeOperation: ResizeOperation | null;
     inputContainer: ParseMediaContainer;
     canCopyTrack: boolean;
 }) => VideoOperation | Promise<VideoOperation>;

package/dist/on-video-track.d.ts

@@ -4,8 +4,9 @@ import Error from './error-cause';
 import type { ConvertMediaContainer } from './get-available-containers';
 import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
 import type { ConvertMediaOnVideoTrackHandler } from './on-video-track-handler';
+import type { ResizeOperation } from './resizing/mode';
 import type { ConvertMediaProgressFn } from './throttled-state-update';
-export declare const makeVideoTrackHandler: ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, outputContainer, rotate, progress, }: {
+export declare const makeVideoTrackHandler: ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, outputContainer, rotate, progress, resizeOperation, }: {
     state: MediaFn;
     onVideoFrame: null | ConvertMediaOnVideoFrame;
     onMediaStateUpdate: null | ConvertMediaProgressFn;
@@ -17,4 +18,5 @@ export declare const makeVideoTrackHandler: ({ state, onVideoFrame, onMediaState
     outputContainer: ConvertMediaContainer;
     rotate: number;
     progress: ProgressTracker;
+    resizeOperation: ResizeOperation | null;
 }) => OnVideoTrack;

package/dist/on-video-track.js

@@ -17,17 +17,17 @@ 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, outputContainer, rotate, progress, }) => async ({ track, container: inputContainer }) => {
-    var _a;
+const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortConversion, controller, defaultVideoCodec, onVideoTrack, logLevel, outputContainer, rotate, progress, resizeOperation, }) => async ({ track, container: inputContainer }) => {
+    var _a, _b;
     if (controller.signal.aborted) {
         throw new error_cause_1.default('Aborted');
     }
     const canCopyTrack = (0, can_copy_video_track_1.canCopyVideoTrack)({
-        inputCodec: track.codecWithoutConfig,
         inputContainer,
-        inputRotation: track.rotation,
         outputContainer,
         rotationToApply: rotate,
+        inputTrack: track,
+        resizeOperation,
     });
     const videoOperation = await (onVideoTrack !== null && onVideoTrack !== void 0 ? onVideoTrack : default_on_video_track_handler_1.defaultOnVideoTrackHandler)({
         track,
@@ -37,6 +37,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
         rotate,
         inputContainer,
         canCopyTrack,
+        resizeOperation,
     });
     if (videoOperation.type === 'drop') {
         return null;
@@ -74,10 +75,12 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
         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 : rotate) - track.rotation;
-    const { height: newHeight, width: newWidth } = (0, rotation_1.calculateNewDimensionsFromDimensions)({
+    const { height: newHeight, width: newWidth } = (0, rotation_1.calculateNewDimensionsFromRotateAndScale)({
         width: track.codedWidth,
         height: track.codedHeight,
         rotation,
+        videoCodec: videoOperation.videoCodec,
+        resizeOperation: (_b = videoOperation.resize) !== null && _b !== void 0 ? _b : null,
     });
     const videoEncoderConfig = await (0, video_encoder_config_1.getVideoEncoderConfig)({
         codec: videoOperation.videoCodec,
@@ -134,6 +137,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
     const videoDecoder = (0, video_decoder_1.createVideoDecoder)({
         config: videoDecoderConfig,
         onFrame: async (frame) => {
+            var _a;
             await (0, on_frame_1.onFrame)({
                 frame,
                 track,
@@ -141,6 +145,7 @@ const makeVideoTrackHandler = ({ state, onVideoFrame, onMediaStateUpdate, abortC
                 onVideoFrame,
                 outputCodec: videoOperation.videoCodec,
                 rotation,
+                resizeOperation: (_a = videoOperation.resize) !== null && _a !== void 0 ? _a : null,
             });
         },
         onError: (err) => {

package/dist/resizing/calculate-new-size.d.ts

@@ -0,0 +1,8 @@
+import type { MediaParserVideoCodec } from '@remotion/media-parser';
+import type { ConvertMediaVideoCodec } from '../get-available-video-codecs';
+import type { Dimensions, ResizeOperation } from './mode';
+export declare const calculateNewSizeAfterResizing: ({ dimensions, resizeOperation, videoCodec, }: {
+    dimensions: Dimensions;
+    resizeOperation: ResizeOperation | null;
+    videoCodec: ConvertMediaVideoCodec | MediaParserVideoCodec;
+}) => Dimensions;

package/dist/resizing/calculate-new-size.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateNewSizeAfterResizing = void 0;
+const ensureMultipleOfTwo = ({ dimensions, needsToBeMultipleOfTwo, }) => {
+    if (!needsToBeMultipleOfTwo) {
+        return dimensions;
+    }
+    return {
+        width: Math.floor(dimensions.width / 2) * 2,
+        height: Math.floor(dimensions.height / 2) * 2,
+    };
+};
+const calculateNewSizeAfterResizing = ({ dimensions, resizeOperation, videoCodec, }) => {
+    const needsToBeMultipleOfTwo = videoCodec === 'h264';
+    if (resizeOperation === null) {
+        return ensureMultipleOfTwo({
+            dimensions,
+            needsToBeMultipleOfTwo,
+        });
+    }
+    if (resizeOperation.mode === 'width') {
+        return ensureMultipleOfTwo({
+            dimensions: {
+                width: resizeOperation.width,
+                height: Math.round((resizeOperation.width / dimensions.width) * dimensions.height),
+            },
+            needsToBeMultipleOfTwo,
+        });
+    }
+    if (resizeOperation.mode === 'height') {
+        return ensureMultipleOfTwo({
+            dimensions: {
+                width: Math.round((resizeOperation.height / dimensions.height) * dimensions.width),
+                height: resizeOperation.height,
+            },
+            needsToBeMultipleOfTwo,
+        });
+    }
+    if (resizeOperation.mode === 'max-height') {
+        const height = Math.min(dimensions.height, resizeOperation.maxHeight);
+        return ensureMultipleOfTwo({
+            dimensions: {
+                width: Math.round((height / dimensions.height) * dimensions.width),
+                height,
+            },
+            needsToBeMultipleOfTwo,
+        });
+    }
+    if (resizeOperation.mode === 'max-width') {
+        const width = Math.min(dimensions.width, resizeOperation.maxWidth);
+        return ensureMultipleOfTwo({
+            dimensions: {
+                width,
+                height: Math.round((width / dimensions.width) * dimensions.height),
+            },
+            needsToBeMultipleOfTwo,
+        });
+    }
+    if (resizeOperation.mode === 'max-height-width') {
+        const height = Math.min(dimensions.height, resizeOperation.maxHeight);
+        const width = Math.min(dimensions.width, resizeOperation.maxWidth);
+        const scale = Math.min(width / dimensions.width, height / dimensions.height);
+        const actualWidth = Math.round(dimensions.width * scale);
+        const actualHeight = Math.round(dimensions.height * scale);
+        return ensureMultipleOfTwo({
+            dimensions: {
+                height: actualHeight,
+                width: actualWidth,
+            },
+            needsToBeMultipleOfTwo,
+        });
+    }
+    if (resizeOperation.mode === 'scale') {
+        if (resizeOperation.scale <= 0) {
+            throw new Error('Scale must be greater than 0');
+        }
+        const width = Math.round(dimensions.width * resizeOperation.scale);
+        const height = Math.round(dimensions.height * resizeOperation.scale);
+        return ensureMultipleOfTwo({
+            dimensions: {
+                width,
+                height,
+            },
+            needsToBeMultipleOfTwo,
+        });
+    }
+    throw new Error('Invalid resizing mode ' + resizeOperation);
+};
+exports.calculateNewSizeAfterResizing = calculateNewSizeAfterResizing;

package/dist/resizing/mode.d.ts

@@ -0,0 +1,24 @@
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type ResizeOperation = {
+    mode: 'width';
+    width: number;
+} | {
+    mode: 'height';
+    height: number;
+} | {
+    mode: 'max-height';
+    maxHeight: number;
+} | {
+    mode: 'max-width';
+    maxWidth: number;
+} | {
+    mode: 'max-height-width';
+    maxHeight: number;
+    maxWidth: number;
+} | {
+    mode: 'scale';
+    scale: number;
+};

package/dist/resizing/mode.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/resizing/resizing.d.ts

@@ -0,0 +1,13 @@
+export type ResizingMode = {
+    type: 'width';
+    width: number;
+} | {
+    type: 'height';
+    height: number;
+} | {
+    type: 'max-height';
+    height: number;
+} | {
+    type: 'max-width';
+    width: number;
+};

package/dist/resizing/resizing.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/resizing.d.ts

@@ -0,0 +1,13 @@
+export type ResizingMode = {
+    type: 'width';
+    width: number;
+} | {
+    type: 'height';
+    height: number;
+} | {
+    type: 'max-height';
+    height: number;
+} | {
+    type: 'max-width';
+    width: number;
+};

package/dist/resizing.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
+import type { ResizeOperation } from './resizing/mode';
+export declare const normalizeVideoRotation: (rotation: number) => number;
+export declare const rotateAndResizeVideoFrame: ({ frame, rotation, videoCodec, resizeOperation, }: {
+    frame: VideoFrame;
+    rotation: number;
+    videoCodec: ConvertMediaVideoCodec;
+    resizeOperation: ResizeOperation | null;
+}) => VideoFrame;

package/dist/rotate-and-resize-video-frame.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotateAndResizeVideoFrame = exports.normalizeVideoRotation = void 0;
+const rotation_1 = require("./rotation");
+const normalizeVideoRotation = (rotation) => {
+    return ((rotation % 360) + 360) % 360;
+};
+exports.normalizeVideoRotation = normalizeVideoRotation;
+const rotateAndResizeVideoFrame = ({ frame, rotation, videoCodec, resizeOperation, }) => {
+    var _a;
+    const normalized = ((rotation % 360) + 360) % 360;
+    // No resize, no rotation
+    if (normalized === 0 && resizeOperation === null) {
+        return frame;
+    }
+    if (normalized % 90 !== 0) {
+        throw new Error('Only 90 degree rotations are supported');
+    }
+    const { height, width } = (0, rotation_1.calculateNewDimensionsFromRotateAndScale)({
+        height: frame.displayHeight,
+        width: frame.displayWidth,
+        rotation,
+        videoCodec,
+        resizeOperation,
+    });
+    // No rotation, and resize turned out to be same dimensions
+    if (normalized === 0 &&
+        height === frame.displayHeight &&
+        width === frame.displayWidth) {
+        return frame;
+    }
+    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);
+    }
+    if (normalized !== 0) {
+        ctx.rotate(normalized * (Math.PI / 180));
+    }
+    if (frame.displayHeight !== height || frame.displayWidth !== width) {
+        const dimensionsAfterRotate = (0, rotation_1.calculateNewDimensionsFromRotate)({
+            height: frame.displayHeight,
+            rotation,
+            width: frame.displayWidth,
+        });
+        ctx.scale(width / dimensionsAfterRotate.width, height / dimensionsAfterRotate.height);
+    }
+    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.rotateAndResizeVideoFrame = rotateAndResizeVideoFrame;

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

@@ -1,5 +1,9 @@
+import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
+import type { ResizingMode } from './resizing/mode';
 export declare const normalizeVideoRotation: (rotation: number) => number;
-export declare const rotateVideoFrame: ({ frame, rotation, }: {
+export declare const rotateAndResizeVideoFrame: ({ frame, rotation, videoCodec, resizingMode, }: {
     frame: VideoFrame;
     rotation: number;
+    videoCodec: ConvertMediaVideoCodec;
+    resizingMode: ResizingMode | null;
 }) => VideoFrame;

package/dist/rotate-video-frame.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.rotateVideoFrame = exports.normalizeVideoRotation = void 0;
+exports.rotateAndResizeVideoFrame = exports.normalizeVideoRotation = void 0;
 const rotation_1 = require("./rotation");
 const normalizeVideoRotation = (rotation) => {
     return ((rotation % 360) + 360) % 360;
 };
 exports.normalizeVideoRotation = normalizeVideoRotation;
-const rotateVideoFrame = ({ frame, rotation, }) => {
+const rotateAndResizeVideoFrame = ({ frame, rotation, videoCodec, resizingMode, }) => {
     var _a;
     const normalized = ((rotation % 360) + 360) % 360;
-    if (normalized % 360 === 0) {
+    if (normalized % 360 === 0 && resizingMode === null) {
         return frame;
     }
     if (normalized % 90 !== 0) {
@@ -19,6 +19,8 @@ const rotateVideoFrame = ({ frame, rotation, }) => {
         height: frame.displayHeight,
         width: frame.displayWidth,
         rotation,
+        videoCodec,
+        resizingMode,
     });
     const canvas = new OffscreenCanvas(width, height);
     const ctx = canvas.getContext('2d');
@@ -37,6 +39,9 @@ const rotateVideoFrame = ({ frame, rotation, }) => {
         ctx.translate(0, height);
     }
     ctx.rotate(normalized * (Math.PI / 180));
+    if (frame.displayHeight !== height || frame.displayWidth !== width) {
+        ctx.scale(width / frame.displayWidth, height / frame.displayHeight);
+    }
     ctx.drawImage(frame, 0, 0);
     return new VideoFrame(canvas, {
         displayHeight: height,
@@ -45,4 +50,4 @@ const rotateVideoFrame = ({ frame, rotation, }) => {
         timestamp: frame.timestamp,
     });
 };
-exports.rotateVideoFrame = rotateVideoFrame;
+exports.rotateAndResizeVideoFrame = rotateAndResizeVideoFrame;

package/dist/rotation.d.ts

@@ -1,8 +1,16 @@
-export declare const calculateNewDimensionsFromDimensions: ({ width, height, rotation, }: {
-    width: number;
-    height: number;
+import type { Dimensions, MediaParserVideoCodec } from '@remotion/media-parser';
+import type { ConvertMediaVideoCodec } from './get-available-video-codecs';
+import type { ResizeOperation } from './resizing/mode';
+export declare const calculateNewDimensionsFromRotate: ({ height, width, rotation, }: Dimensions & {
     rotation: number;
 }) => {
     height: number;
     width: number;
 };
+export declare const calculateNewDimensionsFromRotateAndScale: ({ width, height, rotation, resizeOperation, videoCodec, }: {
+    width: number;
+    height: number;
+    rotation: number;
+    resizeOperation: ResizeOperation | null;
+    videoCodec: ConvertMediaVideoCodec | MediaParserVideoCodec;
+}) => import("./resizing/mode").Dimensions;

package/dist/rotation.js

@@ -1,10 +1,29 @@
 "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;
+exports.calculateNewDimensionsFromRotateAndScale = exports.calculateNewDimensionsFromRotate = void 0;
+const calculate_new_size_1 = require("./resizing/calculate-new-size");
+const rotate_and_resize_video_frame_1 = require("./rotate-and-resize-video-frame");
+const calculateNewDimensionsFromRotate = ({ height, width, rotation, }) => {
+    const normalized = (0, rotate_and_resize_video_frame_1.normalizeVideoRotation)(rotation);
+    const switchDimensions = normalized % 90 === 0 && normalized % 180 !== 0;
     const newHeight = switchDimensions ? width : height;
     const newWidth = switchDimensions ? height : width;
-    return { height: newHeight, width: newWidth };
+    return {
+        height: newHeight,
+        width: newWidth,
+    };
 };
-exports.calculateNewDimensionsFromDimensions = calculateNewDimensionsFromDimensions;
+exports.calculateNewDimensionsFromRotate = calculateNewDimensionsFromRotate;
+const calculateNewDimensionsFromRotateAndScale = ({ width, height, rotation, resizeOperation, videoCodec, }) => {
+    const { height: newHeight, width: newWidth } = (0, exports.calculateNewDimensionsFromRotate)({
+        height,
+        rotation,
+        width,
+    });
+    return (0, calculate_new_size_1.calculateNewSizeAfterResizing)({
+        dimensions: { height: newHeight, width: newWidth },
+        resizeOperation,
+        videoCodec,
+    });
+};
+exports.calculateNewDimensionsFromRotateAndScale = calculateNewDimensionsFromRotateAndScale;

package/dist/scaling.d.ts

@@ -0,0 +1,13 @@
+export type ScalingMode = {
+    type: 'width';
+    width: number;
+} | {
+    type: 'height';
+    height: number;
+} | {
+    type: 'max-height';
+    height: number;
+} | {
+    type: 'max-width';
+    width: number;
+};

package/dist/scaling.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/send-telemetry-event.d.ts

@@ -0,0 +1,4 @@
+export declare const sendUsageEvent: ({ apiKey, succeeded, }: {
+    apiKey: string | null;
+    succeeded: boolean;
+}) => Promise<void>;

package/dist/send-telemetry-event.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendUsageEvent = void 0;
+const licensing_1 = require("@remotion/licensing");
+const sendUsageEvent = async ({ apiKey, succeeded, }) => {
+    var _a;
+    const host = typeof window === 'undefined'
+        ? null
+        : typeof window.location === 'undefined'
+            ? null
+            : ((_a = window.location.origin) !== null && _a !== void 0 ? _a : null);
+    if (host === null) {
+        return;
+    }
+    await (0, licensing_1.registerUsageEvent)({
+        apiKey,
+        event: 'webcodec-conversion',
+        host,
+        succeeded,
+    });
+};
+exports.sendUsageEvent = sendUsageEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/webcodecs",
-  "version": "4.0.240",
+  "version": "4.0.242",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -17,14 +17,15 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
   "dependencies": {
-    "@remotion/media-parser": "4.0.240"
+    "@remotion/licensing": "4.0.242",
+    "@remotion/media-parser": "4.0.242"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@types/dom-webcodecs": "0.1.11",
     "eslint": "9.14.0",
-    "@remotion/example-videos": "4.0.240",
-    "@remotion/eslint-config-internal": "4.0.240"
+    "@remotion/example-videos": "4.0.242",
+    "@remotion/eslint-config-internal": "4.0.242"
   },
   "keywords": [],
   "publishConfig": {