エディターの統合

印刷する

エディターの統合

印刷する

記事の要約

この要約は役に立ちましたか?

ご意見ありがとうございます

ライブラリの選択

app/build.gradle に、Liveライブラリ、統合ライブラリ、分割ライブラリのいずれかを選択して追加します。.

統合ライブラリ

dependencies {
    def shoplive_sdk_version = "1.6.0.2"
    
    // Shoplive combined packaging
    implementation "cloud.shoplive:shoplive-sdk-all:$shoplive_sdk_version" // live + short-form + editor
}

分割ライブラリ

dependencies {
    def shoplive_sdk_version = "1.6.0.2"
    def your_exoplayer_version = "2.19.1"
    def your_media3_version = "1.4.1"
    def shoplive_exoplayer_version = your_exoplayer_version + "." + "8"
    def shoplive_media3_version = your_media3_version + "." + "8"
    
    // Shoplive split packaging
    implementation "cloud.shoplive:shoplive-common:$shoplive_sdk_version" // must required
    implementation "cloud.shoplive:shoplive-exoplayer:$shoplive_exoplayer_version" // must required
    // When using media3. Exoplayer will be deprecated soon.
    // https://developer.android.com/guide/topics/media/media3/getting-started/migration-guide
    // implementation "cloud.shoplive:shoplive-media3:$shoplive_media3_version" 
    implementation "cloud.shoplive:shoplive-network:$shoplive_sdk_version" // must required

    implementation "cloud.shoplive:shoplive-filter:$shoplive_sdk_version" // for short-form editor
    implementation "cloud.shoplive:shoplive-video-editor:$shoplive_sdk_version" // for short-form editor  

    implementation "cloud.shoplive:shoplive-sdk-core:$shoplive_sdk_version" // for live player
  
    implementation "cloud.shoplive:shoplive-short-form:$shoplive_sdk_version" // for short-form player
}

Proguard設定の追加

R8 Build を行うと難読化の問題が発生することがあります。以下の内容を追加してください。

-keep public class cloud.shoplive.** { *; }
-dontwarn cloud.shoplive.**
-keep class org.json.** { *; }
-keep class com.google.gson.** { *; }

AccessKey 適用

ShopLiveCommon.setAccessKey("your accessKey")

Access Key
アクセスキーとシークレットキーは、Shoplive担当者から提供されます。

largeHeap 追加

低仕様端末でMemory関連の問題が発生する可能性があります。AndroidManifest.xml以下を追加してください。

<application
    android:largeHeap="true">

JNI コンフリクト

2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs

コンフリクトが発生した場合は、build.gradleに以下の内容を追加してください。

android {
    packagingOptions {
        pickFirst("lib/x86/libc++_shared.so")
        pickFirst("lib/x86_64/libc++_shared.so")
        pickFirst("lib/armeabi-v7a/libc++_shared.so")
        pickFirst("lib/arm64-v8a/libc++_shared.so")
    }
}

Shoplive 動画エディター

data 設定

Video editorのプロパティを設定できます。

fun setData(data: ShopLiveVideoEditorData): ShopLiveVideoEditor

ShopLiveVideoEditorData

Property name	Type	Description
maxVideoDuration	Long	最大動画継続時間 (Default : 60s)
minVideoDuration	Long	最小動画継続時間 (Default : 1s)
isCreatedShortform	Boolean	ショートフォームをすぐに生成できる機能 (Default: true)
outputVideoQuality	ShopLiveVideoEditorVideoQuality	出力ビデオの品質を選択する機能 (Default: NORMAL)
outputResolution	ShopLiveVideoEditorResolution	出力ビデオの解像度を選択できる機能 (Default: RESOLUTION_720)
aspectRatio	ShopLiveShortformEditorAspectRatio	クロップ機能のアスペクト比を選択できる機能
visibleActionButton	ShopLiveShortformEditorVisibleActionButton	Video editorの機能を選択できる機能

ShopLiveShortformEditorAspectRatio

Property name	Type	Description
width	Int	クロップ時のwidth 比率 (Default : 9)
height	Int	クロップ時のheight 比率 (Default : 16)
isFixed	Boolean	クロップ時のアスペクト比を維持する機能 (Default: false)

ShopLiveShortformEditorVisibleActionButton

Property name	Type	Description
isUsedFilterButton	Boolean	Videoのフィルタを使用できる機能 (Default: true)
isUsedVolumeButton	Boolean	Videoの音量を調整するための利用可能な機能 (Default: true)
isUsedPlaybackSpeedButton	Boolean	Videoのスピード調節可能なボタンを使用できる機能 (Default: true)
isUsedCropButton	Boolean	Videoのサイズを調整できるボタンを使用できる機能 (Default: true)

handler 設定

Video editorのプロパティを設定できます。

fun setHandler(handler: ShopLiveVideoEditorHandler): ShopLiveVideoEditor

class ShopLiveVideoEditorHandler {
    open fun onSuccess(videoEditorActivity: ComponentActivity, result: ShopLiveEditorResultData) {
        // Do something
    }
    open fun onError(error: ShopLiveCommonError) {
        // Do something
    }
    open fun onCancel() {
        // Do something
    }
}

ShopLiveEditorResultData

Property name	Type	Description
shortsId	String?	生成されたshortsIdの値（dataの属性isCreatedShortformがtrueのときに確認可能）
videoUri	Uri?	生成された Video uri
coverUri	Uri?	生成された Cover uri
width	Int	生成されたビデオの幅
height	Int	生成されたビデオの高さ
duration	Long	生成された Video の duration

Video editor 実行

Video editorを起動します。

fun start(data: ShopLiveEditorBaseData)

ShopLiveEditorLocalData

ギャラリーのメディアを使用するときに使用します。

data class ShopLiveEditorLocalData(
    override val uri: Uri?,
) : ShopLiveEditorBaseData(uri)

ShopLiveEditorCameraData

カメラを使用するときに使用します。

data class ShopLiveEditorCameraData(
    override val uri: Uri?,
) : ShopLiveEditorBaseData(uri)

example

ShopLiveVideoEditor(activity)
    .setData(ShopLiveVideoEditorData())
    .setHandler(object : ShopLiveVideoEditorHandler() {
        override fun onSuccess(
            videoEditorActivity: ComponentActivity,
            result: ShopLiveEditorResultData
        ) {
            super.onSuccess(videoEditorActivity, result)
        }
        override fun onError(error: ShopLiveCommonError) {
            super.onError(error)
        }
        override fun onCancel() {
            super.onCancel()
        }
    }).start(ShopLiveEditorLocalData(it))

ShopLiveCoverPicker

data 設定

カバーピッカーのプロパティを設定できます。

fun setData(data: ShopLiveCoverPickerData): ShopLiveCoverPicker

ShopLiveCoverPickerData

Property name	Type	Description
shortsId	String?	shortsIdに対応するカバーを更新する機能
aspectRatio	ShopLiveShortformEditorAspectRatio	Crop機能のアスペクト比を選択できる機能
visibleActionButton	ShopLiveCoverPickerVisibleActionButton	Cover pickerの機能を選択できる機能

ShopLiveShortformEditorAspectRatio

Property name	Type	Description
width	Int	Crop width 比 (Default : 9)
height	Int	Crop height 比 (Default : 16)
isFixed	Boolean	Crop アスペクト比を維持する機能 (Default: false)

ShopLiveShortformEditorVisibleActionButton

Property name	Type	Description
isUsedCropButton	Boolean	Videoのサイズを調整できるボタンを使用できる機能 (Default: true)

handler 設定

カバーピッカーのプロパティを設定できます。

fun setHandler(handler: ShopLiveCoverPickerHandler): ShopLiveCoverPicker

class ShopLiveCoverPickerHandler {
    open fun onSuccess(coverPickerActivity: ComponentActivity, result: ShopLiveEditorResultData) {
        // Do something
    }
    open fun onError(error: ShopLiveCommonError) {
        // Do something
    }
    open fun onCancel() {
        // Do something
    }
}

ShopLiveEditorResultData

Property name	Type	Description
shortsId	String?	生成されたshortsIdの値（dataの属性shortsIdを入力すると確認可能）
videoUri	Uri?	生成された Video uri
coverUri	Uri?	生成された Cover uri
width	Int	生成されたビデオの幅
height	Int	生成されたビデオの高さ
duration	Long	生成された Video の duration

Cover picker 実行

Cover pickerを実行します。

fun start(data: ShopLiveEditorBaseData)

ShopLiveEditorLocalData

デバイスに保存されている画像を使用するときに使用します。

data class ShopLiveCoverPickerLocalData(
    val uri: Uri?,
) : ShopLiveCoverPickerBaseData()

ShopLiveCoverPickerUrlData

外部Url画像を使用してカバーを選択します。 ex) Shortform Coverを選択

data class ShopLiveCoverPickerUrlData(
    val url: String?,
) : ShopLiveCoverPickerBaseData()

example

ShopLiveCoverPicker(videoEditorActivity)
    .setData(ShopLiveCoverPickerData(result.shortsId))
    .setHandler(object : ShopLiveCoverPickerHandler() {
        override fun onSuccess(
            coverPickerActivity: ComponentActivity,
            result: ShopLiveEditorResultData
        ) {
            super.onSuccess(coverPickerActivity, result)
        }
        override fun onError(error: ShopLiveCommonError) {
            super.onError(error)
        }
    })
    .start(ShopLiveCoverPickerLocalData(result.videoUri))

アプリケーションの使い方

Gallery → Video editor → Cover picker

private fun startVideoEditor() {
    activity.activityResultRegistry
        .register(
            "KEY_SHOPLIVE_SHORTFORM_EDITOR_VISUAL_MEDIA",
            ActivityResultContracts.PickVisualMedia()
        ) {
            if (it != null) {
                ShopLiveVideoEditor(activity)
                    .setData(ShopLiveVideoEditorData())
                    .setHandler(object : ShopLiveVideoEditorHandler() {
                        override fun onSuccess(
                            videoEditorActivity: ComponentActivity,
                            result: ShopLiveEditorResultData
                        ) {
                            super.onSuccess(videoEditorActivity, result)
                            ShopLiveCoverPicker(videoEditorActivity)
                                .setData(ShopLiveCoverPickerData(result.shortsId))
                                .setHandler(object : ShopLiveCoverPickerHandler() {
                                    override fun onSuccess(
                                        coverPickerActivity: ComponentActivity,
                                        result: ShopLiveEditorResultData
                                    ) {
                                        super.onSuccess(coverPickerActivity, result)
                                        videoEditorActivity.finish() // Remove video editor
                                        coverPickerActivity.finish() // Remove cover picker
                                    }
                                    override fun onError(error: ShopLiveCommonError) {
                                        super.onError(error)
                                        handler.onError(error)
                                    }
                                })
                                .start(ShopLiveCoverPickerLocalData(result.videoUri))
                        }
                        override fun onError(error: ShopLiveCommonError) {
                            super.onError(error)
                            handler.onError(error)
                        }
                        override fun onCancel() {
                            super.onCancel()
                            startVideoEditor() // Retry gallery
                        }
                    }).start(ShopLiveEditorLocalData(it))
            } else {
                handler.onCancel()
            }
        }.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.VideoOnly))

What's Next

Editor UI Customize

ライブラリの選択
Shoplive 動画エディター
ShopLiveCoverPicker
アプリケーションの使い方