Configure Stickers

View on GitHub

VideoEditor SDK supports several configuration options for the StickerToolController allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

Selecting specific sticker categories#

The editor provides a variety of different stickers out of the box. For our example, we only want to use stickers belonging to the "Shapes" category, for instance, to support an annotation use case. To that end, we select shape stickers from the AssetCatalog and assign them to the stickers property of the assetCatalog config object.

`personalStickersEnabled`#

The default configuration does not allow users to add custom stickers. In this example, we enable users to add stickers from the device by setting personalStickersEnabled to true.

`stickerPreviewSize`#

The default size of the sticker preview inside the sticker tool is set to CGSize(width: 44, height: 44). We can change it by setting stickerPreviewSize, in this example we want it to be slightly larger at 60px.

`allowedStickerActions`#

Configuring the StickerOptionsToolController allows changing how users can interact with a given sticker. The actions users can perform are configured via the allowedStickerActions property. In our example, only allow changing the duration, replacing stickers, and changing the color. For a complete list of available sticker actions consult the API docs

`availableColors`#

Configuring the StickerColorToolController allows changing which colors users can use to customize stickers. Here, we assign an array of Color objects containing the UIColors we want to make available.


import UIKit
import VideoEditorSDK

class VideoStickersConfigurationSwift: Example, VideoEditViewControllerDelegate {
  override func invokeExample() {
    // Create a `Video` from a URL to a video in the app bundle.
    let video = Video(url: Bundle.main.url(forResource: "Skater", withExtension: "mp4")!)

    // Create a `Configuration` object.
    let configuration = Configuration { builder in
      // By default the editor provides a variety of different stickers.
      // For this example the editor should only use the "Shapes" sticker
      // category.
      builder.assetCatalog.stickers = AssetCatalog.defaultItems.stickers.filter { $0.identifier == "imgly_sticker_category_shapes" }

      // Configure the `StickerToolController` which lets the user
      // select the sticker.
      builder.configureStickerToolController { options in
        // By default the user is not allowed to add custom stickers.
        // In this example the user can add stickers from the device.
        options.personalStickersEnabled = true

        // By default the preview size of the stickers inside the sticker
        // tool is set to `CGSize(width: 44, height: 44)`.
        // For this example the preview size is set to a bigger size.
        options.stickerPreviewSize = CGSize(width: 60, height: 60)
      }

      // Configure the `StickerOptionsToolController` which lets the user
      // customize a selected sticker when added to the canvas.
      builder.configureStickerOptionsToolController { options in
        // By default the editor enables all available sticker actions.
        // For this example only a small selection of sticker actions
        // should be allowed.
        options.allowedStickerActions = [.duration, .replace, .color]
      }

      // Configure the `StickerColorToolController` which lets the user
      // change the color of the sticker.
      builder.configureStickerColorToolController { options in
        // By default the editor provides a variety of different
        // colors to customize the stickers.
        // For this example only a small selection of colors is enabled
        // per default.
        options.availableColors = [
          Color(color: UIColor.white, colorName: "White"),
          Color(color: UIColor.black, colorName: "Black"),
          Color(color: UIColor.darkGray, colorName: "Dark Gray"),
          Color(color: UIColor.gray, colorName: "Gray")
        ]
      }
    }

    // Create and present the video editor. Make this class the delegate of it to handle export and cancelation.
    let videoEditViewController = VideoEditViewController(videoAsset: video, configuration: configuration)
    videoEditViewController.delegate = self
    videoEditViewController.modalPresentationStyle = .fullScreen
    presentingViewController?.present(videoEditViewController, animated: true, completion: nil)
  }

  // MARK: - VideoEditViewControllerDelegate

  func videoEditViewControllerShouldStart(_ videoEditViewController: VideoEditViewController, task: VideoEditorTask) -> Bool {
    // Implementing this method is optional. You can perform additional validation and interrupt the process by returning `false`.
    true
  }

  func videoEditViewControllerDidFinish(_ videoEditViewController: VideoEditViewController, result: VideoEditorResult) {
    // The user exported a new video successfully and the newly generated video is located at `result.output.url`. Dismissing the editor.
    presentingViewController?.dismiss(animated: true, completion: nil)
  }

  func videoEditViewControllerDidFail(_ videoEditViewController: VideoEditViewController, error: VideoEditorError) {
    // There was an error generating the video.
    print(error.localizedDescription)
    // Dismissing the editor.
    presentingViewController?.dismiss(animated: true, completion: nil)
  }

  func videoEditViewControllerDidCancel(_ videoEditViewController: VideoEditViewController) {
    // The user tapped on the cancel button within the editor. Dismissing the editor.
    presentingViewController?.dismiss(animated: true, completion: nil)
  }
}

Configure Stickers

Selecting specific sticker categories#

personalStickersEnabled#

stickerPreviewSize#

allowedStickerActions#

availableColors#

`personalStickersEnabled`#

`stickerPreviewSize`#

`allowedStickerActions`#

`availableColors`#