Live api

인쇄

Live api

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

라이브 설치하기

https://pub.dev/packages/shoplive_player/install

Depend on it

Run this command:

With Flutter:

 $ flutter pub add shoplive_player

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  shoplive_player: ^1.6.5

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:shoplive_player/shoplive_player.dart';

라이브 실행하기

void play({required ShopLivePlayerData data})를 통해 라이브 상세화면을 재생합니다.

ShopLivePlayerData

Property name

Type

Description

campaignKey

String

재생할 동영상의 캠페인(방송) 키 (필수)

keepWindowStateOnPlayExecuted

Boolean

재생 중인 플레이어의 실행 모드(pip, fullscreen)을 유지한 상태로 재생을 시작할 지 여부. 기본값(false)

true: 재생중인 플레이어의 실행 모드를 유지합니다.
false: fullscreen으로 실행됩니다.

referrer

String?

진입경로 통계를 측정할 수 있는 파라미터

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.play(data: data);

라이브 종료하기

void close()를 통해 라이브 상세화면을 종료합니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.close();

라이브 Preview 실행하기

void showPreview({required ShopLivePlayerPreviewData data})를 통해 라이브 Preview를 실행할 수 있습니다.

ShopLivePlayerPreviewData

Property name	Type	Description
campaignKey	String	재생할 동영상의 캠페인(방송) 키 (필수)
useCloseButton	Boolean	닫기 버튼을 활성화. 기본값(false)
referrer	String?	진입경로 통계를 측정할 수 있는 파라미터

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.showPreview(data: data);

공유하기 주소 설정하기

void setShareScheme({required String shareSchemeUrl})를 통해 공유하기 주소를 설정할 수 있습니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.setShareScheme(shareSchemeUrl: "https://shoplive.cloud/");

PIP 전환하기

void startPictureInPicture()를 통해 전체 화면 모드에서 PIP 화면 모드로 전환합니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.startPictureInPicture();

전체화면 전환하기

void stopPictureInPicture()를 통해 PIP 화면 모드에서 전체 화면 모드로 전환합니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.stopPictureInPicture();

음소거 시작하기

void setMuteWhenPlayStart({required bool isMute})를 통해 음소거 시작할 수 있습니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.setMuteWhenPlayStart(isMute: false);

상품, 배너 정보 전달 기능

Stream<ShopLiveHandleNavigation> handleNavigation를 통해 라이브에서 상품, 배너 등을 선택했을 때, 선택한 상품 또는 배너 정보를 전달합니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.handleNavigation.listen((data) {
  _showToast("handleNavigation : ${data.url}");
});

쿠폰 정보 전달 기능

Stream<ShopLiveHandleDownloadCoupon> handleDownloadCoupon를 통해 라이브에서 쿠폰을 선택했을 때, 선택한 쿠폰정보를 전달합니다.

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.handleDownloadCoupon.listen((data) {
  _showToast("handleDownloadCoupon : ${data.couponId}");
});

방송 상태 전달 기능

Stream<ShopLiveChangeCampaignStatus> changeCampaignStatus를 통해 라이브에서 방송 상태가 변경되었을 때 전달 합니다.

ShopLiveChangeCampaignStatus

Parameter name	Type	Description
campaignStatus	String	campaignStatus: `READY`, `ONAIR`, `CLOSED`

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.changeCampaignStatus.listen((data) {
  _showToast("changeCampaignStatus : ${data.campaignStatus}");
});

캠페인 정보 전달 기능

Stream<ShopLiveCampaignInfo> campaignInfo를 통해 라이브에서 캠페인 정보를 확인 할 수 있습니다.

ShopLiveCampaignInfo

Parameter name	Type	Description
campaignInfo	JSONObject	campaignInfo 예) `{'title':'방송 제목'}`

Parameter name

Type

Description

campaignInfo

JSONObject

campaignInfo

예) {'title':'방송 제목'}

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.campaignInfo.listen((data) {
  _showToast(
      "campaignInfo : ${const JsonEncoder().convert(data.campaignInfo)}");
});

팝업 Custom 기능

Stream<ShopLiveHandleCustomAction> handleCustomAction를 통해 팝업에서 선택 이벤트를 custom으로 지정하고, 팝업을 선택했을 때 팝업 정보를 전달합니다. 팝업의 id, type, payload를 전달합니다.

ShopLiveHandleCustomAction

Parameter name	Type	Description
id	String	쿠폰 또는 배너 ID
type	String	쿠폰 또는 배너 type
payload	String	사용자가 정의한 payload

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.handleCustomAction.listen((data) {
  _showToast(
      "handleCustomAction : ${data.id}, ${data.type}, ${data.payload}");
});

플레이어 상태 정보 전달 기능

Stream<ShopLiveChangedPlayerStatus> changedPlayerStatus를 통해 라이브 플레이어의 상태를 전달 받습니다.

ShopLiveChangedPlayerStatus

Parameter name	Type	Description
status	ShopLivePlayStatus	플레이어 상태 (created, destroyed)

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.changedPlayerStatus.listen((data) {
  _showToast("changedPlayerStatus: ${data.status}");
});

Message callback 확인 기능

Message Callback

Stream<ShopLiveReceivedCommand> receivedCommand를 통해 메세지를 전달 받은 내용을 확인 할 수 있습니다.

ShopLiveReceivedCommand

Property name	Type	Description
command	String	Command 의 이름
data	Map<String, dynamic>?	관련 추가 parameter

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.receivedCommand.listen((data) {
  _showToast(
      "receivedCommand : ${data.command}, ${const JsonEncoder().convert(data.data)}");
});

로그 기능

Stream<ShopLivePlayerLog> log를 통해 라이브 로그를 전달 받습니다.

EventLog 사용자 행동 추적하기

ShopLivePlayerLog

Property name	Type	Description
name	String	Event 의 이름
feature	String	Event 의 종류 `click`, `show`, `action`
campaignKey	String?	방송의 Unique Key
parameter	Map<String, dynamic>?	관련 추가 parameter

late final _shopLivePlayerPlugin = ShopLivePlayer();
_shopLivePlayerPlugin.log.listen((data) {
  _showToast(
      "clickLog : ${data.name}, ${data.feature}, ${data.campaignKey}, ${const JsonEncoder().convert(data.payload)}");
});

What's Next

시작하기

라이브 설치하기
라이브 실행하기
라이브 종료하기
라이브 Preview 실행하기
공유하기 주소 설정하기
PIP 전환하기
전체화면 전환하기
음소거 시작하기
상품, 배너 정보 전달 기능
쿠폰 정보 전달 기능
방송 상태 전달 기능
캠페인 정보 전달 기능
팝업 Custom 기능
플레이어 상태 정보 전달 기능
Message callback 확인 기능
로그 기능