quickstart_ve_ios.md

iOS Video and Photo Editor SDK quick start

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

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

• Installation
• Resources
• Configuration
• Launch
• Editor V2
• Face AR Effects
• Connect External Audio API

Installation

Add iOS Video Editor SDK dependencies to your Podfile.

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 Lut effects shown in the Effects tab.
2. Localizable.strings file with English localization.

Video Editor SDK needs only the Localizable.strings file.

Configuration

Important

Check if the file YourProject-Bridging-Header.h exists in your React Native project in the ios folder.

Add VE-Sample-Bridging-Header.h and SdkEditorModuleBridge.m files for communication between React Native and iOS and SdkEditorModule.swift file to initialize the SDK dependencies. This class also allows you to customize many Video and Photo Editor SDK features i.e. min/max video durations, export flow, order of effects and others.

Add YourProject-Bridging-Header.h file

Create a new Bridging-Header.h file

To create YourProject-Bridging-Header.h, open your iOS project in Xcode and follow the steps below:

1. Create a new empty Swift file in your project by following the path File -> New -> File:
   
2. Choose Swift file and click Next:
   
3. Click Create:
   
4. Xcode will suggest you to configure an Objective-C bridging Header. Click Create Bridging Header:
   
5. Copy VE-Sample-Bridging-Header.h to your YourProject-Bridging-Header.h.

Add to existing YourProject-Bridging-Header.h

1. Copy VE-Sample-Bridging-Header.h to your YourProject-Bridging-Header.h.

Add SdkEditorModule.swift file

1. Create a new Swift file in your project by following the path File -> New -> File:
   
2. Choose Swift file and click Next:
   
3. Set the name SdkEditorModule and click Create:
   
4. Copy SdkEditorModule.swift to your SdkEditorModule.

Add SdkEditorModuleBridge.m file

Create a new SdkEditorModuleBridge.m file

1. Create a new empty .m file in your project by following the path File -> New -> File:
   
2. Choose Objective-C file and click Next:
   
3. Set the name of the file and click Next:
   
   On the next view click Create.
4. Copy SdkEditorModuleBridge.m to your SdkEditorModuleBridge.m.

Add to existing SdkEditorModuleBridge.m file

1. Copy SdkEditorModuleBridge.m to your SdkEditorModuleBridge.m

Launch

Invoke initSDK on React Native side to initialize Video Editor SDK with the license token.

SdkEditorModule.initSDK(LICENSE_TOKEN);

Add ReactMethod on iOS side to initialize Video Editor SDK.

Please note that the instance videoEditor can be nil if the license token is incorrect.
See example

Finally, once the SDK in initialized you can invoke openVideoEditor message from React Native to iOS

await SdkEditorModule.openVideoEditor();

and add ReactMethod on iOS side to start Video Editor.

Export media

Video Editor SDK exports single video with auto quality by default. Auto quality is based on device hardware capabilities.

Process the result and pass it to handler on React Native side.

Editor V2

To keep up with the latest developments and best practices, our team has completely redesigned the Video Editor SDK to be as convenient and enjoyable as possible.

Integration

Init the Video Editor with argument [.useEditorV2: true] to enable Editor UI V2:

  videoEditorSDK = BanubaVideoEditor(
    token: token,
    arguments: [.useEditorV2 : true],
    configuration: config,
    externalViewControllerFactory: customViewControllerFactory
  )

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 ios project and place effects there.
2. Use AR Cloud for storing effects on a server.

Connect audio

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

Connect Soundstripe

Set false to configEnableCustomAudioBrowser and specify Soundstripe in your SdkEditorModule

Important

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

AudioBrowserConfig.shared.musicSource = .soundstripe

to use audio from Soundstripe in Video Editor.

Connect Mubert

Request API key from Mubert.

Important

Banuba is not responsible for providing Mubert API key.

Set false to configEnableCustomAudioBrowser and specify MubertApiConfig in your SdkEditorModule

AudioBrowserConfig.shared.musicSource = .mubert
BanubaAudioBrowser.setMubertKeys(
  license: "SET MUBERT API LICENSE",
  token: "SET MUBERT API TOKEN"
)

to use audio from Mubert in Video Editor.

Connect Banuba Music

Set false to configEnableCustomAudioBrowser and specify BanubaMusicProvider in your SdkEditorModule

Important

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

AudioBrowserConfig.shared.musicSource = .banubaMusic

to use audio from Banuba Music in Video Editor.

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

Important

Video Editor SDK can play only files stored on device.