Adding your Custom LUT / Color Filter to the Video Editor

Video Editor SDK
,
1

You need to first ensure that the LUT file is correctly prepared, and matches the expected format.

Preparation: If you need to know how to do that, please first reference the How to make a LUT / Color Correction image for VE post.

Once you are ready to add the LUT to the Video Editor, please follow the platform specific guides below.


iOS:

  1. Please navigate to the /luts/ directory for your VE iOS project.

  2. Place your LUT png image into the directory with a unique name

  3. Prepare an icon for your LUT according to the ready examples in /assets/ColorEffectsPreview/. Make sure that the .imageset name matches the unique name of your LUT from point 2 but has “_preview” added to it.
    For example: our LUT image in /luts is called “bright.png” - in that case in /ColorEffectsPreview/ the iconset will be called “bright_preview.iconset”

  4. To modify the display name, please configure the Localizable.strings file in your project. This is also applicable for translations. Please make sure that the format matches.
    For example: for our bright.png LUT we want the displayed filter name to be “Bright”. In that case in Localizable.strings we add the following line: “com.banuba.filter.name.bright” = “Bright”;.

Android:

  1. Please navigate to the /luts/ directory for your VE Android project.

  2. Place your LUT png image into the directory with a unique name

  3. Prepare an icon for your LUT file. And place it into drawable-xhdpi with the same unique name as the LUT file itself.
    For example: our LUT image in /luts/ is called “bright.png” - in that case in drawable-xhdpi the icon image will also be called “bright.png”

  4. As LUTs are listed in alphabetical order by default, you can modify this order by first creating a private class called CustomColorFilterOrderProvider and implementing an OrderProvider that will provide a custom order for these color filters.

    Example:

    class CustomColorFilterOrderProvider : OrderProvider {
    override fun provide(): List = listOf(“egypt”, “byers”)
    }


    and then using CustomColorFilterOrderProvider in the VideoEditorModule:


    Example:

    single(named(“colorFilterOrderProvider”)) {
    CustomColorFilterOrderProvider()
    }