Skip to content

Latest commit

 

History

History
273 lines (215 loc) · 12.2 KB

quickstart_ve_android.md

File metadata and controls

273 lines (215 loc) · 12.2 KB
Raw

Android Video Editor SDK quickstart

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

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

Installation

GitHub Packages is used for downloading SDK modules.

First, add repositories to gradle file in allprojects section.

...

allprojects {
    repositories {
        ...

        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/Banuba/banuba-ve-sdk")
            credentials {
                username = "Banuba"
                password = "\u0038\u0036\u0032\u0037\u0063\u0035\u0031\u0030\u0033\u0034\u0032\u0063\u0061\u0033\u0065\u0061\u0031\u0032\u0034\u0064\u0065\u0066\u0039\u0062\u0034\u0030\u0063\u0063\u0037\u0039\u0038\u0063\u0038\u0038\u0066\u0034\u0031\u0032\u0061\u0038"
            }
        }
        maven {
            name = "ARCloudPackages"
            url = uri("https://maven.pkg.github.com/Banuba/banuba-ar")
            credentials {
                username = "Banuba"
                password = "\u0038\u0036\u0032\u0037\u0063\u0035\u0031\u0030\u0033\u0034\u0032\u0063\u0061\u0033\u0065\u0061\u0031\u0032\u0034\u0064\u0065\u0066\u0039\u0062\u0034\u0030\u0063\u0063\u0037\u0039\u0038\u0063\u0038\u0038\u0066\u0034\u0031\u0032\u0061\u0038"
            }
        }
        maven {
            name "GitHubPackagesEffectPlayer"
            url "https://maven.pkg.github.com/sdk-banuba/banuba-sdk-android"
            credentials {
                username = "sdk-banuba"
                password = "\u0067\u0068\u0070\u005f\u004a\u0067\u0044\u0052\u0079\u0049\u0032\u006d\u0032\u004e\u0055\u0059\u006f\u0033\u0033\u006b\u0072\u0034\u0049\u0069\u0039\u0049\u006f\u006d\u0077\u0034\u0052\u0057\u0043\u0064\u0030\u0052\u0078\u006d\u0045\u0069"
            }
        }

        ...
    }
}

Next, specify a list of dependencies in gradle file.

    def banubaSdkVersion = '1.39.0'
    implementation "com.banuba.sdk:ffmpeg:5.1.3"
    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}"

Additionally, make sure the following plugins are in your app gradle file.

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-parcelize'

Resources

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

  1. drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi are visual assets for color filter previews.

  2. styles.xml includes implementation of VideoCreationTheme of Video Editor SDK.

Configuration

Next, specify VideoCreationActivity in your AndroidManifest.xml. This Activity combines a number of screens into video editor flow.

<activity
android:name="com.banuba.sdk.ve.flow.VideoCreationActivity"
android:screenOrientation="portrait"
android:theme="@style/CustomIntegrationAppTheme"
android:windowSoftInputMode="adjustResize"
tools:replace="android:theme" />

Next, allow Network by adding permissions

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

and android:usesCleartextTraffic="true" in AndroidManifest.xml.

Network access is used for downloading AR effects from AR Cloud and stickers from Giphy.

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

Create new Kotlin class VideoEditorIntegrationModule in your project for initializing and customizing Video Editor SDK features.

Export media

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

Every exported media is passed to onActivityResult method. Process the result and pass it to handler on React Native side.

Launch

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

 class BanubaSdkReactPackage : ReactPackage {

    override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
        val modules = mutableListOf<NativeModule>()
        modules.add(SdkEditorModule(reactContext))
        return modules
    }
    ...
}

Next, add BanubaSdkReactPackage to the list of packages in Application class

    override fun getPackages(): MutableList<ReactPackage> {
            val packages = PackageList(this).packages
            packages.add(BanubaSdkReactPackage())
            return packages
    }

Promises feature is used to make a bridge between React Native and Android.

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

SdkEditorModule.initSDK(LICENSE_TOKEN);

Add ReactMethod on Android side to initialize Video Editor SDK.

@ReactMethod
fun initVideoEditorSDK(licenseToken: String, promise: Promise) {
    videoEditorSDK = BanubaVideoEditor.initialize(licenseToken)
    
    if (videoEditorSDK == null) {
        // Token you provided is not correct - empty or truncated
        Log.e(TAG, "SDK is not initialized!")
        promise.reject(ERR_CODE_NOT_INITIALIZED, "")
    } else {
        if (integrationModule == null) {
            // Initialize video editor sdk dependencies
            integrationModule = VideoEditorIntegrationModule().apply {
                initialize(reactApplicationContext.applicationContext)
            }
        }
        promise.resolve(null)
    }
}

Important

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

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

await SdkEditorModule.openVideoEditor();

and add ReactMethod on Android side to start 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 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 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 CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER and specify SoundstripeProvider in your VideoEditorIntegrationModule

Important

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

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

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 CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER and specify MubertApiConfig in your VideoEditorIntegrationModule

single {
   MubertApiConfig(
      mubertLicence = "...",
      mubertToken = "..."
   )
}

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

to use audio from Mubert in Video Editor.

Connect Banuba Music

Set false to CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER and specify BanubaMusicProvider in your VideoEditorIntegrationModule

Important

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

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

to use audio from Banuba Music in Video Editor.

Connect External Audio API

Video Editor SDK allows to implement your experience for providing audio tracks using External Audio API.
To check out the simplest experience you can set true to CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER

Important

Video Editor SDK can play only audio tracks stored on the device.

More information is available in our audio content guide.