Skip to content

Latest commit

 

History

History
273 lines (214 loc) · 11.9 KB

quickstart_ve_android.md

File metadata and controls

273 lines (214 loc) · 11.9 KB
Raw

Android Video Editor SDK quickstart

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

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

Installation

GitHub Packages is used for downloading Android Video Editor 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 and at the top of the file.

plugins {
    id "com.android.application"
    id "kotlin-android"
    id "dev.flutter.flutter-gradle-plugin"
    id "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 VideoEditorModule 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 Flutter side.

Launch

Flutter platform channels approach is used for communication between Flutter and Android.

Set up channel message handler in your MainActivity to listen to calls from Flutter.

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        val appFlutterEngine = requireNotNull(flutterEngine)
        GeneratedPluginRegistrant.registerWith(appFlutterEngine)

        MethodChannel(
            appFlutterEngine.dartExecutor.binaryMessenger,
            "banubaSdkChannel"
        ).setMethodCallHandler { call, result ->
            // Handle method calls
        }
    }
}

Send initVideoEditor message from Flutter to Android

  await platformChannel.invokeMethod('initVideoEditor', LICENSE_TOKEN);

and add corresponding handler on Android side to initialize Video Editor.

 val licenseToken = call.arguments as String
 val editorSDK = BanubaVideoEditor.initialize(licenseToken)

if (editorSDK == null) {
    // The SDK token is incorrect - empty or truncated
    ...
} else {
    if (videoEditorModule == null) {
        // Initialize video editor sdk dependencies
        videoEditorModule = VideoEditorModule().apply {
            initialize(application)
        }
    }
   ...
}

Finally, once the SDK in initialized you can send startVideoEditor message from Flutter to Android

  final result = await platformChannel.invokeMethod('startVideoEditor');

and add the corresponding handler on Android side to start Video Editor.

Important

  1. Instance videoEditorSDK is null if the license token is incorrect. In this case you cannot use photo editor. Check your license token.
  2. It is highly recommended to check if the license is active before starting Photo 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 integration process. In this section you will know how to connect audio to Video Editor.

Connect Soundstripe

Set false in CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER and specify SoundstripeProvider in your VideoEditorModule

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.

[!MPORTANT] Banuba is not responsible for providing Mubert API key.

Set false to CONFIG_ENABLE_CUSTOM_AUDIO_BROWSER and specify MubertApiConfig in your VideoEditorModule

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 VideoEditorModule

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 of providing audio tracks using External Audio API.
To check out the simplest experience on Flutter 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.

What is next?

This quickstart guide has just covered how to quickly integrate Android 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.