라이브러리 설치

라이브러리 설치 — 소스라이브 플레이어

스크립트 한 줄 삽입부터 플레이어 첫 실행까지, 게스트 모드 기준의 가장 기본적인 연동 방법을 안내합니다.

⏱ 예상 소요 시간: 10분

📋 사전 조건: 소스라이브 어드민에서 라이브 ID 확인

전체 동작 흐름

플레이어 초기화부터 실행까지의 전체 호출 순서입니다. 선택 항목은 필요한 경우에만 추가하세요.

① setInit()

→

② setMemberObject() / setMemberToken() 선택

→

③ setFloatingType() 선택

→

④ load()

스크립트 설치

플레이어를 표시할 HTML 페이지의 <head> 또는 <body> 하단에 아래 스크립트를 추가합니다.

HTML

<script type="text/javascript"
        src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>

💡 스크립트는 외부 CDN에서 로드됩니다. 별도의 패키지 설치나 빌드 과정 없이 바로 사용할 수 있습니다.

컨테이너 추가

플레이어를 표시할 <div> 컨테이너를 HTML에 추가하고 CSS로 크기를 지정합니다.

HTML + CSS

<style>
  #sauce_live {
    max-width: 360px;
    height: 612px;
    margin: auto;
  }
</style>

<!-- 플레이어를 표시할 컨테이너 -->
<div id="sauce_live"></div>

⚡ 권장 비율 — 360 × 612px (9:16). 소스라이브 플레이어는 세로형 영상 기준으로 설계되어 있습니다. 컨테이너 ID를 별도로 지정하지 않으면 sauce_live가 기본값으로 사용됩니다.

라이브러리 초기화 — setInit()

라이브 ID를 포함한 초기 설정값을 setInit()으로 전달합니다. 페이지 로드 이후에 실행해야 합니다.

JavaScript

window.addEventListener('load', () => {
  window.SauceLiveLib.setInit({
    broadcastId: '라이브ID를 입력해주세요',  // 필수
    // id: 'sauce_live',             // 선택 — 컨테이너 ID (기본값: 'sauce_live')
    // env: 'stage',                 // 선택 — stage 테스트 시 사용 (기본값: 'production')
  });
});

파라미터	타입	필수	기본값	설명
broadcastId	String	필수	—	어드민에서 확인한 라이브 ID 라이브 ID는 라이브 편성과 승인 완료 후, 편성표의 송출 정보에서 확인할 수 있습니다.
id	String	선택	`sauce_live`	플레이어를 표시할 컨테이너 요소의 ID
env	String	선택	`'production'`	stage 환경 테스트 시 `'stage'`로 설정합니다
platform	String	선택	—	웹빌더 연동 플랫폼 식별값 (예: `'CAFE24'`)

💡 stage 라이브를 테스트할 때는 env: 'stage'를 함께 전달하세요. 전체 파라미터 상세는 파라미터 레퍼런스를 참고하세요.

▲ 어드민 분석 〉 라이브 〉 상세 〉 송출정보에서 라이브 ID를 확인·복사

플레이어 실행 — load()

setInit() 호출 후 load()를 실행하면 플레이어가 지정한 컨테이너에 표시됩니다.

JavaScript

window.addEventListener('load', () => {
  window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
  window.SauceLiveLib.load(); // 플레이어를 컨테이너에 표시합니다
});

전체 완성 예시

위 단계를 하나의 HTML 파일로 구성한 완성 예시입니다. broadcastId만 교체하면 바로 실행할 수 있습니다.

HTML — 완성 예시

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>소스라이브 플레이어 테스트</title>
  <style>
    #sauce_live { max-width: 360px; height: 612px; margin: auto; }
  </style>
</head>
<body>
  <div id="sauce_live"></div>
</body>
<script type="text/javascript"
        src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>

window.addEventListener('load', () => {
  window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
  window.SauceLiveLib.load();
});
</script>
</html>

앱 WebView 환경에서 사용하는 경우

앱 내 WebView에 플레이어를 실행할 때는 iOS·Android 각각에서 인라인 재생과 자동 재생을 허용해야 합니다. 이 설정이 없으면 영상이 재생되지 않습니다.

🍎 iOS WKWebView 🤖 Android WebView

Swift

let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: rect, configuration: configuration)

Kotlin

webView.getSettings().setMediaPlaybackRequiresUserGesture(false)

다음 단계

플레이어가 정상 실행되었다면 필요한 기능을 순서대로 추가하세요.

🔐

사용자 인증

게스트 모드·간편·JWT 인증 중 서비스에 맞는 방식으로 로그인 사용자 정보를 플레이어에 연동합니다.

가이드 보기 →

🪄

플로팅 플레이어

페이지 이동 시에도 플레이어를 작은 화면으로 계속 시청할 수 있는 플로팅 플레이어를 구현합니다.

가이드 보기 →

📄

파라미터 레퍼런스

setInit, setFloatingType, setMemberObject 등 각 함수의 파라미터 타입과 전체 설명을 확인합니다.

레퍼런스 보기 →

다음 단계

🔐 사용자 인증 — 로그인 사용자 정보를 플레이어에 연동하기

→