라이브 페이지와 같이 사용하기

소스라이브 플레이어를 라이브러를 통해서 구현한 케이스에 대한 예시 코드입니다.

소스라이브 플레이어 코드를 미리 구성해둡니다. (handleMessage 에 대해서는 소스라이브 payload 정의 를 참고해서 작성해주세요. 고객 확인용 API에 따라 코드가 일부 달라질수 있습니다.)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>소스라이브 플레이어 예시 코드</title>
</head>
<body>
  <div id="sauce_live"></div>
</body>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  let isLogin = false;

  async function checkLoginStatus() {
    try {
      const response = await fetch('고객 데이터 체크용 API');
      const data = await response.json();

      isLogin = !!data.id;
      return data;
    } catch (error) {
      console.error("로그인 상태 확인 중 오류 발생:", error);
      return null;
    }
  }

  function handleMessage(event) {
    if (typeof event.data !== "string") return;

    try {
      const jsonData = JSON.parse(event.data);

      switch (jsonData.key) {
        case "sauceflexEnter":
          console.log("방송 입장", jsonData.params);
          break;
        case "sauceflexBroadcastStatus":
          console.log("방송 상태", jsonData.params.broadcastStateCode);
          break;
        case "sauceflexMoveExit":
          console.log("방송 닫기");
          break;
        case "sauceflexMoveBanner":
          console.log("배너 데이터:", jsonData.params);
          break;
        case "sauceflexMoveLogin":
          console.log("방송 로그인");
          break;
        case "sauceflexMoveProduct":
          console.log("상품 데이터:", jsonData.params);
          break;
        case "sauceflexOnShare":
          console.log("공유 링크:", jsonData.params);
          break;
        case "sauceflexPictureInPicture":
          console.log("PIP");
          break;
        case "sauceflexSendPlayTime":
          console.log("현재 방송 위치:", jsonData.params.position);
          break;
        case "sauceflexMoveReward":
          console.log("리워드 링크:", jsonData.params.linkUrl);
          break;
        case "sauceflexMoveCoupon":
          console.log("쿠폰 링크:", jsonData.params.linkUrl);
          break;
        default:
          console.warn("알 수 없는 이벤트:", jsonData);
      }
    } catch (error) {
      console.error("이벤트 메시지 파싱 오류:", error);
    }
  }

  window.addEventListener("load", async () => {
    const sauceUrl = new URL(location.href);
    const broadcastId = sauceUrl.searchParams.get("broadcastId");

    const userData = await checkLoginStatus();
    const memberId = userData?.id;
    const nickname = userData?.nickname ?? userData?.name ?? "Guest";

    window.SauceLiveLib.setInit({ broadcastId });

    if (broadcastId && isLogin) {
      window.SauceLiveLib.setMemberObject({ memberId, nickname });
    } else {
      window.SauceLiveLib.setMemberToken(" ");
    }
    window.SauceLiveLib.load();
    window.addEventListener("message", handleMessage);
  });

</script>
</html>

모아보기 페이지를 구성하여 위에서 만들어둔 방송링크를 확인하여 아래 window.location.href 의 옆에 추가된 링크를 기입해서 사용해주세요.

<div id='sauce_collect'></div>
<script type="text/javascript" src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
 function flexCollectMoveBroadcast(params){
     const regex = /\/broadcast\/([^?]+)/;
     const match = params.broadcastUrl.match(regex);
     if(!match) return
     const broadcastId=match[1]
     // 위에서 세팅한  만들어진 링크를 아래 추가해주세요.
      window.location.href= '/live?broadcastId=' + broadcastId
  } 
  window.addEventListener(
    "load",  async () => {
   // 모비두에서 확인 받은 파트너 ID 를 정확히 입력해주세요
      const partnerId = " "; 
      window.SauceWebLib.setInit({partnerId: partnerId });
      window.SauceWebLib.load();
     },
    false
  );
</script>

소스라이브 플레이어를 자체 소스라이브 링크를 통해서 구현한 케이스에 대한 예시 코드입니다.

모아보기 페이지로 회원연동이 완료됩니다. 참고링크

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>소스라이브 모아보기 예시 코드</title>
</head>
<body>
<div id="sauce_collect"></div>
</body>
<script
  type="text/javascript"
  src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>

  async function checkLoginStatus() {
    try {
      const response = await fetch('고객 데이터 체크용 API')
      const data = await response.json()
      return data
    } catch (error) {
      console.error('로그인 상태 확인 중 오류 발생:', error)
      return null
    }
  }

  window.addEventListener(
    'load',
    async () => {
      // 모비두에서 확인 받은 파트너 ID 를 정확히 입력해주세요
      const partnerId = 'uiux'

      const userData = await checkLoginStatus()
      const memberId = userData?.id
      const nickname = userData?.nickname ?? userData?.name ?? 'Guest'

      window.SauceWebLib.setInit({ partnerId: partnerId })
      if (memberId && nickname) {
        window.SauceWebLib.setMemberObject({
          nickName: nickname,
          memberId: memberId,
        })
      }
      window.SauceWebLib.load()
    },
    false,
  )
</script>

</html>