Banuba AI Video Editor SDK allows you to quickly integrate short video functionality into your mobile app. On this page, we will explain how to do so on iOS.
- Requirements
- Framework dependencies
- Dependencies
- SDKs size
- Starting a free trial
- Supported media formats
- Token
- Connecting with AR cloud
- What can you customize?
- Face AR
- Integration
- Customization
- Analytics
- FAQ
- Third party libraries
This is what you need to run the AI Video Editor SDK
- iPhone devices 6+
- Swift 5+
- Xcode 13.0+
- iOS 12.0+ Unfortunately, It isn't optimized for iPads.
Our SDK contains dependencies on native libraries, as well as third-party ones. Below are listed our native frameworks dependencies:
- Foundation
- AV Foundation
- UI Kit
- AV Kit
- Core media
- Core video
- Core graphics
- GL Kit
- Photos
- OpenGLES
- MetalKit
- SystemConfiguration
- OSLog
- GLProgram
- MediaPlayer
- Accelerate
Dependencies on third-party libraries and their licenses you could view here.
To use the face masks, you will also need the Face AR SDK. It is optional, however, the other features will work without it.
| Options | Mb | Note |
|---|---|---|
| ✅ Face AR SDK + bitcode enabled | 60 | AR effect sizes are not included. AR effect takes 1-3 MB in average. |
| ❌ Face AR SDK + bitcode enabled | 47 | no AR effects |
| № | Moduls | arm64. Mb | x86_64. Mb | CodeResources. Mb | assets. Mb | Total resources. Mb | xcframework. Mb | Size without resources. Mb | Approximate size in AppStore. Mb |
|---|---|---|---|---|---|---|---|---|---|
| 1 | BanubaARCloudSDK | 2,3 | 1,1 | 0,1 | 0 | 0,1 | 3,4 | 3,3 | 1,2 |
| 2 | BanubaAudioBrowserSDK | 6,9 | 8,1 | 7 | 0,367 | 7,367 | 15 | 7,633 | 1,61 |
| 3 | BanubaEffectPlayer | 108 | 58 | 70 | 0 | 70 | 166 | 96 | 37,45 |
| 4 | BanubaLicenseServicingSDK | 1,6 | 1,3 | 0,012 | 0 | 0,012 | 2,9 | 2,888 | 0,42 |
| 5 | BanubaMusicEditorSDK | 9,1 | 6,6 | 0,012 | 0,187 | 0,199 | 15,7 | 15,501 | 1,715 |
| 6 | BanubaOverlayEditorSDK | 17 | 7,5 | 0,014 | 0,88 | 0,894 | 24,5 | 23,606 | 2,003 |
| 7 | BanubsSDK | 6,6 | 4,8 | 0,006 | 0 | 0,006 | 11,4 | 11,394 | 1,225 |
| 8 | BanubaSDKServicing | 0,901 | 0,792 | 0,012 | 0 | 0,012 | 1,693 | 1,681 | 0,21 |
| 9 | BanubaSDKSimple | 5,8 | 4,2 | 0,03 | 0 | 0,03 | 10 | 9,97 | 1,085 |
| 10 | BanubaTokenStorageSDK | 0,73 | 0,65 | 0,012 | 0 | 0,012 | 1,38 | 1,368 | 0,175 |
| 11 | BanubaUtilities | 9,4 | 7,2 | 0,011 | 0 | 0,011 | 16,6 | 16,589 | 3,5 |
| 12 | VEEffectsSDK | 12,5 | 6,3 | 0,01 | 0 | 0,01 | 18,8 | 18,79 | 1,47 |
| 13 | BanubaVideoEditorGallerySDK | 3,3 | 2,5 | 0,016 | 0,087 | 0,103 | 5,8 | 5,697 | 0,595 |
| 14 | BanubaVideoEditorSDK | 48,3 | 31,7 | 2,8 | 2,9 | 5,7 | 80 | 74,3 | 8,715 |
| 15 | BanubaVideoEditorTrimSDK | 1,9 | 1,6 | 0,09 | 0 | 0,09 | 3,5 | 3,41 | 0,42 |
| 16 | BNBLicenseUtils | 3 | 3,5 | 3 | 0 | 3 | 6,5 | 3,5 | 1,005 |
| 17 | VEExportSDK | 1,5 | 1,2 | 0,09 | 0 | 0,09 | 2,7 | 2,61 | 1,22 |
| 18 | VEPlaybackSDK | 1,2 | 0,959 | 0,09 | 0 | 0,09 | 2,159 | 2,069 | 0,273 |
| 19 | VideoEditor | 6,1 | 4,2 | 0,06 | 0,128 | 0,188 | 10,3 | 10,112 | 1,4 |
You can either include the filters in the app or have users download them from the AR cloud to decrease the app size.
| Audio | Video | Images |
|---|---|---|
| .mp3, .aac, .wav, .m4a, .flac, .aiff |
.mp4, .mov, .m4v | .bmp, .gif, .heic, .jpeg, .jpg, .png, .tiff |
To be able to use your own quality parametrs please follow this guide.
| Recording speed | 360p(360 x 640) | 480p(480 x 854) | 540p(540 x 960) | HD(720 x 1280) | FHD(1080 x 1920) |
|---|---|---|---|---|---|
| 1x(Default) | 800 | 2000 | 2000 | 4000 | 6400 |
| 0.5x | 800 | 2000 | 2000 | 4000 | 6400 |
| 2x | 800 | 2000 | 2000 | 4000 | 6400 |
| 3x | 800 | 2000 | 2000 | 4000 | 6400 |
Video Editor SDK classifies every device by its performance capabilities and uses the most suitable quality params for the exported video.
Nevertheless it is possible to customize it with ExportVideoConfiguration. Just put a required video quality into ExportVideoInfo(resolution) constructor. To be able to use your own quality parametrs please follow this guide.
See the default bitrate (kbps) for exported video (without audio) in the table below:
| 360p(360 x 640) | 480p(480 x 854) | 540p(540 x 960) | HD(720 x 1280) | FHD(1080 x 1920) |
|---|---|---|---|---|
| 800 | 2000 | 2000 | 4000 | 6400 |
You should start with getting a trial token. It will grant you 14 days to freely play around with the AI Video Editor SDK and test its entire functionality the way you see fit.
There is nothing complicated about it - contact us or send an email to sales@banuba.com and we will send it to you. We can also send you a sample app so you can see how it works “under the hood”.
We offer а free 14-days trial for you could thoroughly test and assess Video Editor SDK functionality in your app. To get access to your trial, please, get in touch with us by filling a form on our website. Our sales managers will send you the trial token.
There are three options where to put your token:
- Inside the app: read here.
- In the Firebase (what will allow your users not to update the app every time the token is updated): Firebase setup guide, SDK configuration for Firebase.
- In the remote server: SDK configuration for this case.
To decrease the app size, you can connect with our servers and pull AR filters from there. The effects will be downloaded whenever a user needs them. Please check out step-by-step guide guide to configure AR Cloud in the Video Editor SDK.
We understand that the client should have options to brand video editor to bring its own experience to the market. Therefore we provide list of options to customize:
✅ Use your branded icons. See details
✅ Use you branded colors. See details
✅ Change text styles i.e. font, color. See details
✅ Masks, video effects and filters order. See details
✅ Localize and change text resources. Default locale is 🇺🇸
✅ Make content you want i.e. a number of video with different resolutions and durations, an audio file. See details
✅ Customize video recording duration behavior. See details
✅ Settings for the camera. See details
❌ Change layout except Camera and Postprocessing screens
❌ Change screen order
❗ We do custom UX/UI changes as a separate contract. Please contact our sales@banuba.com.
Face AR SDK is optional for the video editor SDK and would be disabled if it is not included in your token. If you don't use Face AR SDK make the following changes in Podfile to remove it:
- pod 'BanubaEffectPlayer', '1.24.0'
- pod 'BanubaSDK', '1.24.0'
+ pod 'BanubaSDKSimple', '1.24.0'❗ Important: Do not forget to copy all the resources that the sample contains, such as the luts folder and etc.
The easiest ways to integrate the Video Editor SDK in your mobile app are through CocoaPods or SwiftPackageManager. If you haven’t used this dependency managers before, see the Cocoapods Getting Started Guide and SPM Getting Started Guide.
Important: Sample intergration of SPM and VideoEditor is in spm branch
Please add a link to the collection of packages:
- Open App project -> navigate to SwiftPackages tab.
Please check the boxes for the modules you need to install and click the 'Add Package' button.
Important: Make sure that you have CocoaPods version >= 1.9.0 installed. Check your CocoaPods version using this command pod --version
Please, refer to the example of Podfile lines which you need to add.
- Make sure to have CocoaPods installed, e.g. via Homebrew:
brew install cocoapods
- Initialize pods in your project folder (if you didn't do it before).
pod init
- Install the Video Editor SDK for the provided Xcode workspace with:
pod install
- Open Example.xcworkspace with Xcode and run the project.
import BanubaVideoEditorSDK
class ViewController: UIViewController {
private var videoEditorSDK: BanubaVideoEditor?
override func viewDidLoad() {
super.viewDidLoad()
initVideoEditor()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let launchConfig = VideoEditorLaunchConfig(
entryPoint: .camera,
hostController: self,
animated: true
)
videoEditorSDK?.presentVideoEditor(
withLaunchConfiguration: launchConfig,
completion: nil
)
}
private func initVideoEditor() {
let configuration = VideoEditorConfig()
videoEditorSDK = BanubaVideoEditor(
token: "place client token here",
configuration: configuration,
externalViewControllerFactory: nil
)
videoEditorSDK?.delegate = self
}
}
// MARK: - Handle Video Editor lifecycle
extension ViewController: BanubaVideoEditorDelegate {
func videoEditorDidCancel(_ videoEditor: BanubaVideoEditor) {
videoEditor.dismissVideoEditor(animated: true, completion: nil)
}
func videoEditorDone(_ videoEditor: BanubaVideoEditor) {
videoEditor.dismissVideoEditor(animated: true, completion: nil)
}
}The Video Editor has one entry point:
/// Modally presents Video editor's view controller with pre-defined configuration
/// - Parameters:
/// - configuration: contains configurations for launching Video editor's screen
/// - completion: The block to execute after the presentation finishes.
func presentVideoEditor(
withLaunchConfiguration configuration: VideoEditorLaunchConfig,
completion: (() -> Void)?
)VideoEditorLaunchConfig contains the following fields:
/// The video editor launch configuration
@objc public class VideoEditorLaunchConfig: NSObject {
/// Setups VE start screen.
public var entryPoint: PresentEventOptions.EntryPoint
/// The view controller to display over.
public var hostController: UIViewController
/// An array with urls to videos located on a phone.
public var videoItems: [URL]?
/// Drafted launch config
public var draftedLaunchConfig: DraftedLaunchConfig?
/// A url to video located on a phone.
public var pipVideoItem: URL?
/// Music track which will be played on camera recording.
public var musicTrack: MediaTrack?
/// Pass true to animate the presentation.
public var animated: Bool
/// Describes config from drafts launching
public struct DraftedLaunchConfig {
/// Drafted video sequence
public var draftedVideoSequence: VideoSequence
/// Drafts feature config
public var draftsConfig: DraftsFeatureConfig
// MARK: - Init
public init(
draftedVideoSequence: VideoSequence,
draftsConfig: DraftsFeatureConfig
) {
...
}
}
// MARK: - Init
public init(
entryPoint: PresentEventOptions.EntryPoint,
hostController: UIViewController,
videoItems: [URL]? = nil,
pipVideoItem: URL? = nil,
draftedLaunchConfig: DraftedLaunchConfig? = nil,
musicTrack: MediaTrack? = nil,
animated: Bool
) {
...
}
}
/// EntryPoint describes what kind of entry point is used in video editor navigation flow
public enum EntryPoint: String, Codable {
case camera
case pip
case trimmer
case editor
case drafts
}To export video after the editing is complete use these method:
/// Export several configurable video
/// - Parameters:
/// - configuration: contains configurations for exporting videos such as file url,
/// watermark and video quality and etc.
/// - completion: completion: (success, error, exportCoverImages), execute on background thread.
public func export(
using configuration: ExportConfiguration,
completion: @escaping ((_ success: Bool, _ error: Error?, _ exportCoverImages: ExportCoverImages?)->Void)
)See the sample export video flow here. You can find the detailed video export features here.
Banuba Video Editor SDK can trim audio tracks, merge them, and apply them to a video. It doesn’t include music or sounds. However, it can be integrated with Mubert and get music from it (requires additional contract with them). Moreover, the users can add audio files from internal memory (downloaded library) from the phone.
Integrating audio content is simple. See this guide.
Each screen can be modified to your liking. You can change icons, colors, text and its font, button titles, and much more.
Note that layouts and screen order can’t be changed. You can, however, ask us to customize the mobile video editor UI as a separate contract.
Below see the list of screens with links to their detailed description and notes on modifying them
- Camera screen
- Editor screen
- Trim screens
- Overlay screens
- Music editor screen
- Gallery screen
- Alert screens
- Cover screen
- Hands Free screen
- Audio Browser screen
- Picture in picture
The SDK allows overriding icons, colors, typefaces and many more configuration entities. Every SDK screen has its own set of styles.
The SDK allows to reorder masks and filters in the way you need. To achieve this use the property preferredLutsOrder and preferredMasksOrder
let config = VideoEditorConfig()
// Sorting for the record screen
config.recorderConfiguration.recorderEffectsConfiguration.preferredLutsOrder = [
"egypt",
"norway",
"japan"
...
]
config.recorderConfiguration.recorderEffectsConfiguration.preferredMasksOrder = [
"XYScanner",
"Background"
...
]
// Sorting for the post processing screen
config.filterConfiguration.preferredLutsOrder = [
"byers",
"sunset",
"vinyl"
...
]
config.filterConfiguration.preferredMasksOrder = [
"XYScanner",
"Background"
...
]
config.filterConfiguration.preferredVideoEffectOrderAndSet = [
VisualEffectApplicatorType.acid,
VisualEffectApplicatorType.dvCam
...
]
You can add a branded image that would appear on videos that users export.
To do so, create and configure the WatermarkConfiguration structure, then add it to the ExportVideoConfiguration entity.
See this example for details.
Stickers are interactive objects (gif images) that can be added to the video recording to add more fun for users.
By default Giphy API is used to load stickers. All you need is just to pass your personal Giphy Api Key into giphyAPIKey parameter in GifPickerConfiguration entity.
GIPHY doesn't charge for their content. The one thing they do require is attribution. Also, there is no commercial aspect to the current version of the product (no advertisements, etc.) To use it, please, add "Search GIPHY" text attribution to the search bar.
The record button is a main control on the camera screen which you can fully customize along with animations playing on tap.
First of all look at RecordButtonConfiguration entity which you can customize in Camera screen configuration quide. If it still not suits your needs you can create your own view for more information look here
AI Video Editor SDK is provided with its own solution for media content (i.e. images and videos) selection - the gallery screen. To use it as a part of SDK just add the BanubaVideoEditorGallerySDK pod to your podfile:
target 'Example' do
pod 'BanubaVideoEditorSDK'
...
+ pod 'BanubaVideoEditorGallerySDK', '1.23.0'
}The gallery provided by the SDK is fully customizable according to this guide.
Also there is an option to use your own implementation of the gallery. This is available according to this step-by-step guide.
Any icon in the mobile video editor SDK can be replaced. This is how:
- Load custom images to the Assets catalog
- Locate the screen with an icon you want to change in the VideoEditorConfig entity
- Find the specific element and override it with the resource name or use UIImage, if available.
For example, this is how you change a mask icon on the camera screen.
Any text in the mobile video editor SDK can be changed. To edit text resources, download the file with strings here, change whatever you need, and put the new file into your app.
Don’t change the keys (values on the left), only the values on the right. Otherwise, the button names and other texts will not show.
The SDK generates simple metadata analytics in JSON file that you can use in your application. You need to make sure that analytics collection is enabled in your token.
After export, the analytics as a row is available in the entity:
let analytics: String? = videoEditorSDK?.metadata?.analyticsMetadataJSONOutput example:
{
"export_duration": 18.613733167,
"export_success": true,
"camera_effects": [
"mask:Beauty",
"mask:HairGradient_Avocado",
"neon.png"
],
"video_resolutions": [
"default854x480"
],
"os_version": "12.4.7",
"video_count": 1,
"post_processing_effects": [
"101",
"202",
"mask:2_5D_HeadphoneMusic"
],
"token": "commercial",
"video_duration": 19.433333333333334,
"sdk_version": "1.22.0",
"video_sources": [
{
"startTime": "0.0",
"title": "3CE046B1-9308-44A5-8AC4-E14B5C273F1D",
"endTime": "3.0",
"type": "camera"
},
{
"startTime": "3.0",
"title": "1120F49A-F04C-49BF-B586-0307897B9E74",
"endTime": "12.8",
"type": "gallery"
},
{
"startTime": "12.8",
"title": "82A8C971-04D0-4677-BA3C-61DD2EFB6BAD",
"endTime": "15.8",
"type": "camera"
},
{
"startTime": "15.8",
"title": "D1B9EC82-02BB-4052-B97E-1CFA3489BC3B",
"endTime": "18.458333333333336",
"type": "camera"
}
]
}Please visit our FAQ page to find more technical answers to your questions.
View information about third party libraries.
1.0.15
1.0.16
1.0.17
1.0.18
1.0.19
1.20.0
1.21.0
1.22.0
1.23.0
1.24.0