Guides

웹 페이지에 설치하기 V1.1.0

Suggest Edits

라이브 URL로 접근했을 때 보여지는 페이지이며, 라이브를 시청할 수 있습니다.

라이브 전에는 편성표로 이동하고, 라이브가 시작되었다면 바로 플레이어로 이동합니다.

📘

WebView에서 플레이어 연동 시 참고 사항

  • iOS X 이상의 기기에서 플레이어 화면 잘 현상을 방지하기 위해 SafeArea 영역 설정을 필히 진행해주시기 바랍니다.
  • Android Webview에서 재생 아이콘 표시 없이 영상이 재생되는 것을 원하실 경우에는 아래 코드를 활용해주시기 바랍니다. (해당 가이드는 파트너사 AOS앱 개발팀에서 진행) 
    override fun getDefaultVideoPoster(): Bitmap? \{ return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

자사몰 페이지에 연동 방법 (기본 제공 방식)

  • 로그인 페이지 URL과 소스라이브 페이지로 복귀하는 방식을 제공합니다.

자사몰 로그인 페이지 URL

https://player.sauceflex.com/broadcast/{방송주소}?accessToken={생성된accessToken}&returnUrl={로그인페이지등}

  • 로그인 페이지 URL과 소스라이브 페이지로 복귀 (returnUrl 등의 query string을 이용한 방법)
  • 로그인 이후, 서버와의 연동을 통하여 생성한 accessToken를 다음과 같이 returnUrl 등을 통해 전달 받은 주소에 query string 으로 붙여서 페이지 이동을 시킬 수 있습니다.

자사몰 페이지에 직접 페이지를 설치하기(라이브러리 방식)

비회원, 간편 인증, JWT 인증 방식을 지원합니다.

간편 인증과 JWT 인증으로 사용자 정보를 연동할 수 있습니다. 간편 인증은 빠르고 간편하게 인증 사용을 할 수 있지만, 보안 강화와 임의의 사용자 ID가 어뷰징 되는 것을 방지하기 위해 JWT 인증을 할 수 있습니다. JWT Token 생성

게스트(비로그인) 사용자로 사용하기

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
  window.SauceLiveLib.load('sauce_live')
</script>

or

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
  window.SauceLiveLib.load() //default 'sauce_live'
</script>

간편 인증 사용하기 (일반 텍스트 형식의 nickName 및 memberId)

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
   window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
   window.SauceLiveLib.setMemberObject({
    memberId: string,
    nickName: string,
    age?: string, //옵션 ex) 10, 20, 30 - 나이대
    gender?: string, //옵션 ex) m, w  - 성별 남자(m), 여자(w)
   });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

JWT 인증 사용하기 

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
   window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
   window.SauceLiveLib.setMemberToken(JWT:string)
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

플로팅 구현

플로팅(Floating) 기능 사용하기 

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
   window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
   window.SauceLiveLib.setFloatingType({type: 'basic' | 'scroll',size?:{ width:'200px' } });
   // size 값은 기본적으로 옵션값입니다. width 에 맞춰서 자동으로 높이는 9/16으로 설정됩니다.
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

basic 플로팅

처음 로드 할때 부터 Floating 형태로 플레이어가 로드 됩니다.

basic 플로팅시 bridge 이용

<div id='sauce_live'></div>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
/** 아래 함수 선언시 풀스크린 버튼 클릭시 동작하는 기본 링크 이동 기능이 삭제되고 선언된 로직이 실행됩니다.  
 *  함수 세팅하여 X 버튼 클릭시 지정한 링크로의 이동 등을 제어할수 있습니다.   
 */ 
function sauceflexFloatingModeFullscreen() {
    console.log('sauceflexFloatingModeFullscreen')
}
/** 아래 함수 선언시 닫기 버튼 클릭시 동작하는 사라지는 기능이 삭제되고 선언된 로직이 실행됩니다.  */ 
function sauceflexFloatingModeExit() {
    console.log('sauceflexFloatingModeExit')
}
   window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
   window.SauceLiveLib.setFloatingType({type: 'basic' });
   window.SauceLiveLib.load() //default 'sauce_live'
</script>

scroll 플로팅

플레이어가 scroll 이벤트로 화면에서 보이지 않을때 Floating 형태로 플레이어가 전환 됩니다.

샘플 페이지 

<html>
  <head>
    <title>sauce live example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
     // 필요한 css 는 추가적으로 세팅해도 무관합니다.
    </style>
  </head>
  <body>
   <div id='sauce_live'></div>

  </body>
  <script>
    window.SauceLiveLib.setInit({ broadcastId: '방송ID 를 입력해주세요' });
    window.SauceLiveLib.setMemberObject({
      memberId: 'saucelive',
      nickName: '소스라이브***',
      age: '10',
      gender: 'm'
     });
    //window.SauceLiveLib.setFloatingType({type: 'basic'});
    //window.SauceLiveLib.setFloatingType({type: 'scroll'});
    window.SauceLiveLib.load()
  </script>
</html>

직접 세팅한 페이지의 라이브러리 이벤트 세팅

아래의 message 이벤트를 위의 샘플 페이지에서 세팅하려 하는 위치 아래에 추가해주세요


    window.addEventListener(
      "message",
      function (e) {
        // 이곳에 처리
        if (typeof e.data !== "string") return
          const jsonData = JSON.parse(e.data);
          switch (jsonData.key) {
            //방송 입장 - 페이지 진입시 자동으로 호출
            case "sauceflexEnter":
              break;
            //닫기 버튼을 눌러 나갈 떄 
            case "sauceflexMoveExit":
              break;
            //로그인 시도
            case "sauceflexMoveLogin":
              console.log("로그인 시도 버튼 클릭", jsonData.params);
              break;
            //상품 클릭
            case "sauceflexMoveProduct":
              console.log("상품 구매하기 버튼 클릭", jsonData.params);
              break;
             //배너 클릭
            case "sauceflexMoveBanner":
              console.log("상품 구매하기 버튼 클릭", jsonData.params);
              break;
            //공유하기 클릭
            case "sauceflexOnShare":
              console.log("공유하기 버튼 클릭", jsonData.params);
              break;
             //리워드 달성시의 버튼 클릭
            case "sauceflexMoveReward":
              console.log("리워드 달성시의 버튼 클릭", jsonData.params);
              break;   
            default:
              break;
          }
        
      },
      false
    );

연동방법 (Webview)

Bridge & Message

아래와 같은 Bridge로 메시지가 전달됩니다. 각 메시지는 JSON 객체가 stringify 되어 전달됩니다.

  • sauceflexEnter(Void) - 페이지 진입 시 자동으로 호출)
// 파라미터 없음
  • sauceflexMoveExit(Void) - 닫기 버튼 눌러 팝업에서 나가기 버튼 클릭시
// 파라미터 없음
  • sauceflexMoveLogin(Void) -로그인 팝업에서 확인 버튼 클릭시
// 파라미터 없음
  • sauceflexMoveProduct(Void) -상품 클릭시
// Stringified JSON
 {
        linkUrl: String | null, // 상품 상세 정보의 url
        broadcastIdx: String,   // 방송 번호
        price: price, // 상품 가격
        externalProductId: externalProductId ?? null, //상품 코드
      }
  • sauceflexOnShare(message: String) -공유 버튼 클릭시
// Stringified JSON
{
    linkUrl: String, // 공유 된 주소
    shortUrl:String // 단축 URL (공유시 라이브 기본정보 확인가능)
}
  • sauceflexMoveReward(message: String) -리워드 달성버튼 클릭시
// Stringified JSON
{
    linkUrl: String, // 리워드 달성시 고객 제공용으로 등록한 URL
    broadcastIdx:String // 방송 ID
}
  • sauceflexMoveBanner(message: String) -배너 클릭시
// Stringified JSON
{
      linkUrl:String , // 배너의 링크 주소 OR TEL링크
      broadcastIdx: broadcastId, // 방송ID
      bannerId: bannerId, // 배너ID
}

웹뷰 관련 세팅에 대한 자세한 사항은 아래의 URL 을 참고해주세요

웹뷰 모바일 통신 구현 // 닫기 버튼 눌러 팝업에서 나가기시

Updated 3 months ago