4. 라이브 송출하기

4.1. 라이브 송출 화면을 위한 Fragment와 xml을 생성하기

라이브 송출 화면을 위한 StreamingFragment를 생성하고 StreamingFragment의 화면에 대응되는 streaming_fragment.xml을 생성합니다.

4.1.1. streaming_fragment.xml을 생성합니다.

FlipFlop Android SDK에서는 카메라 화면을 표시 위한 View를 제공합니다. View의 이름은 FFView입니다: com.jocoos.flipflop.view.FFView. 카메라 화면과 함께 다른 View도 보여주고 싶은 경우 원하는 위치에 FFView를 추가하면 됩니다. 아래 예는 전체 화면을 FFView 혼자 차지하고 있는 것입니다.

<?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.1.2. 송출 화면 제어를 위한 StreamingFragment를 생성하고 FFStreamer를 초기화 합니다.

아래의 예에서 변수 sdk는 3.2에서 호출해준 authorize() 함수의 리턴 값입니다. sdk의 getStreamer() 함수를 호출하여 FFStreamer를 생성한 후 FFStreamer의 prepare() 함수를 호출하여 FFStreamer에게 카메라 화면을 FFView에 표시하라고 알려줍니다. 비디오 관련 설정을 기본 값을 사용하지 않고 다른 값을 사용하고 싶으면 prepare() 함수의 config 파라메터를 사용하면 됩니다.

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        streamer = sdk.getStreamer()?.apply {
            prepare(requireContext(), binding.liveView, FFStreamerConfig(videoBitrate = 2000 * 1024, fps = 30, sampleRate = 44100))
        }
    }
}

• FFStreamerConfig에서 설정할 수 있는 내용은 다음과 같습니다.

4.1.3. Fragment에 FFStreamerListener를 연결합니다.

FFStreamer에 리스너를 연결해 두면 상태 변경에 따라 리스너가 호출이 됩니다.

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, FFStreamerConfig(videoBitrate = 2000 * 1024, fps = 30, sampleRate = 44100))
        }
    }

    // FFStreamerListener
    override fun onPrepared() {
        // live has been prepared
    }

    override fun onStarted() {
        // live has been started
    }

    override fun onStopped() {
        // live has been stopped
    }

    override fun onChatMessageReceived(item: FFMessage) {
        // received chat message
    }

    override fun onVideoBitrateChanged(newBitrate: Int) {
        // bitrate is changed
    }

    override fun onError(error: FlipFlopException) {
        // error happened
    }
}

FFStreamerListener의 내용은 다음과 같습니다.

4.2. 라이브 송출 시작하기

FlipFlop의 모든 라이브는 비디오 키를 ID로 사용하기 떄문에 라이브를 송출하려면 비디오 키가 필요합니다. createVideo() 함수를 호출하여 비디오 키를 얻은 후 얻어온 비디오 키로 startStreaming() 함수를 호출합니다. createVideo() 함수 호출할 때 라이브의 제목이나 내용을 지정하고 싶으면 파라메터로 추가합니다.(제목이나 내용을 지정하면 시청자 리스트에 제목이나 내용도 같이 표시해 줄 수 있습니다.)

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

4.3. 라이브 썸네일 추가하기

앞에서 라이브를 시작할 때 제목과 내용을 입력하는 예를 보여줬습니다. 이에 더해 updateVideoThumbnail() 함수를 사용하여 라이브에 대한 썸네일을 설정할 수 있습니다.

val videoKey = "1234"
val thumbnail: File = "image_file"
sdk.updateVideoThumbnail(videoKey, thumbnail)