All Products
Search
Document Center

Import for editing

Last Updated: Aug 01, 2019

Overview

The editing module of the Alibaba Cloud short video SDK allows you to edit video effects. Currently, the basic edition of the short video SDK does not support the editing module, whereas the standard edition supports filters, music, effects, speed control, transition, and graffiti. Based on the standard edition, the professional edition adds music videos (MVs), motion graphics, and captioning. You can quickly integrate the professional video editing feature into your application in a few simple steps. You can use a configuration file to customize the style of the video editing UI. You can also refer to the demo and use the Alibaba Cloud short video SDK to customize your own editing module.

Integrate the editing feature

Tips: The editing feature is supported only in the standard and professional editions of the short video SDK, where the integration procedure is the same. The editing feature is controlled by a license.

Create a sample project SVideoEditorDemo. undefined

Step 1: Import files

  • Copy the required library folder and Gradle-related folders into the sample project. Copy files for SmartVideo editing

  • Modules

Name Description Required
AlivcCore The core components of the short video SDK. Yes
AliyunSVideoBase The basic package of the short video SDK. Yes
AliyunSvideoMusic The music widget of the short video SDK. Yes
AliyunVideoSdk The core editing features of the short video SDK. Yes
AliyunEditor The module that contains the code used to implement the editing UI and features. Yes
AliyunCrop The module that contains the code used to implement the cropping UI. Yes
AlivcMedia The media library module. Yes
AliyunFileDownLoader The module related to resource download and databases. Yes
AliyunVideoCommon The public module, which contains some utility classes. Yes
thirdparty-lib The module that contains dependent third-party libraries required by the project. Yes
  • Copy resource packages in the assets folder and SO files in the jniLibs folder into your project. undefined

  • SO files

Tips: Currently, the short video SDK provides a library folder for each of the following two CPU architectures: armeabi-v7a and arm64-v8a.

Name Description Required
libfdk-aac.so The dependent third-party audio library of the short video SDK. Yes
liblive-openh264.so The dependent third-party library of the short video SDK. Yes
libQuCore.so The core library of the short video SDK. Yes
libsvideo_alivcffmpeg.so The dependent third-party library of the short video SDK. Yes
  • Resource packages

The assets folder contains the basic resources required by video editing. You need to copy these ZIP files into the AliyunEditorDemo folder of your project.

Name Description Required
aliyun_svideo_animation_filter.zip The effect resources. Yes
aliyun_svideo_caption.zip The captioning resources. Yes
aliyun_svideo_filter.zip The filter resources. Yes
aliyun_svideo_mv.zip The MV resources. Yes
aliyun_svideo_overlay.zip The motion graphics resources. Yes
tail.zip The tail watermark resources. No
  • If you integrate other functional modules of the short video SDK, the same folders and library folder also apply to these modules.

Step 2: Import packages and build.gradle configuration

  • Add the following reference to the settings.gradle file of your project:
include ':AlivcCore' // The core components of the short video SDK.
include ':AliyunSVideoBase' // The basic package of the short video SDK.
include ':AliyunSvideoMusic' // The music widget of the short video SDK.
include ':AliyunVideoSdk' // The core editing features of the short video SDK.
include ':AliyunEditor:editor_demo' // The module that contains the code used to implement the editing UI and features.
include ':AliyunCrop:crop_demo' // The module that contains the code used to implement the cropping UI.
include ':AlivcMedia' // The media library module. 
include ':AliyunVideoCommon' // The public module, which contains some utility classes.
include ':AliyunFileDownLoader:downloadermanager' // The module related to resource download and databases.
  • Add the native development kit (NDK) and dependency configuration to the build.gradle file of your project.
defaultConfig {
        //...
        ndk {
            abiFilters "armeabi-v7a","arm64-v8a"
            // Currently, the short video SDK does not support the x86 architecture.
        }
    }
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    //...

    // The dependent libraries of the professional edition of the short video SDK.
    api project(':AliyunEditor:editor_demo')
    implementation project(':AliyunImport:import_demo')
    implementation project(':AliyunFileDownLoader:downloadermanager')
}
  • Import the configuration in the thirdparty-lib/config.gradle directory into the build.gradle file of your project.
buildscript {
        //...
        apply from: 'thirdparty-lib/config.gradle'

        dependencies {
            classpath '...'

    }
}
  • Add the URL of a Maven repository to the build.gradle file of your project.
allprojects {
    repositories {
        google()
        jcenter()
        maven { url "http://maven.aliyun.com/nexus/content/repositories/releases" }
    }
}

Step 3: Add permissions

Add the following permissions to the AndroidManifest.xml file (skip this step if permissions are added):

<uses-permission android:name="android.permission.INTERNET"/> 
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 
    <uses-permission android:name="android.permission.WAKE_LOCK"/> 
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> 
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> 
    <uses-permission android:name="android.permission.BLUETOOTH" /> 
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

You need to apply for a dynamic permission for Android 6.0 and later versions.

Step 4: Call the onCreate method to initialize the Application class

  • Create a MyApplication class to inherit the android.app.Application class.
@Override
    public void onCreate() {
        super.onCreate();
        QupaiHttpFinal.getInstance().initOkHttpFinal();
        DownloaderManager.getInstance().init(this);
    }
  • Specify the created Application class in the AndroidManifest.xml file. undefined

  • If you specify your own Application class for your project, you only need to add the onCreate method to your own Application class.

Step 5: Use the feature

  • Add a button to the sample project. undefined

  • Add a click event to the MainActivity class. undefined

Tips: The editing feature needs the storage permissions. To guarantee that you can use this feature properly on devices in Android 6.0 or later versions, you need to apply for a dynamic permission to handle exceptions such as the black screen.

  • Use the default parameter settings to access the editing UI.
AlivcSvideoEditParam param = new AlivcSvideoEditParam.Build()
            .build();
        MediaActivity.startImport(this, param);

Set editing parameters. The complete sample code is as follows:

AlivcSvideoEditParam param = new AlivcSvideoEditParam.Build()
                .setRatio(mRatio) // The aspect ratio.
                .setCropMode(scaleMode) // The cropping mode.
                .setVideoQuality(videoQuality) // The video quality.
                .setResolutionMode(mResolutionMode) // The resolution.
                .setHasTailAnimation(mHasTailAnimation) // Indicates whether to add a tail watermark.
                .setFrameRate(frameRate) // The frame rate.
                .setGop(gop) // The keyframe interval.
                .setBitrate(bitrate) // The bitrate.
                .setEntrance(entrance) // The entry to the editing UI, which can be the editing module or the editing feature of the community module.
                .setIsOpenCrop(true) // Indicates whether the entry to the cropping UI is provided on the album page.
                .build();
     MediaActivity.startImport(this,param);
  • Configure the UI.

    Specify the theme of the editing activity to configure the UI. The theme is optional. If you do not specify a theme, the default theme is used. The sample code is as follows:

<! --The theme for the editing UI configuration.-->

<style name="AlivcEditUIStyle" parent="Theme.AppCompat.Light.NoActionBar">
<! --The filter icon.-->
<item name="filterImage">@mipmap/aliyun_svideo_filter</item>
<! --The music icon.-->
<item name="musicImage">@mipmap/aliyun_svideo_music</item>
<! --The motion graphics icon.-->
<item name="pasterImage">@mipmap/aliyun_svideo_overlay</item>
<! --The captioning icon.-->
<item name="captionImage">@mipmap/aliyun_svideo_caption</item>
<! --The MV icon.-->
<item name="mvImage">@mipmap/aliyun_svideo_mv</item>
<! --The effect icon.-->
<item name="effectImage">@mipmap/alivc_svideo_effect</item>
<! --The time effect icon.-->
<item name="timeImage">@mipmap/aliyun_svideo_time</item>
<! --The transition icon.-->
<item name="translationImage">@mipmap/aliyun_svideo_transition</item>
<! --The graffiti icon.-->
<item name="paintImage">@mipmap/aliyun_svideo_paint</item>
<! --The play icon.-->
<item name="playImage">@mipmap/aliyun_svideo_play</item>
<! --The pause icon.-->
<item name="pauseImage">@mipmap/aliyun_svideo_pause</item>
<! --The editing completion icon.-->
<item name="finishImage">@mipmap/aliyun_svideo_complete_red</item>
</style>
  • Register a redirect activity after editing. If you need to redirect users to a custom publish page after editing, register a redirect activity in the AliyunSvideoActionConfig class.
// Goes to the upload page after editing.
AliyunSvideoActionConfig.getInstance().registerEditFinishActivity("com.aliyun.demo.publish.UploadActivity");