방송 송출하기

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

라이브 방송 하기

1. 라이브를 하기 위한 instance 생성

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

// 라이브 방송 객체 생성
const streamer = sdk.getStreamer();

Streamer 객체 기능 명세서

필드명	파라미터	콜백	설명
prepare(video)	video: HTMLVideoElement	onPrepare()	송출할 비디오 태그를 받아 WebRTC에 필요한 정보를 준비
start(title, content, goods, options)	video: string content?: string goods?: GoodsInfo options?: Options	onStart(title)	라이브 송출 시작
stop(keepAlive)	keepAlive?: boolean	onStop()	라이브 송출 종료 keepAlive 활성시 즉시 종료되지 않고 10분간 비활성 상태 후 자동종료 (10분간 재진입가능) keepAlive 비활성시 즉시 종료
sendMessage(text, customType, data)	text: string customType?: string data?: string	onStop()	메시지 전송 함수 text: 보낼 메시지 customType: 사용자가 임의로 지정한 보조 메시지 타입 data: 메시지와 함께 전달할 추가 데이터
reset()	-	-	WebRTC 설정 초기화

2. 라이브 이벤트 콜백 등록

다음으로는 반환받은 Streamer 인스턴스에 라이브를 할 때 사용할 이벤트 콜백을 등록해야합니다.
- onPrepare()
  방송이 준비될 때 이벤트이며, Streamer 객체의 prepare() 함수 실행시 콜백으로 실행됩니다.
- onStart(title)
  방송을 시작할 때 이벤트이며, Streamer 객체의 start() 함수 실행시 콜백으로 실행됩니다.
  title은 start(title)함수에서 첫번째 매개변수로 설정했던 송출한 방송의 제목입니다.
- onStop()
  방송이 중지될 때 이벤트이며, Streamer 객체의 stop() 함수 실행시 콜백으로 실행됩니다.
- onConnectSuccess()
  채팅방에 연결 성공하면 발생하는 이벤트이며, Streamer 객체의 start() 함수 실행시 채팅방에 연결되면 콜백으로 실행됩니다.
- onConnectFailure()
  채팅방에 연결 실패하면 발생하는 이벤트이며, Streamer 객체의 start() 함수 실행시 채팅방에 연결에 실패하면 콜백으로 실행됩니다.
- onChatReceived(message)
  Streamer 객체의 sendMessage 함수를 이용해서 메시지 전송시 혹은 메시지 수신시 콜백으로 실행됩니다.

// 라이브 방송 이벤트 콜백 등록
const StreamerDelegate = {
    // 방송 준비 이벤트
    onPrepare: () => {},
    // 방송 시작 이벤트
    onStart: (title) => {},
    // 방송 중지 이벤트
    onStop : () => {},
    // 방송 채팅 연결 성공 이벤트
    onConnectSuccess: () => {},
    // 방송 채팅 연결 실패 이벤트
    onConnectFailure: () => {},
}

streamer.delegate = StreamerDelegate

3. 라이브 방송송출

라이브 송출하기에 앞서, 우선 송출 화면을 보여줄 video tag의 element를 받아와서 streamer.prepare 함수에 video element를 전달해 SDK에 WebRTC로 송출할 화면을 설정합니다.
송출할 화면이 준비완료 되면 streamer.start함수를 실행해 송출을 시작합니다. 성공적으로 start 함수가 실행되면 이제 등록한 video elment에 WebRTC로 송출한 방송 화면이 나오는 것을 볼 수 있습니다. 또한, start 함수는 송출로 생성된 비디오 객체를 반환합니다.

// 카메라프리뷰 및 마이크 시작 및 방송 준비
const previewVideo = document.getElementById("screenVide");
streamer.prepare(previewVideo)

// 방송을 시작합니다. 방송 타이틀과 내용 입력. onPrepare 이후에 호출해야 함
const video = streamer.start(title: TITLE, content: CONTENT)

비디오 객체

~~비디오 객체 필드 상의~~

필드명	타입	설명
stream_id	string	방송 송출 식별 ID
video_key	string	비디오 식별 ID
user_id	string	유저 식별 ID
url	string	방송 송출 URL
thumbnail_path	string	방송 썸네일 URL Path
thumbnail_url	string	방송 썸네일 URL
preview_url	string	방송 미리보기 URL
preview_range	string	방송 미리보기 재생구간
title	string	방송 제목
content	string	방송 내용
type	string	방송 타입 "BROADCASTED" or "UPLOAD"
state	string	"CREATE" or "LIVE" or "VOD"
locked	boolean	방송 Block 여부
duration	number	비디오 길이
ingestion_type	string	방송 송출 입력 타입
output_type	string	방송 송출 출력 타입
visibility	string	방송 시청자에게 노출 여부 "PUBLIC" or "PRIVATE"
data	string	커스텀 데이터
heart_count	number	하트 클릭 수
watch_count	number	동시 시청 수
max_watch_count	number	최대 시청수
view_count	number	총 시청수
like_count	number	좋아요 수
created_at	number	방송 생성 시간
user	string	"user" : { "user_id":"방송 송출 유저 ID", "username":"방송 송출 유저 이름", "profile_photo_url":"방송 송출 유저 사진" }
download_url	string	방송 Download URL

4. 라이브 방송송출 중단

송출한 방송을 종료하고 싶으면 streamer.stop 함수를 사용해서 방송을 종료할 수 있습니다. FlipFlop에서는 실수로 방송 종료 버튼을 눌렀을 경우를 대비하여 10분간 송출 비활성 기능을 제공하고 있습니다. 비활성된 송출은 다시 재송출이 가능합니다. ~~(재송출 가이드라인)~~

송출 종료 함수에 매개변수로 keepAlive = true를 전달하면 라이브를 지정된 시간(10분)이 지나야 라이브가 끝난 것으로 처리 됩니다. (기본값: false)

// 방송을 종료합니다.
// keepAlive = false (기본값): 바로 송출 종료
// keepAlive = true: 10분 후 라이브 종료
streamer.stop(keepAlive)

// 라이브 방송에서 사용한 WebRTC 설정 초기화
streamer.reset()

5. 채팅 메시지

FlipFlop에서는 Streamer 객체의 sendMessage를 통해 채팅 메시지 전송 기능을 사용할 수 있습니다.
~~customType 가이드라인~~

streamer.sendMessage(text: "Blar Blar Blar....", customType?)