All Products
Search
Document Center

Import for cropping

Last Updated: Apr 03, 2020

Overview

The cropping module of the Alibaba Cloud short video SDK provides the video cropping feature. You can crop video clips to adjust the duration of videos. You can also adjust the frame rate, bitrate, resolution, and aspect ratio of videos.

Integrate the cropping module

Note: The cropping module is not distinguished among the basic, standard, and professional editions of the short video SDK.

  • Create a sample project AliyunCropDemo.

undefined

Step 1. Copy files

  • Copy the required library folder and Gradle-related folders into the sample project.

Copy files for integrating the cropping feature

  • The following table describes folders to be copied.

    | Folder | Description | Required | | —————————- | —————————- | —— | | AliyunCrop | The code for configuring the cropping UI. | Yes | | AlivcMedia | The media library code. | Yes | | AliyunSVideoBase | The basic package of the short video SDK. | Yes | | AliyunVideoCommon | The public components. | Yes | | thirdparty-lib | The dependent third-party libraries of the project. | Yes |

Step 2. Reference the preceding folders and configure the build.gradle file

  • Add the following reference to the settings.gradle file of your project:
  1. include ':AliyunSVideoBase'// The basic package of the short video SDK.
  2. include ':AliyunCrop:crop'// The code for configuring the cropping UI.
  3. include ':AliyunVideoCommon'// The public components, which include some utility classes.
  4. include ':AlivcMedia'// The media library code.
  • Add the native development kit (NDK) and dependency configuration to the build.gradle file of your project so that you can initialize and use the short video SDK.
  1. defaultConfig {
  2. //...
  3. ndk {
  4. abiFilters "armeabi-v7a","arm64-v8a"
  5. // Currently, the short video SDK does not support the x86 architecture.
  6. }
  7. }
  8. dependencies {
  9. implementation fileTree(dir: 'libs', include: ['*.jar'])
  10. //...
  11. // The dependent libraries of the cropping feature.
  12. implementation project(':AliyunCrop:crop')
  13. implementation project(':AliyunSVideoBase')
  14. implementation externalOKHTTP
  15. }
  • Import the configuration in the thirdparty-lib/config.gradle directory into the build.gradle file of your project.
  1. buildscript {
  2. //...
  3. apply from: 'thirdparty-lib/config.gradle'
  4. dependencies {
  5. classpath '...'
  6. }
  7. }
  • Add a Maven repository.

Copy the following code into the build.gradle file of your project:

  1. allprojects {
  2. repositories {
  3. google()
  4. jcenter()
  5. maven { url "http://maven.aliyun.com/nexus/content/repositories/releases" }
  6. }
  7. }

Step 3. Add permissions

Add the following permissions to the AndroidManifest.xml file. Skip this step if permissions have been added:

  1. <! -- Add the permission to write data to the SD card. -->
  2. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  3. <! -- Add the permission to read data from the SD card. -->
  4. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  5. <! -- Add the network permission required by the SDK license. -->
  6. <uses-permission android:name="android.permission.INTERNET"/>

Android 6.0 or later requires that your application request dangerous permissions at runtime.

Step 4. Set parameters for the cropping feature

Note: The cropping feature requires the storage permission. To use this feature properly on devices in Android 6.0 or later versions, your application must request the storage permission at runtime to avoid exceptions such as the black screen.

  • Create a MyApplication class to inherit the android.app.Application class or add the following code to the specified Application object of your project:
  1. @Override
  2. public void onCreate() {
  3. super.onCreate();
  4. QupaiHttpFinal.getInstance().initOkHttpFinal();
  5. }
  • Use the default parameter settings to access the cropping UI.
  1. AlivcCropInputParam mCropParam = new AlivcCropInputParam.Builder()
  2. .setPath("The path of the video file")// Required. The path of the video file.
  3. .build();
  4. AliyunVideoCropActivity.startVideoCropForResult(MainActivity.this,mCropParam,REQUEST_CROP);
  • Set cropping parameters. The complete sample code is as follows:
  1. AlivcCropInputParam mCropParam = new AlivcCropInputParam.Builder()
  2. .setPath("The path of the video file")// Required. The path of the video file.
  3. .setFrameRate(frameRate)// The frame rate.
  4. .setGop(gop)// The keyframe interval.
  5. .setCropMode(cropMode)// The cropping mode.
  6. .setVideoQuality(videoQuality)// The video quality.
  7. .setResolutionMode(resolutionMode)// The resolution.
  8. .setRatioMode(ratioMode)// The aspect ratio.
  9. .setNeedRecord(false)// Specify whether to enable jumping to the recording widget on the material resource selection page.
  10. .setCropUseGPU(false) // Specify whether to use the GPU. By default, the GPU is disabled.
  11. .setVideoBitrate()// The bitrate.
  12. .build();
  13. AliyunVideoCropActivity.startVideoCropForResult(this,mCropParam,REQUEST_CROP);
  • Call the onActivityResult method to obtain the path of the cropped video:
  1. @Override
  2. protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
  3. super.onActivityResult(requestCode, resultCode, data);
  4. if(requestCode == 10){
  5. if(resultCode == Activity.RESULT_OK && data!= null){
  6. AlivcCropOutputParam param = (AlivcCropOutputParam)data.getSerializableExtra(AlivcCropOutputParam.RESULT_KEY_OUTPUT_PARAM);
  7. Toast.makeText(this,
  8. "File path "+ param.getOutputPath() + " Duration " + param.getDuration(),
  9. Toast.LENGTH_SHORT).show();
  10. }else if(resultCode == Activity.RESULT_CANCELED){
  11. Toast.makeText(this,"Cropping canceled by the user",Toast.LENGTH_SHORT).show();
  12. }
  13. }
  14. }
  • Configure the UI.

Specify the theme of the cropping activity to configure the UI. The following sample code uses the basic edition as an example, where the recording UI and cropping UI share the same style. The theme is optional. If you do not specify a theme, the default theme is used. The sample code is as follows:

  1. <style name="AliyunVideoUIStytle" >
  2. <item name="qusnap_background_color">@color/color_bg</item> // The theme color of the background.
  3. <item name="qusnap_tint_color">@color/tint_color</item> // The color of the recording progress bar.
  4. <item name="qusnap_timeline_backgound_color">@color/timeline_backgound_color</item> // The background color of the recording progress bar.
  5. <item name="qusnap_timeline_del_backgound_color">@color/timeline_background_del_color</item> // The color used to identify the position of a recorded video clip on the progress bar when the video clip is deleted.
  6. <item name="qusnap_back_icon">@mipmap/icon_back</item> // The back icon.
  7. <item name="qusnap_switch_light_icon">@drawable/snap_switch_light_selector</item> // The flash selector.
  8. <item name="qusnap_switch_light_icon_disable">@mipmap/icon_light_dis</item>// The icon indicating that the flash is disabled.
  9. <item name="qusnap_switch_light_icon_visibility">visible</item> // The icon that indicates whether to display the flash.
  10. <item name="qusnap_switch_camera_icon">@drawable/snap_switch_camera</item> // The camera selector.
  11. <item name="qusnap_switch_camera_icon_visibility">visible</item> // The icon that indicates whether to display the camera.
  12. <item name="qusnap_beauty_icon">@drawable/snap_switch_beauty</item> // The face filter selector.
  13. <item name="qusnap_beauty_icon_visibility">visible</item> // The icon that indicates whether to display the face filter.
  14. <item name="qusnap_record_icon">@drawable/snap_record_state_selector</item> // The recording selector.
  15. <item name="qusnap_delete_icon">@drawable/snap_icon_delete</item> // The deletion selector.
  16. <item name="qusnap_complete_icon">@drawable/snap_icon_complete</item> // The completion selector.
  17. <item name="qusnap_gallery_icon">@mipmap/icon_default</item> // The album icon.
  18. <item name="qusnap_gallery_icon_visibility">visible</item>// The icon that indicates whether to display the album.
  19. <item name="qusnap_time_txt_color">@android:color/white</item> // The color of the text that describes the recording time.
  20. <item name="qusnap_time_txt_size">15dp</item> // The font size of the text that describes the recording time.
  21. <item name="qusnap_time_txt_visibility">visible</item> // The icon that indicates whether to display the text for describing the recording time.
  22. <item name="qusnap_time_line_pos_y">0dp</item> // The upward offset of the recording progress bar.
  23. <item name="qusnap_crop_sweep_left">@mipmap/icon_sweep_left</item> // The icon that indicates the left border (start point) of the cropping slider.
  24. <item name="qusnap_crop_sweep_right">@mipmap/icon_sweep_right</item> // The icon that indicates the right border (end point) of the cropping slider.
  25. <item name="qusnap_crop_seek_frame">@mipmap/icon_frame</item> // The icon that indicates the position of the playhead on the cropped video.
  26. <item name="qusnap_crop_seek_padding_color">@android:color/holo_red_dark</item> // The color of the top and bottom borders of the cropping slider.
  27. <item name="qusnap_crop_icon_transform">@drawable/snap_transform_selector</item> // The selector for switching the cropping mode.
  28. <item name="qusnap_crop_icon_transform_visibility">visible</item> // The icon that indicates whether to display the cropping mode.
  29. <item name="qusnap_crop_time_txt_color">@android:color/white</item> // The color of the text that describes the duration of the cropped video.
  30. <item name="qusnap_crop_time_txt_size">15dp</item> // The font size of the text that describes the duration of the cropped video.
  31. <item name="qusnap_crop_txt_visibility">visible</item> // The icon that indicates whether to display the text for describing the duration of the cropped video.
  32. </style>