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.
Add iOS Video Editor SDK dependencies to your Podfile
sdk_version = '1.39.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
Video Editor SDK uses a lot of resources required for running.
Please make sure all these resources are provided in your project.
- luts to use color filters(Lut).
- Localizable.strings file with English localization.
Create new Swift class VideoEditorModule in your project for initializing and customizing Video Editor SDK features.
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.
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
- Instance
videoEditor
isnil
if the license token is incorrect. In this case you cannot use photo editor. Check your license token. - It is highly recommended to check if the license if active before starting Video Editor.
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:
- Add
bundleEffects
folder in the project and place effects there. - Use AR Cloud for storing effects on a server.
This is an optional section in integration process. In this section you will know how to connect audio to Video Editor.
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.
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:
- Set
false
to configEnableCustomAudioBrowser - Set Mubert API license and key within the app
- Set
.allSources
toAudioBrowserConfig.shared.musicSource
config
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.
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.
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.