卡片推送

更新时间：2024-04-22 19:18:32

功能概述

本模块主要用于处理卡片推送相关的逻辑，监听卡片开始推送、结束推送等消息，接入方可以根据这些事件流程定制自己的UI界面。

初始化及销毁

注意：在实例化该模块并进行使用之前，需要对SDK进行初始化配置，详细见参考文档。

初始化卡片推送实例

在线文件引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk/0.24.0/lib/polyv-ir.umd.js"></script>

<script>
    const { PushCard } = window.PolyvIRSDK;
</script>

import 方式引入（推荐）

import { PushCard } from '@polyv/interactions-receive-sdk';
const pushCardSdk = new PushCard();

卡片推送实例销毁

pushCardSdk.destroy();

实例属性

属性名	类型	说明
events	Object	卡片推送模块事件

实例方法

方法名	入参	出参	说明
getResidueTime	void	当前实例对象	获取卡片剩余时间
toClose	void	void	关闭卡片
getPushCardData	roomId、cardId	Promise	获取推送卡片数据

使用流程

监听 "卡片开始推送（start）" 事件

在直播后台推送卡片，本SDK内部会触发 pushCardSdk.events.START 事件，接入方可以监听该事件，然后再调用 getPushCardData(roomId, cardId) 获取更加具体的卡片数据，用来展示卡片或卡片入口等界面。

pushCardSdk.on(pushCardSdk.events.START, async function(msg) {
  console.log(`卡片开始推送：`, msg);
  const res = await pushCardSdk.getPushCardData(msg.roomId, msg.id);
});

pushCardSdk.events.START返回的数据对象包含以下属性

属性名	类型	说明
roomId	String	房间号
id	Number	卡片ID
total	Number	卡片显示总时长，单位：秒
time	Number	卡片显示剩余时长，单位：秒
entrance	String	是否有卡片入口，Y表示有，N表示没有
lookTime	Number	等待多久后显示卡片，单位：秒

getPushCardData返回的对象包含以下属性

属性名	类型	说明
conditionValue	Number	等待多久后显示，单位：秒
duration	Number	卡片推送总时长，单位：秒
countdownMsg	String	倒计时文案
enterEnabled	String	是否有卡片入口，Y表示有，N表示没有
imageType	String	封面类型：redpack/giftbox/custom
cardImage	String	当封面类型为custom（自定义）时，封面图片链接
enterImage	String	当封面类型为custom（自定义）时，入口图片链接
link	String	跳转链接
showCondition	String	卡片弹出方式：PUSH表示马上弹出，WATCH表示观看conditionValue秒后弹出
title	String	卡片标题
redirectType	String	打开链接的方式，tab或iframe，默认为tab（即打开新的标签页），iframe为自定义类型，用户可根据实际业务情况进行展示

监听 “卡片停止推送（CANCEL）” 事件

在直播后台取消卡片推送，本SDK会触发 pushCardSdk.events.CANCEL 事件

pushCardSdk.on(pushCardSdk.events.CANCEL, function(msg) {
  console.log('卡片停止推送');
});

获取卡片倒计时

在卡片弹出后，若卡片有倒计时，可以使用 pushCardSdk.getResidueTime() 获取卡片剩余的时间，获取到数据后会触发pushCardSdk.events.GET_RESIDUE_TIME事件

pushCardSdk.on(pushCardSdk.events.GET_RESIDUE_TIME, function(msg) {
  console.log('卡片剩余显示时间：', msg.time);
});

注意

如果不需要再使用卡片推送SDK时，请调用SDK实例的destroy方法去销毁实例。

直播WEB SDK