arcodange/mediabunny
1
0
Fork 0
mirror of https://github.com/arcodange-org/mediabunny.git synced 2026-09-27 10:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add video crop option

Browse Source
This commit is contained in:
Pablo Cúbico
2025-09-05 07:07:43 -03:00
committed by Pablo Cuadrado
parent 605c258029
commit 904fd8f95e
6 changed files with 323 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/converting-media-files.md
+5 -2
View File
@@ -105,6 +105,7 @@ You can set the `video` property in the conversion options to configure the conv
```ts
type ConversionVideoOptions = {
discard?: boolean;
crop?: { left: number; top: number; width: number; height: number };
width?: number;
height?: number;
fit?: 'fill' | 'contain' | 'cover';
@@ -137,14 +138,16 @@ The provided configuration will apply equally to all video tracks of the input.
If you want to get rid of the video track, use `discard: true`.
### Resizing/rotating video
### Cropping/resizing/rotating video
`crop` can be used to extract a rectangular region from the original video before any rotation or resizing is applied. The rectangle is specified using `left`, `top`, `width` and `height` in the coordinate system of the unrotated frame. Areas outside the input frame are filled with black.
The `width`, `height` and `fit` properties control how the video is resized. If only `width` or `height` is provided, the other value is deduced automatically to preserve the video's original aspect ratio. If both are used, `fit` must be set to control the fitting algorithm:
- `'fill'` will stretch the image to fill the entire box, potentially altering aspect ratio.
- `'contain'` will contain the entire image within the box while preserving aspect ratio. This may lead to letterboxing.
- `'cover'` will scale the image until the entire box is filled, while preserving aspect ratio.
`rotation` rotates the video by the specified number of degrees clockwise. This rotation is applied on top of any rotation metadata in the original input file.
`rotation` rotates the video by the specified number of degrees clockwise. This rotation is applied on top of any rotation metadata in the original input file and happens after cropping.
If `width` or `height` is used in conjunction with `rotation`, they control the post-rotation dimensions.
docs/guide/media-sinks.md
+5 -2
View File
@@ -314,7 +314,7 @@ for await (const sample of keyFrameSamples) {
### `CanvasSink`
While `VideoSampleSink` extracts raw decoded video samples, you can use `CanvasSink` to extract these samples as canvases instead. In doing so, certain operations such as scaling and rotating can also be handled by the sink. The downside is the additional VRAM requirements for the canvases' framebuffers.
While `VideoSampleSink` extracts raw decoded video samples, you can use `CanvasSink` to extract these samples as canvases instead. In doing so, certain operations such as cropping, scaling, and rotating can also be handled by the sink. The downside is the additional VRAM requirements for the canvases' framebuffers.
::: info
This sink yields `HTMLCanvasElement` whenever possible, and falls back to `OffscreenCanvas` otherwise (in Worker contexts, for example).
@@ -330,6 +330,7 @@ const sink = new CanvasSink(videoTrack, options);
Here, `options` has the following type:
```ts
type CanvasSinkOptions = {
crop?: { left: number; top: number; width: number; height: number };
width?: number;
height?: number;
fit?: 'fill' | 'contain' | 'cover';
@@ -337,6 +338,8 @@ type CanvasSinkOptions = {
poolSize?: number;
};
```
- `crop`\
Crops the source frame to the specified rectangle before any rotation or resizing is applied. Portions outside the original frame are filled with black.
- `width`\
The width of the output canvas in pixels. When omitted but `height` is set, the width will be calculated automatically to maintain the original aspect ratio. Otherwise, the width will be set to the original width of the video.
- `height`\
@@ -347,7 +350,7 @@ type CanvasSinkOptions = {
- `'contain'` will contain the entire image within the box while preserving aspect ratio. This may lead to letterboxing.
- `'cover'` will scale the image until the entire box is filled, while preserving aspect ratio.
- `rotation`\
The clockwise rotation by which to rotate the raw video frame. Defaults to the rotation set in the file metadata. Rotation is applied before resizing.
The clockwise rotation by which to rotate the raw video frame. Defaults to the rotation set in the file metadata. Rotation is applied after cropping and before resizing.
- `poolSize`\
See [Canvas pool](#canvas-pool).