@remotion/webcodecs: new rotateAndResizeVideoFrame() API

packages/docs/docs/webcodecs/TableOfContents.tsx

@@ -126,6 +126,10 @@ export const TableOfContents: React.FC = () => {
 					<strong>{'extractFrames()'}</strong>
 					<div>Extract frames from a video at specific timestamps.</div>
 				</TOCItem>
+				<TOCItem link="/docs/webcodecs/rotate-and-resize-video-frame">
+					<strong>{'rotateAndResizeVideoFrame()'}</strong>
+					<div>Rotate and resize a video frame.</div>
+				</TOCItem>
 			</Grid>
 		</div>
 	);

packages/docs/docs/webcodecs/can-copy-audio-track.mdx

@@ -37,7 +37,7 @@ for (const track of audioTracks) {
     inputCodec: track.codecEnum,
     outputContainer: 'webm',
     inputContainer: container,
-    outputAudioCodec: null
+    outputAudioCodec: null,
   }); // bool
 }
 ```
@@ -55,6 +55,7 @@ await convertMedia({
       inputCodec: track.codecEnum,
       outputContainer,
       inputContainer,
+      outputAudioCodec: null,
     });
 
     if (canCopy) {

packages/docs/docs/webcodecs/can-copy-video-track.mdx

@@ -42,7 +42,7 @@ for (const track of videoTracks) {
     inputContainer: container,
     rotationToApply: 0,
     resizeOperation: null,
-    outputVideoCodec: null
+    outputVideoCodec: null,
   }); // boolean
 }
 ```
@@ -62,6 +62,7 @@ await convertMedia({
       inputContainer,
       rotationToApply: 0,
       resizeOperation: null,
+      outputVideoCodec: null,
     });
 
     if (canCopy) {

packages/docs/docs/webcodecs/rotate-and-resize-video-frame.mdx

@@ -0,0 +1,143 @@
+---
+image: /generated/articles-docs-webcodecs-rotate-and-resize-video-frame.png
+id: rotate-and-resize-video-frame
+title: rotateAndResizeVideoFrame()
+slug: /webcodecs/rotate-and-resize-video-frame
+crumb: '@remotion/webcodecs'
+---
+
+# rotateAndResizeVideoFrame()<AvailableFrom v="4.0.316"/>
+
+_Part of the [`@remotion/webcodecs`](/docs/webcodecs) package._
+
+import {LicenseDisclaimer} from './LicenseDisclaimer';
+
+<details>
+  <summary>💼 Important License Disclaimer</summary>
+  <LicenseDisclaimer />
+</details>
+
+Resizes and/or rotates a [`VideoFrame`](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame) object.  
+Returns a new [`VideoFrame`](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame) object with the applied transformations, or the original frame if no transformations are applied.
+
+```tsx twoslash title="Rotating a video frame by 90 degrees"
+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);
+```
+
+```tsx twoslash title="Resizing a video frame by width"
+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);
+```
+
+```tsx twoslash title="Rotating and resizing together"
+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`](https://developer.mozilla.org/en-US/docs/Web/API/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](/docs/webcodecs/resize-a-video#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:
+
+```tsx twoslash title="Proper memory cleanup"
+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
+
+- [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/webcodecs/src/rotate-and-resize-video-frame.ts)

packages/docs/sidebars.js

@@ -689,6 +689,7 @@ module.exports = {
 				'webcodecs/create-audio-decoder',
 				'webcodecs/create-video-decoder',
 				'webcodecs/extract-frames',
+				'webcodecs/rotate-and-resize-video-frame',
 			],
 		},
 		{

packages/docs/src/data/articles.ts

@@ -6180,6 +6180,15 @@ export const articles = [
 		noAi: false,
 		slug: 'webcodecs/resize-a-video',
 	},
+	{
+		id: 'rotate-and-resize-video-frame',
+		title: 'rotateAndResizeVideoFrame()',
+		relativePath: 'docs/webcodecs/rotate-and-resize-video-frame.mdx',
+		compId: 'articles-docs-webcodecs-rotate-and-resize-video-frame',
+		crumb: '@remotion/webcodecs',
+		noAi: false,
+		slug: 'webcodecs/rotate-and-resize-video-frame',
+	},
 	{
 		id: 'rotate-a-video',
 		title: 'Rotate a video',

packages/studio/src/components/Timeline/TimelineVideoInfo.tsx

@@ -1,5 +1,5 @@
 import {hasBeenAborted, WEBCODECS_TIMESCALE} from '@remotion/media-parser';
-import {extractFrames, WebCodecsInternals} from '@remotion/webcodecs';
+import {extractFrames, rotateAndResizeVideoFrame} from '@remotion/webcodecs';
 import React, {useEffect, useRef, useState} from 'react';
 import {useVideoConfig} from 'remotion';
 import type {FrameDatabaseKey} from '../../helpers/frame-database';
@@ -355,7 +355,7 @@ export const TimelineVideoInfo: React.FC<{
 			onFrame: (frame) => {
 				const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
 
-				const transformed = WebCodecsInternals.rotateAndResizeVideoFrame({
+				const transformed = rotateAndResizeVideoFrame({
 					frame,
 					resizeOperation: {
 						mode: 'scale',

packages/webcodecs/src/index.ts

@@ -45,6 +45,7 @@ export type {
 	VideoOperation,
 } from './on-video-track-handler';
 export type {ResizeOperation} from './resizing/mode';
+export {rotateAndResizeVideoFrame} from './rotate-and-resize-video-frame';
 export {createVideoEncoder} from './video-encoder';
 export type {WebCodecsVideoEncoder} from './video-encoder';
 export {webcodecsController} from './webcodecs-controller';

packages/webcodecs/src/rotate-and-resize-video-frame.ts

@@ -11,13 +11,13 @@ export const normalizeVideoRotation = (rotation: number) => {
 export const rotateAndResizeVideoFrame = ({
 	frame,
 	rotation,
-	needsToBeMultipleOfTwo,
+	needsToBeMultipleOfTwo = false,
 	resizeOperation,
 }: {
 	frame: VideoFrame;
 	rotation: number;
-	needsToBeMultipleOfTwo: boolean;
 	resizeOperation: ResizeOperation | null;
+	needsToBeMultipleOfTwo?: boolean;
 }) => {
 	const normalized = ((rotation % 360) + 360) % 360;