直播抽奖功能（互动功能接收端JS-SDK）

功能概述

本模块主要用于处理抽奖相关的逻辑，可以对抽奖开始和抽奖结束等事件进行监听以及提交观众中奖信息，接入方可以根据这些事件流程定制自己的UI界面。

抽奖--效果截图

 

抽奖--效果截图

 

初始化及销毁

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

在线文件引入方式

// script 标签引入，根据版本号引入JS版本。  

 

import 方式引入（推荐）

import { Lottery } from '@polyv/interactions-receive-sdk';   
const lotterySdk = new Lottery();  
// ...  
// 销毁 SDK 实例，清除逻辑  
lotterySdk.destroy();

使用流程

监听"开始抽奖"事件

当讲师、助教等发起端，发起一轮抽奖时，lotterySdk.events.LotteryStart 事件会被触发。接入方可以在此时将抽奖中等提示字样或者动效展示出来，让用户感知到抽奖已经开始。

lotterySdk.on(lotterySdk.events.LotteryStart, function() {
  // 处理开始抽奖
  alert('抽奖开始');
});

监听 "抽奖中" 事件

发起抽奖时，可能有部分观众未进入对应直播房间，因此错过即时的事件。
接入方需要监听 lotterySdk.events.OnLottery 事件，这样后进入的观众同样可以得知当前有进行中的抽奖，并将对应的状态显示出来。

lotterySdk.on(lotterySdk.events.OnLottery, function() {
  // 处理开始抽奖
  alert('抽奖进行中');
});

监听 "抽奖结束" 事件

当发起端结束一轮抽奖时，lotterySdk.events.LotteryEnd 事件会被触发，同时该事件有对应场次抽奖中的个人获奖信息、兑换码、领奖信息等内容，可以监听该事件并展示对应的中奖结果和领奖信息填写表单。

lotterySdk.on(lotterySdk.events.LotteryEnd, function(msg) {
  alert(`抽奖 id： ${msg.lotteryId}`, `是否中奖： ${msg.isWinner}`, `奖品名称：${msg.prize}`, `领奖信息：${msg.collectInfo}`);
});

展示抽奖结果

在"抽奖结束" 事件中，已经可以获取到该场次的抽奖结果。此外，抽奖 SDK 还提供了一些方法获取更多的信息。

1. 分页获取中奖人列表

   const data = await lotterySdk.getWinnersList({
     pageNumber: 1,
     // 抽奖 id 可以在“抽奖结束”事件 LotteryEnd 的参数中获取
     lotteryId: 'lotteryId',
   })
   // 当前页码，总页数，中奖者列表
   const { pageNumber, totalPages, contents } = data;
   

   获取个人在特定场次的所有中奖记录

2. // 中奖记录列表。可传参数 { channelId, sessioId, userId }，若不传则按照初始化配置参数去获取数据
   const data = await lotterySdk.getLotteryRecord();
   

注意：可以在页面及抽奖模块初始化完成后，即调用此方法，便于获取用户在当前场次的中奖情况

提交获奖者信息

根据 “抽奖结束” 事件或者中奖记录接口得到的信息，展示获奖信息表单，用户填写完成后，可以使用以下接口，将信息提交至系统后台。

await lotterySdk.submitInfo({
  sessionId: 'sessionId',
  lotteryId: 'lotteryId',
  winnerCode: 'winnerCode',
  receiveInfo: [{ field: '', value: '' }],
});

注意

如果不需要再使用抽奖SDK时，请调用SDK实例的destroy方法去销毁实例。

 我的文章推荐：

• [视频+图文] 线上研讨会是什么，企业对内对外培训可以用线上研讨会吗？
• [图文] 企业直播对网络带宽有什么要求？
• [图文]OBS如何实现毫秒级超低延时直播
• 直播播放器API（播放器调用方法、参数、接口和事件）
• 企业内训课程视频加密防下载是如何做的？10种思路
• 超低延迟/无延迟直播（PRTC Web SDK移动端）兼容性说明
• html5视频播放器代码调用实例(视频切换\倍速切换)
• 企业直播要如何做？硬件设备、网络环境有哪些要求？
• 企业内训课程视频加密防下载是如何做的？10种思路