Intermediate: Quick Video Edit Using Huawei Video Editor in Android App

Overview

In this article, I will create a Video Editor Android Application (VEditorStudio) using HMS Core Video Editor Kit, which provides awesome interface to edit any video (short/long) with special effects, filters, trending video background music and much more. In order to implement Video Editor Kit in your application, user will get awesome rich experience for editing video.

HMS Audio Editor Kit Service Introduction

HMS Video Editor Kit is a one-stop toolkit that can be easily integrated into your app, equipping with versatile short video editing functions like video import/export, editing, and rendering. It’s powerful, intuitive, and compatible APIs allow to create easily a video editing app for diverse scenarios.

• Quick integration
• Provides a product-level UI SDK which is intuitive, open, stable, and reliable, helps you to add video editing functions to your app quickly.
• Diverse functions

Offers one-stop services for short video creation, such as video import/export, editing, special effects, stickers, filters, and material libraries.

• Global coverage

Reaches global developers and supports 70+ languages.

Prerequisite

1. AppGallery Account
2. Android Studio 3.X
3. SDK Platform 19 or later
4. Gradle 4.6 or later
5. HMS Core (APK) 5.0.0.300 or later
6. Huawei Phone EMUI 5.0 or later
7. Non-Huawei Phone Android 5.0 or later

App Gallery Integration process

1. Sign In and Create or Choose a project on AppGallery Connect portal.

2. Navigate to Project settings and download the configuration file.

3. Navigate to General Information, and then provide Data Storage location.

4. Navigate to Manage APIs, and enable Video Editor Kit.

5. Navigate to Video Editor Kit and enable the service.

App Development

1. Create A New Project, choose Empty Activity > Next.

2. Configure Project Gradle.

3. Configure App Gradle.

4. Configure AndroidManifest.xml.

API Overview

1. Set an access token or API key for your app authentication.

2. (Recommended) Use the setAccessToken method to set an access token during initialization when the app is started. The access token does not need to set again.

3. Use the setApiKey method to set an API key during initialization when the app is started. The API key does not need to set again.

MediaApplication.getInstance().setApiKey(“your ApiKey”)

4. When you create an app in AppGallery Connect, an API key will be assigned to your app.

NOTE: Please do not hardcode the API key or store it in the app configuration file. You are advised to store the API key on the cloud and obtain it when the app is running.

5. Set a unique License ID, which is used to manage your usage quotas.

MediaApplication.getInstance().setLicenseId(“License ID”);

6. Set the mode for starting the Video Editor Kit UI.

7. Currently, only the START_MODE_IMPORT_FROM_MEDIA mode is supported. It means that the Video Editor Kit UI is started upon video/image import.

VideoEditorLaunchOption option = new VideoEditorLaunchOption.Builder().setStartMode(START_MODE_IMPORT_FROM_MEDIA).build();
MediaApplication.getInstance().launchEditorActivity(this,option);

8. Use the setOnMediaExportCallBack method to set the export callback.

MediaApplication.getInstance().setOnMediaExportCallBack(callBack);
// Set callback for video export.
private static MediaExportCallBack callBack = new MediaExportCallBack() {
    @Override
    public void onMediaExportSuccess(MediaInfo mediaInfo) {
        // Export succeeds.
        String mediaPath = mediaInfo.getMediaPath();
    }
    @Override
    public void onMediaExportFailed(int errorCode) {
        // Export fails.
    }
};

Application Code

MainActivity:

This activity performs video editing operations.

package com.editor.studio;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.Manifest;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.widget.LinearLayout;
import com.editor.studio.util.PermissionUtils;
import com.huawei.hms.videoeditor.ui.api.MediaApplication;
import com.huawei.hms.videoeditor.ui.api.MediaExportCallBack;
import com.huawei.hms.videoeditor.ui.api.MediaInfo;
public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private static final int PERMISSION_REQUESTS = 1;
    private LinearLayout llGallery;
    private LinearLayout llCamera;
    private Context mContext;
    private final String[] PERMISSIONS = new String[]{
            Manifest.permission.READ_EXTERNAL_STORAGE,
            Manifest.permission.WRITE_EXTERNAL_STORAGE,
            Manifest.permission.RECORD_AUDIO
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = this;
        setContentView(R.layout.activity_main);
        llGallery = findViewById(R.id.ll_gallery);
        llCamera = findViewById(R.id.ll_camera);
        initSetting();
        initData();
        initEvent();
    }
    private void requestPermission() {
        PermissionUtils.checkManyPermissions(mContext, PERMISSIONS, new PermissionUtils.PermissionCheckCallBack() {
            @Override
            public void onHasPermission() {
                startUIActivity();
            }
            @Override
            public void onUserHasReject(String... permission) {
                PermissionUtils.requestManyPermissions(mContext, PERMISSIONS, PERMISSION_REQUESTS);
            }
            @Override
            public void onUserRejectAndDontAsk(String... permission) {
                PermissionUtils.requestManyPermissions(mContext, PERMISSIONS, PERMISSION_REQUESTS);
            }
        });
    }
    private void initSetting() {
        MediaApplication.getInstance().setLicenseId("License ID"); // Unique ID generated when the VideoEdit Kit is integrated.
        //Setting the APIKey of an Application
        MediaApplication.getInstance().setApiKey("API_KEY");
        //Setting the Application Token
        // MediaApplication.getInstance().setAccessToken("set your Token");
        //Setting Exported Callbacks
        MediaApplication.getInstance().setOnMediaExportCallBack(CALL_BACK);
    }
    @Override
    protected void onResume() {
        super.onResume();
    }
    private void initEvent() {
        llGallery.setOnClickListener(v -> requestPermission());
    }
    private void initData() {
    }

    //The default UI is displayed.
    /**
     * Startup mode (START_MODE_IMPORT_FROM_MEDIA): Startup by importing videos or images.
     */
    private void startUIActivity() {
        //VideoEditorLaunchOption build = new VideoEditorLaunchOption
        // .Builder()
        // .setStartMode(START_MODE_IMPORT_FROM_MEDIA)
        // .build();
        //The default startup mode is (START_MODE_IMPORT_FROM_MEDIA) when the option parameter is set to null.
        MediaApplication.getInstance().launchEditorActivity(this, null);
    }
    //Export interface callback
    private static final MediaExportCallBack CALL_BACK = new MediaExportCallBack() {
        @Override
        public void onMediaExportSuccess(MediaInfo mediaInfo) {
            String mediaPath = mediaInfo.getMediaPath();
            Log.i(TAG, "The current video export path is" + mediaPath);
        }
        @Override
        public void onMediaExportFailed(int errorCode) {
            Log.d(TAG, "errorCode" + errorCode);
        }
    };
    /**
     * Display Go to App Settings Dialog
     */
    private void showToAppSettingDialog() {
        new AlertDialog.Builder(this)
                .setMessage(getString(R.string.permission_tips))
                .setPositiveButton(getString(R.string.setting), (dialog, which) -> PermissionUtils.toAppSetting(mContext))
                .setNegativeButton(getString(R.string.cancels), null).show();
    }
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions,
                                           @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        if (requestCode == PERMISSION_REQUESTS) {
            PermissionUtils.onRequestMorePermissionsResult(mContext, PERMISSIONS,
                    new PermissionUtils.PermissionCheckCallBack() {
                        @Override
                        public void onHasPermission() {
                            startUIActivity();
                        }
                        @Override
                        public void onUserHasReject(String... permission) {
                        }
                        @Override
                        public void onUserRejectAndDontAsk(String... permission) {
                            showToAppSettingDialog();
                        }
                    });
        }
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ic_bg"
        tools:context=".MainActivity">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:padding="10dp"
            android:textStyle="bold"
            android:layout_centerHorizontal="true"
            android:layout_alignParentTop="true"
            android:textSize="40dp"
            android:text="Let's Edit Video" />
        <TextView
            android:id="@+id/txt_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:padding="10dp"
            android:textStyle="bold"
            android:layout_centerInParent="true"
            android:textSize="40dp"
            android:text="Choose Video From" />
        <LinearLayout
            android:layout_below="@+id/txt_header"
            android:layout_width="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:layout_height="wrap_content">
            <LinearLayout
                android:id="@+id/ll_gallery"
                android:layout_width="150dp"
                android:background="@drawable/gallery_btn"
                android:layout_margin="15dp"
                android:gravity="center"
                android:layout_height="150dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/white"
                    android:padding="10dp"
                    android:textStyle="bold"
                    android:textSize="30dp"
                    android:text="Gallery" />
            </LinearLayout>
            <LinearLayout
                android:id="@+id/ll_camera"
                android:layout_width="150dp"
                android:background="@drawable/gallery_btn"
                android:layout_margin="15dp"
                android:gravity="center"
                android:layout_height="150dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/white"
                    android:padding="10dp"
                    android:textStyle="bold"
                    android:textSize="30dp"
                    android:text="Camera" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

App Build Result

Tips and Tricks

1. Service is free for trial use. The pricing details will be released on HUAWEI Developers later.
2. It supports following Video formats: MP4, 3GP, 3G2, MKV, MOV, and WebM.
3. A License ID can be consumed three times each day. When you have set a License ID, uninstalling and then re-installing the app will consume one quota. After using up the three quotas during a day, you can use the SDK with this same License ID only after 12 midnight.
4. A unique License ID involving no personal data is recommended while you are setting it.

Conclusion

In this article, we have learned how to integrate Video Editor Kit in android application which enhance user experience in order to video editing to the next level. It provides various video effects, library, filters, trimming and etc. It is very helpful to create short videos with awesome filter and with user choice video background music.

Thanks for reading this article. Be sure to like and comment to this article, if you found it helpful. It means a lot to me.

References

HMS Video Editor Docs:

https://developer.huawei.com/consumer/en/doc/development/Media-Guides/introduction-0000001153026881