Filter
- Name
name
- Type
- string
- required
- Description
A string name of one of the supported filters
- Name
options
- Type
- object
- Description
An object used to configure one of the configurable filters
Reading and updating layer options
filter.setFilter({ name: 'brightness', options: { brightness: 200 })
filter.name; // "brightness"
filter.options; // { brightness: 200 } // double brightness
The following filters are currently supported:
Filter name | Configurable |
---|
brightness | ✓️ |
contrast | ✓ |
grayscale | ✓ |
saturation | ✓ |
brightness
options
Option | Type | Description |
---|
brightness | number | A number between 0 and 200 |
contrast
options
Option | Type | Description |
---|
contrast | number | A number between 0 and 1000 |
grayscale
options
Option | Type | Description |
---|
grayscale | number | A number between 0 and 100 |
saturation
options
Option | Type | Description |
---|
saturation | number | A number between 0 and 1000 |
Brightness & Grayscale
await composition.addVideo(
"https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
name: "brightness",
options: { brightness: 200 }
});
await composition.addVideo(
"https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
name: "contrast",
options: { contrast: 1000 }
});
await composition.addVideo(
"https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
name: "grayscale",
options: {
grayscale: 100,
},
});
await composition.addVideo(
"https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
name: "saturation",
options: {
saturation: 1000,
},
});