Filter

Layer options

  • 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

Supported filters

The following filters are currently supported:

Filter nameConfigurable
brightness✓️
contrast
grayscale
saturation

Filter options

brightness options

OptionTypeDescription
brightnessnumberA number between 0 and 200

contrast options

OptionTypeDescription
contrastnumberA number between 0 and 1000

grayscale options

OptionTypeDescription
grayscalenumberA number between 0 and 100

saturation options

OptionTypeDescription
saturationnumberA number between 0 and 1000

Examples

Brightness & Grayscale

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({ 
  name: "brightness", 
  options: { brightness: 200 } 
});

Contrast

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({ 
  name: "contrast", 
  options: { contrast: 1000 } 
});

Saturation

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
  name: "grayscale",
  options: {
    grayscale: 100,
  },
});

Saturation

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
  name: "saturation",
  options: {
    saturation: 1000,
  },
});