DEV Community

Cover image for Create a Filter Replica in a Tap
Jackson for HMS Core

Posted on

Create a Filter Replica in a Tap

Imagine that a user leaves a comment asking how to copy an image filter to their video. What do you do? Well, the new AI filter capability for HMS Core Video Editor Kit makes this possible. This capability allows users to copy a filter from an existing image to their own video or image, unlocking boundless creativity. The following figure illustrates how the AI filter works on an app:
Filter replica

Function Overview​

  • The capability features two APIs for two types of AI filters (the extract type and the clone type), which you can choose to integrate as needed. On one hand, the AI filter of the clone type is more effective, requiring the original image and the filtered image. On the other hand, the AI filter of the extract type is easier for creating a filter, requiring only the filtered image.
  • The capability automatically saves the extracted filter for future use.
  • The capability allows the AI filter name to be customized.
  • The capability allows the filter strength to be adjusted. Function ## Integration Procedure​ ### Preparations For details, please check the official document. Configuring a Video Editing Project

1.Set the app authentication information.
You can set the information through an API key or access token.
Use the setAccessToken method to set an access token when the app is started. The access token needs to be set only once.

MediaApplication.getInstance().setAccessToken("your access token");
Enter fullscreen mode Exit fullscreen mode

Use the setApiKey method to set an API key when the app is started. The API key needs to be set only once.

MediaApplication.getInstance().setApiKey("your ApiKey");
Enter fullscreen mode Exit fullscreen mode

2.Set a License ID.
This ID is used to manage your usage quotas, so ensure that the ID is unique.

MediaApplication.getInstance().setLicenseId("License ID");
Enter fullscreen mode Exit fullscreen mode

3.Initialize the running environment for HuaweiVideoEditor.
When creating a video editing project, first create a HuaweiVideoEditor object and initialize its running environment. When exiting a video editing project, release the HuaweiVideoEditor object.
Create a HuaweiVideoEditor object.

HuaweiVideoEditor editor = HuaweiVideoEditor.create(getApplicationContext());
Enter fullscreen mode Exit fullscreen mode

Specify the position for the preview area.
This area renders video images, which is implemented by creating SurfaceView in the fundamental capability SDK. Ensure that the preview area position on your app is specified before creating this area.

<LinearLayout   
    android:id="@+id/video_content_layout"   
    android:layout_width="0dp"   
    android:layout_height="0dp"   
    android:background="@color/video_edit_main_bg_color"   
    android:gravity="center"   
    android:orientation="vertical" />
// Specify the preview area position.
LinearLayout mSdkPreviewContainer = view.findViewById(R.id.video_content_layout);

// Set the layout of the preview area.
editor.setDisplay(mSdkPreviewContainer);
Enter fullscreen mode Exit fullscreen mode

Initialize the running environment. If the license verification fails, LicenseException will be thrown.
After the HuaweiVideoEditor object is created, it has not occupied any system resource. You need to manually set the time for initializing the running environment of the object. Then, necessary threads and timers will be created in the fundamental capability SDK.

try {
        editor.initEnvironment();
   } catch (LicenseException error) {
        SmartLog.e(TAG, "initEnvironment failed: " + error.getErrorMsg());   
        finish();
        return;
   }
Enter fullscreen mode Exit fullscreen mode

4.Add a video or image.
Create a video lane and add a video or image to the lane using the file path.

// Obtain the HVETimeLine object.
HVETimeLine timeline = editor.getTimeLine();

// Create a video lane.
HVEVideoLane videoLane = timeline.appendVideoLane();

// Add a video to the end of the video lane.
HVEVideoAsset videoAsset = videoLane.appendVideoAsset("test.mp4");

// Add an image to the end of the video lane.
HVEImageAsset imageAsset = videoLane.appendImageAsset("test.jpg");
Enter fullscreen mode Exit fullscreen mode

5.Create an effect lane for the external special effect.
The AI filter effect is added to the effect lane. This effect can be applied to multiple assets, and its duration can be adjusted.

// Create an effect lane.
HVEEffectLane effectLane = timeline.appendEffectLane();
Enter fullscreen mode Exit fullscreen mode

Integrating the AI Filter Capability

// Create an AI algorithm engine for AI filter.
HVEExclusiveFilter filterEngine = new HVEExclusiveFilter();

// Initialize the engine.
mFilterEngine.initExclusiveFilterEngine(new HVEAIInitialCallback() {
        @Override
        public void onProgress(int progress) {
        // Initialization progress.
        }

        @Override
        public void onSuccess() {
            // The initialization is successful.
        }

        @Override
        public void onError(int errorCode, String errorMessage) {
            // The initialization failed.
        }
    });

// Create an AI filter of the extract type from an image, by specifying the image bitmap and filter name.
// The filter ID is returned. Using the ID, you can query all information about the filter in the database.
String effectId = mFilterEngine.createExclusiveEffect(bitmap, "AI filter 01");

// Add the filter for the first 3000 ms segment of the effect lane.
effectLane.appendEffect(new HVEEffect.Options(
    HVEEffect.CUSTOM_FILTER + mSelectName, effectId, ""), 0, 3000);
Enter fullscreen mode Exit fullscreen mode

Result​

Result
This article presents the AI filter capability of Video Editor Kit. For more, check here.

Top comments (0)