Guides

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

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

  1. 소스라이브 플레이어 코드를 미리 구성해둡니다. (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>
    
    
    
  2. 모아보기 페이지를 구성하여 위에서 만들어둔 방송링크를 확인하여 아래 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>
    

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

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

    <!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>