소스라이브 플레이어
라이브 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 를 입력해주세요' });
// 다른 내용은 동일합니다만 방송이 stage 방송일 경우 아래의 코드로 테스트때 사용해주세요
// window.SauceLiveLib.setInit({ broadcastId: 'stage 방송ID 를 입력해주세요',env:'stage' });
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 를 입력해주세요' });
// 다른 내용은 동일합니다만 방송이 stage 방송일 경우 아래의 코드로 테스트때 사용해주세요
// window.SauceLiveLib.setInit({ broadcastId: 'stage 방송ID 를 입력해주세요',env:'stage' });
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":
console.log("방송 입장", jsonData.params);
break;
// 방송 상태 변경 - 방송 상태 변경 발생 시 자동으로 호출
case "sauceflexBroadcastStatus":
console.log("방송 상태 변경", jsonData.params);
break;
// 나가기 버튼 클릭
case "sauceflexMoveExit":
console.log("나가기 버튼 클릭", jsonData.params);
break;
// 로그인 버튼 클릭
case "sauceflexMoveLogin":
console.log("로그인 버튼 클릭", jsonData.params);
break;
// 상품 클릭
case "sauceflexMoveProduct":
console.log("상품 클릭", jsonData.params);
break;
// 배너 클릭
case "sauceflexMoveBanner":
console.log("배너 클릭", jsonData.params);
break;
// 쿠폰 클릭
case "sauceflexMoveCoupon":
console.log("쿠폰 클릭", jsonData.params);
break;
// 리워드 달성 클릭
case "sauceflexMoveReward":
console.log("리워드 달성 클릭", jsonData.params);
break;
// 공유하기 클릭
case "sauceflexOnShare":
console.log("공유하기 클릭", jsonData.params);
break;
default:
break;
}
},
false
);
브릿지
- 웹뷰 관련 세팅에 대한 자세한 내용은 해당 링크를 참고해주세요.
- 브릿지의 페이로드는 JSON형식의 객체가 문자열로 변환되어 제공됩니다.
- sauceflexEnter(Void) - 방송 입장 (페이지 진입 시 자동으로 호출)
// 파라미터 없음
- sauceflexBroadcastStatus(message: String) - 방송 상태 변경 (방송 상태 변경 발생 시 자동으로 호출)
// Stringified JSON
// 방송 상태 값에 대한 문서는 https://docs.sauce.im/reference/broadcast-state-code 참고
{
broadcastStateCode: String, // 방송상태
}
- sauceflexMoveExit(Void) - 나가기 버튼 클릭
// 파라미터 없음
- sauceflexMoveLogin(Void) - 로그인 버튼 클릭
// 파라미터 없음
- sauceflexMoveProduct(message: String) - 상품 클릭
// Stringified JSON
{
broadcastIdx: String, // 방송ID
externalProductId: String || null, // 상품 코드
isSoldout: Boolean, // 상품 품절 여부
linkUrl: String, // 상품에 연결된 링크
price: String, // 상품 가격
}
- sauceflexMoveBanner(message: String) - 배너 클릭
// Stringified JSON
{
broadcastIdx: String, // 방송ID
bannerId: String, // 배너ID
linkUrl: String, // 배너에 연결된 링크
}
- sauceflexMoveCoupon(message: String) - 쿠폰 클릭
// Stringified JSON
{
broadcastIdx: String, // 방송ID
couponCode: String || null, // 쿠폰 클릭 시 동작 유형이 '쿠폰 다운로드'인 경우 필요한 쿠폰 코드
couponId: String, // 쿠폰ID
couponName: String, // 쿠폰명
couponType: String, // 쿠폰 클릭 시 동작 유형 ('link' || 'newWindow' || 'download' || 'custom')
linkUrl: String || null, // 쿠폰 클릭 시 동작 유형이 '링크 이동'과 '링크 이동 (새창)'인 경우 필요한 쿠폰에 연결된 링크
metadata: String || null, // 쿠폰 클릭 시 동작 유형이 '사용자 정의'인 경우 필요한 전달 데이터
}
- sauceflexMoveReward(message: String) - 리워드 달성 클릭
// Stringified JSON
{
broadcastIdx: String, // 방송ID
linkUrl: String, // 리워드 달성 시 이동 링크
}
- sauceflexOnShare(message: String) - 공유 버튼 클릭
// Stringified JSON
{
linkUrl: String, // 공유 링크
shortUrl: String // 숏링크
}
- sauceflexPictureInPicture(Void) - PIP 전환 버튼 클릭 (PIP 전환 시에 플레이어 위 요소들은 자동으로 미표시됩니다.)
// 파라미터 없음
Updated 7 days ago