quickstart_ve_ios.md

iOS Video Editor SDK quickstart

This guide demonstrates how to quickly integrate iOS Video Editor SDK into Flutter project. The main part of an integration and customization is implemented in ios directory of Flutter project using native iOS development process.

Once complete you will be able to launch video editor in your Flutter project.

• Installation
• Resources
• Configuration
• Launch
• Face AR Effects
• Connect audio
• What is next?

Installation

Add iOS Video Editor SDK dependencies to your Podfile

  sdk_version = '1.38.0'

  pod 'BanubaARCloudSDK', sdk_version #optional
  pod 'BanubaVideoEditorSDK', sdk_version
  pod 'BanubaAudioBrowserSDK', sdk_version #optional
  pod 'BanubaSDK', sdk_version #optional
  pod 'BanubaSDKSimple', sdk_version
  pod 'BanubaSDKServicing', sdk_version
  pod 'VideoEditor', sdk_version
  pod 'BanubaUtilities', sdk_version
  pod 'BanubaVideoEditorGallerySDK', sdk_version #optional
  pod 'BanubaLicenseServicingSDK', sdk_version

  pod 'BNBLicenseUtils', sdk_version

  pod 'VEExportSDK', sdk_version
  pod 'VEEffectsSDK', sdk_version
  pod 'VEPlaybackSDK', sdk_version

Resources

Video Editor SDK uses a lot of resources required for running.
Please make sure all these resources are provided in your project.

1. luts to use color filters(Lut).
2. Localizable.strings file with English localization.

Configuration

Create new Swift class VideoEditorModule in your project for initializing and customizing Video Editor SDK features.

Export media

Video Editor supports exporting multiple media files to meet your product requirements.

Create video URL where to export video file.

   let videoURL = manager.temporaryDirectory.appendingPathComponent("myAwesomeVideo.mov")

Next, create list of ExportVideoConfiguration where each configuration is exported media file

     let exportVideoConfigurations: [ExportVideoConfiguration] = [
 +           ExportVideoConfiguration(
                fileURL: videoURL,
                quality: .auto,
                useHEVCCodecIfPossible: true,
                watermarkConfiguration: nil
            )
        ]

and set this list to ExportConfiguration

    let exportConfiguration = ExportConfiguration(
+            videoConfigurations: exportVideoConfigurations,
            isCoverEnabled: true,
            gifSettings: nil
    )

Finally, start video export

+    videoEditorSDK?.export(
            using: exportConfiguration,
            exportProgress: { [weak progressView] progress in progressView?.updateProgressView(with: Float(progress)) }
        ) { [weak self] (error, coverImage) in
            // Export Callback
            DispatchQueue.main.async {
                progressView.dismiss(animated: true) {
                    // if export cancelled just hide progress view
                    if let error, error as NSError == exportCancelledError {
                        return
                    }
                    self?.completeExport(videoUrl: firstFileURL, error: error, coverImage: coverImage?.coverImage)
                }
            }
        }

Every exported media is passed to completeExport method. Process the result and pass it to handler on Flutter side.

Please check out full export sample.

Launch

Flutter platform channels approach is used for communication between Flutter and iOS.

Set up channel message handler in your AppDelegate.swift to listen to calls from Flutter.

    let binaryMessenger = controller as? FlutterBinaryMessenger {
            
    let channel = FlutterMethodChannel(
        name: AppDelegate.channelName,
        binaryMessenger: binaryMessenger
    )
            
     channel.setMethodCallHandler { methodCall, result in
     ... 
     }

Send initVideoEditor message from Flutter to iOS

  await platformChannel.invokeMethod('initVideoEditor', LICENSE_TOKEN);

and add corresponding handler on iOS side to initialize Video Editor.

Initialize Video Editor SDK using license token in VideoEditorModule on iOS.

  let videoEditor = BanubaVideoEditor(
    token: token,
    ...
  )

Finally, once the SDK in initialized you can send startVideoEditor message from Flutter to iOS

  final result = await platformChannel.invokeMethod('startVideoEditor');

and add the corresponding handler on iOS side to start Video Editor.

Important

1. Instance videoEditor is nil if the license token is incorrect. In this case you cannot use photo editor. Check your license token.
2. It is highly recommended to check if the license if active before starting Video Editor.

Face AR Effects

Banuba Face AR SDK product is used on camera and editor screens for applying various AR effects while making video content. Any Face AR effect is a folder that includes a number of files required for Face AR SDK to play this effect.

Note

Make sure preview.png file is included in effect folder. You can use this file as a preview for AR effect.

There are 2 options for adding and managing AR effects:

1. Add bundleEffects folder in the project and place effects there.
2. Use AR Cloud for storing effects on a server.

Connect audio

This is an optional section in integration process. In this section you will know how to connect audio to Video Editor.

Connect Soundstripe

Set false to configEnableCustomAudioBrowser and .soundstripe to AudioBrowserConfig.shared.musicSource config to use audio from Soundstripe in Video Editor.

Important

The feature is not activated by default. Please, contact Banuba representatives to know more about using this feature.

Connect Mubert

Request API key from Mubert.

Important

Banuba is not responsible for providing Mubert API key.

For playing Mubert content in Video Editor Audio Browser perform the following steps:

1. Set false to configEnableCustomAudioBrowser
2. Set Mubert API license and key within the app
3. Set .allSources to AudioBrowserConfig.shared.musicSource config

Connect Banuba Music

Set false to configEnableCustomAudioBrowser and .banubaMusic to AudioBrowserConfig.shared.musicSource config to use audio Banuba Music in Video Editor.

Important

The feature is not activated by default. Please, contact Banuba representatives to know more about using this feature.

Connect External Audio API

Video Editor SDK allows to implement your experience of providing audio tracks for your users - custom Audio Browser.

To check out the simplest experience you can set true to configEnableCustomAudioBrowser
❗ Video Editor SDK can play only files stored on device.

What is next?

This quickstart guide has just covered how to quickly integrate iOS Video Editor SDK, it is considered you managed to start video editor from your Flutter project.

Please check out docs to know more about the SDK and complete full integration.