WEB 개발 가이드

WEB 개발 가이드 — 소스라이브 플레이어

Overview 소스라이브 플레이어로 할 수 있는 것

스크립트 한 줄로 자사몰 페이지에 라이브 방송을 붙입니다.
시청·채팅·상품·쿠폰은 플레이어 안에 들어 있어, 자사몰은 실행과 이벤트 처리만 맡습니다.

라이브·VOD 재생 — 진행 중인 방송과 지난 방송을 같은 방법으로 띄웁니다
채팅 — 게스트도 참여할 수 있고, 회원은 발급된 닉네임으로 표시됩니다
상품 목록 — 방송 중 상품을 보여 주고 자사몰 구매 화면으로 보냅니다
쿠폰·리워드 — 시청자가 받은 쿠폰과 달성한 리워드를 자사몰이 처리합니다
플로팅 플레이어 — 다른 페이지로 이동해도 작은 창으로 시청이 이어집니다
회원 연동 — 토큰 하나로 회원 이름·이벤트 참여가 연결됩니다

Step 0 플레이어 첫 실행

스크립트 한 줄과 함수 두 번 호출로 플레이어가 뜹니다. broadcastId에 소스 어드민에서 확인한 라이브 ID를 넣습니다.

HTML — 최소 구성

<script src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<div id='sauce_live'></div>

<script>

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

💡 라이브러리 방식의 최소 구성입니다. 사용자 인증·브릿지 이벤트·플로팅 플레이어는 이 위에 얹습니다. 스크립트를 넣기 어려운 환경이라면 아래 URL 방식을 확인하세요.

Step 1 연동 방식

소스라이브 웹 플레이어는 두 가지 방식으로 연동할 수 있습니다. 대부분의 경우 라이브러리 방식을 권장합니다.

라이브러리 방식

JS 라이브러리를 삽입해 자사몰 페이지에 플레이어를 직접 구성합니다. 인증·플로팅·브릿지 이벤트 등 부가 기능을 함께 사용할 수 있습니다.

작업 순서 확인 ↓

🔗

URL 방식

어드민에서 발급된 라이브 URL로 사용자를 이동시켜 플레이어를 실행합니다. JS 삽입 없이 빠르게 시작할 수 있습니다.

작업 순서 확인 ↓

	📦 라이브러리 방식	🔗 URL 방식
플레이어 위치	자사몰 페이지 내 직접 삽입	플레이어 기본 화면으로 이동
개발 난이도	보통	낮음
사용자 인증	게스트 모드 / 간편 인증 / JWT / 플레이어 내 로그인 선택 가능	게스트 모드 / JWT (쿼리 파라미터 방식) / 플레이어 내 로그인 선택 가능
브릿지 이벤트	지원 ✓	미지원 ✗
플로팅 기능	지원 ✓	미지원 ✗
적합한 상황	자사몰 내 플레이어 임베드, 상품·쿠폰 이벤트 처리 필요 시	빠른 연동, 외부 채널 링크 공유 시