Skip to main content
warning

我们正在逐步淘汰 Remotion WebCodecs，并转向 Mediabunny！

rotateAndResizeVideoFrame()v4.0.316

属于 @remotion/webcodecs 软件包的一部分.

🌐 Part of the @remotion/webcodecs package.

💼 重要许可免责声明
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.

调整和/或旋转 VideoFrame 对象。 返回应用了变换的新 VideoFrame 对象，如果没有应用任何变换，则返回原始帧。

🌐 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
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
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
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​

要转换的VideoFrame对象。

🌐 A VideoFrame object to be transformed.

rotation​

旋转角度，以度为单位。仅支持90度的倍数（0、90、180、270等）。

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

resizeOperation​

要对帧应用的调整大小操作，如果不需要调整大小则为 null。 参见：调整大小模式 了解可用选项。

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

needsToBeMultipleOfTwo?​

是否希望得到的尺寸是2的倍数。默认值：false。 如果编码成像 H.264 这样的编解码器，通常需要这样做。 如果为 true，尺寸将向下取整到最接近的偶数。

🌐 Whether the resulting dimensions should be multiples of 2. Default: false.
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:

  • 未指定旋转（0°）和调整大小操作
  • 不旋转（0°）且调整大小操作会得到相同的尺寸

否则，它会返回一个 新的 VideoFrame 对象：

🌐 Otherwise, it returns a new VideoFrame object:

  • 当应用旋转（90°、180°、270°等）时
  • 调整大小时更改尺寸
  • 当同时应用旋转和调整大小时

附加行为备注：

🌐 Additional behavior notes:

  • 先应用旋转，然后调整大小
  • 对于90°和270°的旋转，宽度和高度会互换
  • 该函数使用 OffscreenCanvas 进行转换来创建一个新的 VideoFrame

内存管理​

🌐 Memory Management

重要：你有责任关闭 VideoFrame 对象以防止内存泄漏。由于此函数可能返回原始帧或新帧，因此在关闭原始帧之前，你应检查是否创建了新帧：

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

Last updated on