Editor 연동

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

라이센스

Shoplive Editor는 FFmpeg Library를 사용하고 있습니다.

LGPL 라이브러리를 사용하고 있음을 명시해야 합니다.

자세한 내용은 LGPL 라이선스 전문을 참조하시기 바랍니다. Link

코드 설치

CocoaPods

Podfile에 아래 코드를 추가하세요.

source 'https://github.com/CocoaPods/Specs.git'

    # Match the Version with the Project's Minimum Supported Version
    # Shoplive iOS SDK requires iOS 11.0 or later.
    platform :ios, '11.0'
    use_frameworks!

    # Set the Project Target for Shoplive iOS SDK Installation
    target 'ShortformProj' do
        pod 'ShopliveShortformEditorSDK', '1.8.6'
      	pod 'ShopliveSDKCommon', '1.8.6'
    end

Swift Package Manager

Package Dependencies 에 다음 내용을 추가하세요.

dependencies: [
    .package(url: "https://github.com/shoplive/shortform-ios", .exact(from: "1.8.6")),
    .package(url: "https://github.com/shoplive/common-ios", .exact(from: "1.8.6"))
]

설치가 실패한다면 캐시를 지웁니다.
터미널에서 다음 커맨드를 실행하여, 캐시를 삭제해주세요.
rm -rf ~/Library/Caches/org.swift.swiftpm
rm -rf ~/Library/org.swift.swiftpm

ShopLiveShortformEditorSDK는 FFMpeg Library에 의존성을 가지고 있습니다.
터미널에서 다음 커맨드를 실행하여, 캐시를 삭제해주세요.
아래의 FFMpeg SPM 혹은 원하시는 버전의 FFMpeg Library를 추가해주세요
dependencies: [
    .package(url: "https://github.com/tylerjonesio/ffmpeg-kit-spm/", .branch(from: "main"))
]

AccessKey 적용

import ShopliveSDKCommon
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
      ShopLiveCommon.setAccessKey(accessKey: "YOUR_ACCESSKEY") //required
      return true
    }
}

Access Key
Access key와 secret key는 샵라이브 담당자를 통해 확인할 수 있습니다.

ShopLiveEditor 적용

ShopLiveMediaPicker

해당 클래스로 Editor의 기능을 사용할 경우, ShopLive에서 자체 제작한 AlbumPicker를 사용할 수 있습니다.

import ShopliveSDKCommon
import ShopLiveShortformEditorSDK 

class ViewController : UIViewController {
 
    func startMediaPicker() {
        ShopLiveMediaPicker.shared
            .setDelegate(self)
            .setPermissionHandler(nil)
            .build(type:.video) { [weak self] mediaPicker in 
                self.present(mediaPicker,aniated : true)
            }

    }
}
extension ViewController : ShopLiveMediaPickerDelegate { 
    func onShopLiveMediaPickerError(error : ShopLiveCommonError) {

    }
    
    func onShopLiveMediaPickerDidPickVideo(absoluteUrl: URL, relativeUrl: URL) {
        
    }
    
    func onShopLiveMediaPickerDidPickImage(imageUrl: URL) {
        print("Picker Image Selected image: \(imageUrl)")
        let image = UIImage(contentsOfFile: imageUrl.path)
        coverPickerImageResultPopUp.setResultImage(image: image)
        coverPickerImageResultPopUp.alpha = 1
        ShopLiveMediaPicker.shared.close()
    }

    func onShopLiveMediaPickerCancelled() { 

    }
}

ShopLiveVideoEditor

해당 클래스로 Editor의 기능을 사용할 경우, ShopLive에서 자체 제작한 VideoEditor를 사용할 수 있습니다.

import ShopliveSDKCommon
import ShopLiveShortformEditorSDK 

class ViewController : UIViewController {
 
    func startVideoEditor() {
        let cropOption = ShopliveVideoEditorAspectRatio(width: OptionSettingModel.editorWidth,
                                                        height: OptionSettingModel.editorheight,
                                                        isFixed: OptionSettingModel.editorIsFixed)

        let trimOption = ShopliveVideoEditorTrimOption(minVideoDuration: 3,
                                                       maxVideoDuration: 90)
        
        let videoOutPutOption = ShopLiveShortformEditorVideoOuputOption(videoOutputQuality: .max,
                                                                        videoOutputResoltuion: ._1080)
        
        
        let visibleContents = ShopLiveShortFormEditorVisibleContent(isDescriptionVisible: OptionSettingModel.editorShowDescription,
                                                                    isTagsVisible: OptionSettingModel.editorShowTags,
                                                                    editOptions: [.volume])
        
        
        ShopliveVideoEditor.shared
            .setPermissionHandler(nil)
            .setConfiguration(.init(videoCropOption: cropOption,
                                    videoOutputOption: videoOutPutOption,
                                    videoTrimOption: trimOption,
                                    visibleContents: visibleContents))
            .setDelegate(self)
            .build(data: .init(videoUrl: localUrl,isCreatedShortform: true), completion: { [weak self] editorViewController in
                self.present(editorViewController,animated : true)
            })
    }
}
extension ViewController : ShopLiveVideoEditorDelegate { 
    func onShopLiveVideoEditorError(error : ShopLiveCommonError) {

    }
    
    func onShopLiveVideoEditorVideoConvertSuccess(videoPath : String) {
        
    }
    
    func onShopLiveVideoEditorUploadSuccess(shortsId : String) {
        ShopLiveMediaPicker.shared.close()
    }

    func onShopLiveVideoEditorCancelled() { 

    }
}

ShopLiveCoverPicker

해당 클래스로 Editor의 기능을 사용할 경우, ShopLive에서 자체 제작한 CoverPicker를 사용할 수 있습니다.
CoverPicker는 생성한 숏폼의 커버 사진을 바꿀수 있습니다.

import ShopliveSDKCommon
import ShopLiveShortformEditorSDK 

class ViewController : UIViewController {

    func startCoverPicker() {
        let cropOption = ShopLiveShortFormEditorAspectRatio(width: 9,
                                                        height: 16,
                                                        isFixed: true)
        
        let visibleActionButton = ShopLiveCoverPickerVisibleActionButton(editOptions: [.crop])
        
        ShopLiveCoverPicker.shared
            .setConfiguration(.init(cropOption: cropOption,
                                    visibleActionButton: visibleActionButton))
            .setDelegate(vc)
            .build(data: .init(videoUrl: videoUrl), completion: { [weak self] coverPicker in
                self.present(coverPicker, animated : true)
            })
    }
}
extension ViewController : ShopLiveCoverPickerDelegate { 
    func onShopLiveCoverPickerError(error : ShopLiveCommonError) {

    }
    
    func onShopLiveCoverPickerCoverImageSuccess(image : UIImage?) {
        
    }
    
    func onShopLiveCoverPickerUploadSuccess(shortsId : String) {
        ShopLiveMediaPicker.shared.close()
    }

    func onShopLiveCoverPickerCancelled() { 

    }
}

ShopLiveShortformUploader

해당 클래스로 Editor의 기능을 사용할 경우, ShopLive에서 자체 제작한 VideoEditor를 사용할 수 있고, 업로드 기능, 웹뷰와의 연동이 가능합니다.

import ShopliveSDKCommon
import ShopLiveShortformEditorSDK 

class ViewController : UIViewController {

    func startShortformUploader() {

    let uploaderData: ShopLiveShortformUploaderData = 
                      ShopLiveShortformUploaderData(shortsId: nil,
                                                    ui: .init(hashTag: true,
                                                    videoChange: false,
                                                    rating: false),
                                                    tags: [],
                                                    products: .init(sku: nil,
                                                                    url: nil,
                                                                    productId: nil,
                                                                    customProductId: nil)
                                                    )

        ShopLiveShortformUploader.shared
            .setUploaderData(uploaderData)
            .setDelegate(self)
            .build(completion: { [weak self] shortformUploaderViewController in
                guard let self = self else { return }
                let view = UINavigationController(rootViewController: shortformUploaderViewController)
                view.modalPresentationStyle = .fullScreen
                self.vc?.present(view, animated: true)
            })
    }
}

ShopLiveShortformUploaderData

프로퍼티명	타입	설명	기본값
shortsId	String?	업로드한 Shorts를 수정을 원할 때 shortsId를 추가합니다.	nil
ui	ShopLiveUgcUploaderUiData	웹뷰 업로드 UI를 컨트롤 할 수 있는 struct 입니다.	default
tags	[String]	Shortform 업로드시 기본값으로 들어갈 태그를 세팅합니다.	[]
products	[ShopLiveConversionProductData]	Shortform 업로드시 기본값으로 들어갈 상품을 세팅합니다.	[]

ShopLiveUgcUploaderUiData

프로퍼티명	타입	설명	기본값
hashTag	Bool	해시태그 UI 사용 여부	true
videoChange	Bool	비디오 변경 UI 사용 여부	false
rating	Bool	별점 UI 사용 여부	false

ShopLiveConversionProductData

프로퍼티명	타입	설명	기본값
sku	String?	sku 값으로 상품을 표시합니다.	nil
url	String?	URL로 상품을 표시합니다.	nil
productId	String?	productId 로 상품을 표시합니다.	nil
customProductId	String?	customProductId 로 상품을 표시합니다.	nil

What's Next

Delegates

라이센스
코드 설치
AccessKey 적용
ShopLiveEditor 적용