Skip to main content

rotateAndResizeVideoFrame()v4.0.316

Part of the @remotion/webcodecs package.

💼 Important License Disclaimer
This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of @remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.

Resizes and/or rotates a VideoFrame object.
Returns a new VideoFrame object with the applied transformations, or the original frame if no transformations are applied.

Rotating a video frame by 90 degrees
tsx
import {rotateAndResizeVideoFrame} from '@remotion/webcodecs';
 
// Assume you have a VideoFrame object
declare const frame: VideoFrame;
 
const rotatedFrame = rotateAndResizeVideoFrame({
  frame,
  rotation: 90,
  resizeOperation: null,
});
 
console.log('Original dimensions:', frame.displayWidth, 'x', frame.displayHeight);
console.log('Rotated dimensions:', rotatedFrame.displayWidth, 'x', rotatedFrame.displayHeight);
Resizing a video frame by width
tsx
import {rotateAndResizeVideoFrame} from '@remotion/webcodecs';
 
// Assume you have a VideoFrame object
declare const frame: VideoFrame;
 
const resizedFrame = rotateAndResizeVideoFrame({
  frame,
  rotation: 0,
  resizeOperation: {
    mode: 'width',
    width: 640,
  },
});
 
console.log('Resized frame width:', resizedFrame.displayWidth);
Rotating and resizing together
tsx
import {rotateAndResizeVideoFrame} from '@remotion/webcodecs';
 
// Assume you have a VideoFrame object
declare const frame: VideoFrame;
 
const transformedFrame = rotateAndResizeVideoFrame({
  frame,
  rotation: 180,
  resizeOperation: {
    mode: 'height',
    height: 480,
  },
  needsToBeMultipleOfTwo: true,
});

API​

frame​

A VideoFrame object to be transformed.

rotation​

The rotation angle in degrees. Only multiples of 90 degrees are supported (0, 90, 180, 270, etc.).

resizeOperation​

A resize operation to apply to the frame, or null if no resizing is needed.
See: Resize modes for available options.

needsToBeMultipleOfTwo?​

optional, default: false

Whether the resulting dimensions should be multiples of 2.
This is often required if encoding to a codec like H.264.
If true, the dimensions will be rounded down to the nearest even number.

Behavior​

The function returns the original frame unchanged in these cases:

  • No rotation (0°) and no resize operation is specified
  • No rotation (0°) and resize operation results in the same dimensions

Otherwise, it returns a new VideoFrame object:

  • When rotation is applied (90°, 180°, 270°, etc.)
  • When resizing changes the dimensions
  • When both rotation and resizing are applied

Additional behavior notes:

  • Rotation is applied first, then resizing
  • For 90° and 270° rotations, the width and height are swapped
  • The function creates a new VideoFrame using an OffscreenCanvas for the transformation

Memory Management​

Important: You are responsible for closing VideoFrame objects to prevent memory leaks. Since this function may return either the original frame or a new frame, you should check if a new frame was created before closing the original:

Proper memory cleanup
tsx
import {rotateAndResizeVideoFrame} from '@remotion/webcodecs';
 
// Assume you have a VideoFrame object
declare const originalFrame: VideoFrame;
 
const transformedFrame = rotateAndResizeVideoFrame({
  frame: originalFrame,
  rotation: 90,
  resizeOperation: null,
});
 
// Only close the original frame if a new one was created
if (transformedFrame !== originalFrame) {
  originalFrame.close();
}
 
// Remember to also close the transformed frame when you're done with it
// transformedFrame.close();

See also​