Skip to content

quickstart_ve_android.md

Latest commit

 

History

History
361 lines (278 loc) · 13.8 KB

quickstart_ve_android.md

File metadata and controls

361 lines (278 loc) · 13.8 KB

Video Editor Quickstart on Android

This guide walks you through integrating the Android Video Editor SDK into your React Native project. Integration and customization are performed in the android directory using native Android development practices.

Installation

Add the Banuba repository to your project using either Groovy or Kotlin DSL:

Groovy (in project's build.gradle)

...

allprojects {
    repositories {
       ...
       maven {
          name = "nexus"
          url = uri("https://nexus.banuba.net/repository/maven-releases")
       }
    }
}

or

Kotlin (settings.gradle.kts)

...
dependencyResolutionManagement {
   repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
   repositories {
      ...
      maven {
         name = "nexus"
         url = uri("https://nexus.banuba.net/repository/maven-releases")
      }
   }
}

Specify packagingOptions in your build gradle:

android {
...
    packagingOptions {
        jniLibs {
            useLegacyPackaging = true
        }
    }
...
}

Add dependencies to your app's gradle

    def banubaSdkVersion = '1.51.0'
    implementation "com.banuba.sdk:ffmpeg:5.3.0"
    implementation "com.banuba.sdk:camera-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:camera-ui-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:core-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:core-ui-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-flow-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-ui-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-gallery-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-effects-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:effect-player-adapter:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ar-cloud:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-audio-browser-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-export-sdk:${banubaSdkVersion}"
    implementation "com.banuba.sdk:ve-playback-sdk:${banubaSdkVersion}"

Ensure these plugins are in your app's gradle.

   plugins {
        id "com.android.application"
        id "kotlin-android"
        id "kotlin-parcelize"
}

AndroidManifest Updates

Add the following to your AndroidManifest.xml:

  1. VideoCreationActivity – orchestrates the video editor screens
<activity android:name="com.banuba.sdk.ve.flow.VideoCreationActivity"
    android:screenOrientation="portrait"
    android:theme="@style/VideoCreationTheme"
    android:windowSoftInputMode="adjustResize"
    tools:replace="android:theme" />
  1. Network permissions (optional)– only required if using Giphy stickers or downloading AR effects from the cloud.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Note: You'll also need a custom VideoCreationTheme example to style the editor UI.

Please set up correctly network security config and use of android:usesCleartextTraffic by following guide.

Koin Module Setup

  1. Create VideoEditorIntegrationModule to initialize and customize the Video Editor SDK.
  2. Inside it, add SampleModule with your customizations:
class VideoEditorIntegrationModule {

   ...

    fun initialize(applicationContext: Context) {
        startKoin {
            androidContext(applicationContext)
            allowOverride(true)

            // IMPORTANT! order of modules is required
            modules(
                VeSdkKoinModule().module,
                VeExportKoinModule().module,
                VePlaybackSdkKoinModule().module,

                // Use AudioBrowserKoinModule ONLY if your contract includes this feature.
                AudioBrowserKoinModule().module,

                // IMPORTANT! ArCloudKoinModule should be set before TokenStorageKoinModule to get effects from the cloud
                ArCloudKoinModule().module,

                VeUiSdkKoinModule().module,
                VeFlowKoinModule().module,
                BanubaEffectPlayerKoinModule().module,
                GalleryKoinModule().module,

                // Sample integration module
+                SampleModule().module,
            )
        }
    }
}

+ private class SampleModule {

    val module = module {
        single<ArEffectsRepositoryProvider>(createdAtStart = true) {
            ArEffectsRepositoryProvider(
                arEffectsRepository = get(named("backendArEffectsRepository"))
            )
        }

        // Audio Browser provider implementation.
        single<ContentFeatureProvider<TrackData, Fragment>>(
            named("musicTrackProvider")
        ) {
            if (VideoEditorIntegrationModule.CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER) {
                AudioBrowserContentProvider()
            } else {
                // Default implementation that supports Local audio stored on the device
                AudioBrowserMusicProvider()
            }
        }
    }
}

Export

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

Every exported media is passed to the onActivityResult method in MainActivity.kt. Process the result there and forward it to the handler on React Native side.

Launch

Create SdkEditorModule for communicating with the SDK.

Create BanubaSdkReactPackage class add add SdkEditorModule to the list of modules.

 class BanubaSdkReactPackage : ReactPackage {

    class BanubaSdkReactPackage : ReactPackage {
        override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
            val modules = mutableListOf<NativeModule>()
 +           modules.add(SdkEditorModule(reactContext))
            return modules
        }
        override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> =
            mutableListOf()
    }
}

Add BanubaSdkReactPackage package in the application

    class MainApplication : Application(), ReactApplication {


    override val reactNativeHost: ReactNativeHost =
        object : DefaultReactNativeHost(this) {
            override fun getPackages(): List<ReactPackage> = PackageList(this).packages.apply {
+                add(BanubaSdkReactPackage())
            }

            ...
        }

    override val reactHost: ReactHost
        get() = getDefaultReactHost(applicationContext, reactNativeHost)

    override fun onCreate() {
        super.onCreate()
        ...
    }
}

The Promises pattern bridges React Native with Android native modules.

Init SDK

On the React Native side, call initSDK to initialize the SDK with your license token:

SdkEditorModule.initSDK(LICENSE_TOKEN);

On the Android side, implement the ReactMethod that initializes the Video Editor SDK.

Start

After SDK initialization, invoke openVideoEditor from React Native to start Video Editor:

await SdkEditorModule.openVideoEditor();

On the Android side, implement the ReactMethod to start Video Editor.

    @ReactMethod
fun openVideoEditor(promise: Promise) {
   checkLicenseVideoEditor(callback = { isValid ->
      if (isValid) {
         // ✅ The license is active
         val hostActivity = currentActivity
         if (hostActivity == null) {
            // Activity is not connected
         } else {
            this.resultPromise = promise
            val intent = VideoCreationActivity.startFromCamera(
               hostActivity,
               PipConfig(video = Uri.EMPTY, openPipSettings = false),
               extras = extras
            )
            hostActivity.startActivityForResult(intent, OPEN_VIDEO_EDITOR_REQUEST_CODE)
         }
      } else {
         // ❌ Use of SDK is restricted: the license is revoked or expired
      }
   }, onError = { 
       // Verify license
   })
}

Important

  1. Returns nulll if the license token is invalid – verify your token
  2. Check license activation before starting the editor.
  3. Expired/revoked licenses show a "Video content unavailable" screen

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.

Create Bundle with Editor UI V2 configuration and pass extras to any Video Editor start method.

 val extras = bundleOf(
    "EXTRA_USE_EDITOR_V2" to true
 )

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 3 options for adding and managing AR effects:

  1. Store all effects by the path assets/bnb-resources/effects folder in the app.
  2. Store color effects in assets/bnb-resources/luts folder in the app.
  3. Use AR Cloud for storing effects on a server.

Connect audio

This section describes how to connect custom audio tracks to the Video Editor SDK. This is an optional step in the integration process.

Connect External Audio API

Video Editor SDK allows to implement your experience of providing your audio tracks using External Audio API.

For a quick demonstration of this flow on React Native, you can enable the pre-configured custom audio browser by setting CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER to true in VideoEditorIntegrationModule.kt.

Important

The Video Editor SDK can only play audio tracks that are stored locally on the device. You are responsible for downloading or providing the audio file to the correct local path before applying it.

For complete implementation details, including how to build a custom UI and handle audio selection callbacks, refer to the dedicated Audio Content guide.

Connect Soundstripe

To use audio tracks from Soundstripe in the Video Editor:

  1. Set CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER to false in VideoEditorIntegrationModule.kt

  2. Specify SoundstripeProvider in your VideoEditorIntegrationModule:

Important

This feature is not activated by default. Contact Banuba representatives for access.

single<ContentFeatureProvider<TrackData, Fragment>>(named("musicTrackProvider")){
   SoundstripeProvider()
}

Connect Banuba Music

To use audio tracks from Banuba Music in the Video Editor:

  1. Set CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER to false in VideoEditorIntegrationModule.kt
  2. Specify BanubaMusicProvider in your VideoEditorIntegrationModule:

Important

This feature is not activated by default. Contact Banuba representatives for access.

single<ContentFeatureProvider<TrackData, Fragment>>(named("musicTrackProvider")){
   BanubaMusicProvider()
}

Documentation

Explore the full capabilities of our Video Editor SDK