전체 예제코드
<script>
// 뷰어 초기화 코드
const moduleConfig = {
playMode: string, // "REPLAY", "LIVE"
broadcastId: string, // broadcastId
externalServiceId: 'yourservice', // 발급받은 솔루션 연동 ID
accountConfig: { // 서드파티 회원정보 주입
esuk: string, // 서드파티 유저 유니크키
esun: string, // 서드파티 유저 닉네임
loginUrl: "https://yourserivce.com/login", //서드파티 로그인 콜백 페이지
},
productConfig: {
share: {
shareUrl: 'https://yourservice.com/lives/', //공유하기시 공유할 URL
},
},
events: {
onClickReplayButton: (broadcastInfo) => alert('onClickReplayButton' + broadcastInfo), // 다시보기 버튼 클릭
onClickBackButton: () => alert('onClickBackButton'), // 우상단 닫기 클릭
onClickOtherLiveButton: (broadcastInfo) => alert('onClickOtherLiveButton' + broadcastInfo), // 다른 라이브 보기 버튼 클릭 시
onClickBridgeButton: (originalLink, broadcastId) => alert('onClickBridgeButton' + originalLink + ' ' + broadcastId), // 예고페이지 보러가기 버튼 클릭 시
onClickShareButton: () => alert('onClickShareButton'), // 공유하기 버튼 클릭
onLinkOpen: (url) => console.log('onLinkOpen' + url), // 뷰어 내 외부 링크 클릭
onOpenProduct: (url, name) => console.log('onOpenProduct' + url + name), // 뷰어내 상품 클릭
onLoginRequest: () => console.log('onLoginRequest'), // 로그인 요청됨
onLocationMove: () => console.log('onLocationMove'), // 로고 클릭 등 다른페이지 이동
onViewerLoad: () => console.log('onViewerLoad'), // 뷰어 준비완료 상태가 되었을때 - 방송 진입
onVideoPause: () => console.log('onVideoPause'), // 뷰어 일시정지시
onVideoPlay: () => console.log('onVideoPlay'), // 뷰어가 재생시
onStartBroadcast: () => console.log('onStartBroadcast'), // 방송 시작시
onEndBroadcast: () => console.log('onEndBroadcast') // 방송 종료시
},
target: document.getElementById('product-root'),
}
lico.launcher({
name: 'DisplayViewer',
module: {
resourcePath: 'https://im.pstatic.net/live-commerce/products/display-viewer/latest/real/',
entry: 'index.js',
},
moduleConfig,
onLoad: (instance) => {
console.log('created instance', instance)
globalThis.viewer = instance
},
onError: (error) => {
console.log('error')
},
})
</script>
#### 3.1 콘텐츠 정보 설정