라이브러리 기본 사용법 (게스트)

소스라이브 플레이어의 위치와 레이아웃을 직접 설정하여 웹 페이지에 설치합니다.

컨테이너 레이아웃의 스타일을 직접 지정합니다.

broadcastId 를 지정하여 특정 방송을 실행합니다.

[1단계] 설정

HTML

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

<script>
window.addEventListener('load',()=>{
 window.SauceLiveLib.setInit({ broadcastId: '방송ID를 입력해주세요',id:'player'  }); 
})

</script>

[2단계] Player 설치 하기

소스라이브의 위치와 레이아웃을 설정하여 웹 페이지에 설치한 뒤, 컨테이너 레이아웃의 스타일을 지정합니다.

아래의 코드 적용 시 사용자 정보 전달 없이 플레이어를 실행할 수 있습니다. Guest로 참여한 사용자가 채팅에 참여를 원하시면 고객사에게 문의 주시면 세팅 가능합니다.

<style>
  #player {
    max-width: 360px;
    height: 612px;
    margin: auto;
  }
</style>
<div id="player"></div>
<script> 
  // id 미지정시에는 sauce_live 라는 ID 가 자동지정됩니다.
  window.addEventListener('load',()=>{
   window.SauceLiveLib.load();
})

</script>

예시 가이드

별도 아래와 같이 하나의 페이지에서 세팅도 가능합니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ONLINE STORE</title>
</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>