방송 시청하기

FlipFlop 라이브러리는 Player객체를 반환 받아 쉽게 라이브 시청할 수 있습니다. 자신의 앱에 라이브 시청 기능을 추가 하고 싶으시다면 아래 단계를 따라 진행하시기 바랍니다.

방송 보기

1. 방송을 보기 위한 instance 생성

우선, 라이브를 시작하기 앞서 SDK에서 Player 인스턴스를 반환받습니다. Player 객체는 방송 시청, 메시지 보내기 등 방송 시청자의 기능들을 담고 있습니다.

// 플레이어 객체 생성
const player = sdk.getPlayer(videoKey)

Player 객체 기능 명세서

2. 방송보기 이벤트 콜백 등록

• 방송을 시청하기 앞서, Player 인스턴스를 통해 방송을 시청할 때 사용할 이벤트 콜백을 등록해야합니다.
  • onPrepare()
    방송 시청 기능이 준비될 때 이벤트이며, Player 객체의 prepare() 함수 실행시 콜백으로 실행됩니다.
  • onStart()
    방송 시청을 시작할 때 이벤트이며, Player 객체의 start() 함수 실행시 콜백으로 실행됩니다.
    
  • onStop()
    방송 시청을 중지할 때 이벤트이며, Player 객체의 stop() 함수 실행시 콜백으로 실행됩니다.
  • onConnectSuccess()
    채팅방에 연결 성공하면 발생하는 이벤트이며, Player 객체의 start() 함수 실행시 채팅방에 연결되면 콜백으로 실행됩니다.
  • onConnectFailure()
    채팅방에 연결 실패하면 발생하는 이벤트이며, Player 객체의 start() 함수 실행시 채팅방에 연결에 실패하면 콜백으로 실행됩니다.
  • onChatReceived(message)
    Player 객체의 sendMessage 함수를 이용해서 메시지 전송시 혹은 메시지 수신시 콜백으로 실행됩니다.
  • onChatMessgeReceived(messages)
    Player 객체의 getPastMessages 함수 혹은 getChatMessages 함수를 통해 메시지 리스트를 가져올 시 콜백으로 실행됩니다.
  • onDisconnect()
    Player 객체에서는 disconnect 함수를 사용하면 명시적으로 채팅방을 나갈 수 있습니다. onDisconnect 함수는 disconnect 함수가 실행시 콜백으로 실행됩니다.

 const PlayerDelegate = {
    // 방송 준비 이벤트
    onPrepare: (player) => {},
    // 방송 시작 이벤트
    onStart: (player) => {},
    // 방송 중지 이벤트
    onStop: () => {},
    // 채팅 메시지를 주고 받을 때 발생하는 이벤트 콜백
    onChatReceived: (message) => {},
    // 방송 채팅 메시지 리스트를 가저오는 이벤트 콜백
    onChatMessgeReceived: (messages) => {},
    // 방송 채팅 연결 성공 이벤트
    onConnectSuccess: () => {},
    // 방송 채팅 연결 실패 이벤트
    onConnectFailure: () => {},
    // 방송 채팅 끊기 이벤트
    onDisconnect: () => {}
}

// 플레이어 준비
player.prepare(PlayerDelegate)

3. 방송보기 시작

• 방송 시청을 위한 콜백을 등록하여 준비가 완료되면 Player 객체의 start 함수를 실행하여 방송 시청을 시작할 수 있습니다.
• 방송을 시청할 때 Streamer 같은 특정 사용자는 방송의 조회수나 총시청자수에 포함하고 싶지 않는 경우가 있습니다. start 함수는 isObserver 매개변수를 선택적으로 넣을 수 있습니다. isObserver는 기본값으로 false로 설정되어 있지만 true로 설정시 시청자는 방송 조회수에 포함되지 않습니다.

// 플레이어 시작
// isObserver: 스트리머 혹은 어드민 계정일 경우 true (default: false)
player.start(isObserver)

4. 방송보기 중지

• 방송 시청을 중지하고 싶으면 Player 객체의 stop 함수를 사용해서 방송 시청을 중단할 수 있습니다. stop 함수를 실행하는 것 만으로도 방송 시청을 중지할 수 있지만 WebRTC에 대한 리소스는 계속 실행되기 때문에 stop 함수와 같이 reset 함수도 실행하는 것을 권장합니다.

// 플레이어 중지
player.stop()

// 방송 시청에서 사용한 WebRTC 설정 초기화
player.reset()

5. 채팅 메시지

메시지 전송

• FlipFlop에서는 Player 객체의 sendMessage를 통해 채팅 메시지 전송 기능을 사용할 수 있습니다.

• customType 가이드라인

player.sendMessage(text: "Blar Blar Blar....", customType)

메시지 수신

메시지를 수신하면 Player 객채에 등록한 onChatReceived 콜백을 통해 처리합니다. 수신한 메시지는 messageType과 sendMessage 함수에 매개변수로 전달한 customType에 따라 각 메시지에 대한 로직을 분기할 수 있습니다.

const PlayerDelegate = {
  // ...
  onChatReceived: (message) => {
    if (message.message_type === "MESSAGE") {
      switch (message.custom_type) {
      // 일반 사용자가 보낸 메시지에 대한 분기처리
      }
    } else if (message.message_type === "ADMIN") {
      switch (message.custom_type) {
      // 관리자가 보낸 메시지에 대한 분기처리
      }
    }
  }
}

메시지 리스트 가져오기

getPastMessages 와 getChatMessages 함수를 실행하면 Player 객채에 등록한 콜백 중 onChatMessgeReceived를 통해 들어온 메시지를 처리해야 합니다.

// 방송 진입 시점 이전 채팅 히스토리 가져오기: ChatHistory[]
const histories = await player.getPastMessages()

// 방송 채팅 메시지 가져오기
const messages = await player.getChatMessages(option)

채팅 메시지 가져오기 옵션 (getChatMessages option)

message_types 설명