라이브 페이지와 같이 사용하기
소스라이브 플레이어를 라이브러를 통해서 구현한 케이스에 대한 예시 코드입니다.
-
소스라이브 플레이어 코드를 미리 구성해둡니다. (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>
Updated about 9 hours ago
What’s Next