빠른 시작

FlipFlop Android SDK를 어떻게 사용하는지에 대한 간략한 개요를 제공합니다. 이 문서는 빠르게 SDK 접근하고자 하는 사용자에게 유익합니다. 좀 더 자세한 내용을 알고 싶으면 튜토리얼을 참고하시기 바랍니다.

1. 요구사항

• 안드로이드 SDK 24 이상
• 코틀린 1.6 이상

2. SDK 설치하기

2.1 프로젝트의 루트에 있는 build.gradle에 아래의 코드를 추가합니다.

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

2.2 SDK를 사용할 모듈의 build.gradle에 아래의 코드를 추가합니다.

dependencies {
  implementation(‘com.jocoos.jocoos-public:ff-android-sdk:0.25.0.beta’) {
    transitive = true
  }
}

2.3 앱 권한 설정하기

SDK를 사용하려면 앱 권한이 필요합니다. 이 권한들이 있어야 라이브를 할 수 있습니다. 아래의 내용을 AndroidManifest.xml에 추가합니다.

아래의 권한 추가 후 앱 실행 후 라이브 송출을 하기 전에 관련 권한을 획득해야 합니다.

참고: Android Runtime Permission

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission
    android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    tools:ignore="ScopedStorage" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-feature
    android:name="android.hardware.camera"
    android:required="false" />

3. SDK 초기화하기

SDK에서 제공하는 기능을 사용하기 전에 SDK을 초기화해 주어야 합니다. 초기화는 다음 2단계로 이루어 집니다.

3.1. SDK에 appKey와 appSecret을 전달하기

• APP_KEY와 APP_SECRET은 FlipFlop Dashboard에서 발급받습니다.
• initialize() 함수는 앱 전체에서 한번만 호출되어야 합니다.

class BaseApplication : Application {
    override fun onCreate() {
        super.onCreate()

        // connect to FlipFlop production server
        val ffServerConfig = FFServerConfig(FFServer.PROD)
        FlipFlop.initialize(ffServerConfig, APP_KEY, APP_SECRET)
    }
}

3.2. SDK 사용을 위한 instance를 얻어옵니다.

• USER_ID와 USERNAME와 PROFILE_PHOTO_URL(선택)은 사용하는 서비스의 사용자 정보를 넣어줍니다.
• authorize() 함수는 앱 전체에서 한번만 호출되어야 합니다.

val sdk = FlipFlop.authorize(USER_ID, USERNAME, PROFILE_PHOTO_URL)

4. 라이브 송출하기

4.1. StreamingFragment를 위한 View를 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
   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">

  <com.jocoos.flipflop.view.FFView
     android:id="@+id/liveView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@color/black"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4.2. 라이브 송출을 위한 StreamingFragment를 생성합니다.

• sdk는 3.2에서 호출해준 authorize() 함수의 리턴 값입니다.

class StreamingFragment : Fragment(), FFStreamerListener {
    private var streamer: FFStreamer? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        streamer = sdk.getStreamer()?.apply {
            listener = this@StreamingFragment
            prepare(requireContext(), binding.liveView)
        }
    }

    // FFStreamerListener
    override fun onPrepared() {
        println("onPrepared")
    }

    override fun onStarted() {
        println("onStarted")
    }

    override fun onStopped() {
        println("onStopped")
    }

    override fun onError() {
        println("onError")
    }
    ...
}

4.3. 라이브 송출 시작하기

val title = "title"
val content = "content"
when (val result = sdk.createVideo(title, content)) {
    is FFResult.Success -> {
        streamer.startStreaming(result.value.videoKey)
    }
    is FFResult.Failure -> {
        // error
    }
}

4.4. 라이브 송출 중단하기

streamer?.reset()
sdk.endVideo(videoKey)

5. 라이브 시청하기

5.1. StreamingViewFragment를 위한 View를 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
   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">

  <com.jocoos.flipflop.view.FFView
     android:id="@+id/playerView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@color/black"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

5.2. 라이브를 보기 위한 StreamingViewFragment를 생성합니다.

class StreamingViewFragment : Fragment(), FFPlayerListener {
    private var player: FFPlayer? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        getVideos()
    }

    override fun onResume() {
        super.onResume()
        player?.apply {
            start()
        }
    }

    override fun onPause() {
        super.onPause()
        player?.apply {
            stop()
        }
    }

    private fun getVideos() {
        when (val result = sdk.getVideos(type = VideoType.BROADCASTED, state = VideoState.LIVE)) {
            is FFResult.Success -> {
                // 이 예에서는 라이브 리스트가 하나라도 있음을 가정함니다.
                val video = result.value.content[0]
                watch(video)
            }
            is FFResult.Failure -> {
                // error
            }
        }
    }

    private fun watch(video: Video) {
        player = sdk.getPlayer(requireContext(), video).apply {
            prepare(requireContext(), bind.playerView)
        }
    }

    // FFPlayerListener
    override fun onPrepared(player: FFPlayer) {
        println("onPrepared")
    }

    override fun onStarted(player: FFPlayer) {
        println("onStarted")
    }

    override fun onStopped(player: FFPlayer) {
        println("onStopped")
    }

    override fun onCompleted(player: FFPlayer) {
        println("onCompleted")
    }

    override fun onError(player: FFPlayer, error: FlipFlopException) {
        println("onError")
    }
    ...
}

6. 다음 단계

지금까지 SDK 사용 방법에 대해 간단하게 살펴보았습니다. 더 자세한 내용은 이후의 문서를 참고해 주세요.