互动工具开发指南

概述

  • 互动加号sdk提供了访问云会议平台的能力,开发者可通过调用开放的API,在自己的互动应用内实现查询参会人列表、邀请参会人发言等功能,整体流程:

  • 云会议中台封装出来的接口文件QS-JSSDK提供了访问云会议平台的能力,开发者开发的网页应用要想与云会议客户端通信,要按照以下步骤:

项目中引入接口文件

<!-- 在html文档中 --><script type="text/javascript" src="https://xxx/qs-js-sdk-1.0.0.js"></script>

引入此文件会在引入一个全局变量qssdk

通过config接口注入权限验证配置(目前没有从server端获取ticket凭证这个步骤

  • 由于中台提供的接口能力和中台业务功能密切相关,所以调用jsApi之前需要进行鉴权操作
qssdk.config({    typeId: 0, // 互动工具typeId    timestamp: 0, // 时间戳,毫秒级    nonceStr: '', // 随机字符串    signature: '', // 签名    success: function(result) {       // 成功回调,可以在成功之后使用 qssdk.interaction.xxx jsapi    },    fail: function() {       // 失败回调    }})
  • 获取signature签名算法如下: 将typeId、timestamp、nonceStr拼接成如下字符串,有两个注意点:
* 字段值采用原始值,不要进行URL转义;* 必须严格按照如下格式拼接,不可变动字段顺序。typeId=typeId&timestamp=timestamp&nonceStr=nonceStr

举例:

  • 以下是参数:
typeId=20000timestamp=1648783294823nonceStr=Wm3WZYTPz0wzccnW
  • 拼接后的string串:
typeId=20000&timestamp=1648783294823&nonceStr=Wm3WZYTPz0wzccnW
  • 对该字符串进行MD5加密,得到signature:
8C0DDC3CE58E58B662135A29C59BD8B1

调用JSAPI

JSAPI调用方式

  • 所有接口都为异步
  • 所有接口必须在 window.qssdk.ready(function(){}) 回调函数里调用
  • 接受一个 object 类型的参数
  • 成功回调 success
  • 失败回调 fail

以获取互动模板数据举例:

window.qssdk.ready(function(){    qssdk.interaction.getInteractiveToolInfo({        templateId: '',        success: function(res){},        fail: function(res){}    })})

调试步骤

  • 下载并安装云会议客户端
  • 如果是新开发的一个互动应用,调试时需要在本地进行配置,打开云会议安装目录下面的config/interaction.config文件,填入开发者对应的互动应用相关信息
<?xml version="1.0" encoding="UTF-8"?><configuration>    <interaction>        <interactiveToolName>投票</interactiveToolName>        <typeId>xxx</typeId>        <iconUrl>xxx</iconUrl>        <floatWindowIconUrl>xxx</floatWindowIconUrl>        <templateEditUrl>xxx</templateEditUrl>        <templatePreviewUrl>xxx</templatePreviewUrl>        <maxTemplateNumber>10</maxTemplateNumber>        <startUrl>xxx</startUrl>        <responseUrl>xxx</responseUrl>     </interaction></configuration>

参数说明:

参数 说明
interactiveToolName 互动工具名称
typeId 互动工具类型id,配置数字
iconUrl 互动工具图标
floatWindowIconUrl 互动工具浮动小球图标
templateEditUrl 互动工具模板创建和模板编辑页面地址
templatePreviewUrl 互动工具模板预览页面地址
maxTemplateNumber 互动工具最大模板数量,0 表示不需要模板
startUrl 互动工具发起地址,会中
responseUrl 互动工具响应页面地址,会中
  • 登录云会议,邀请参会人创建一场会议

  • 点击互动卡按钮,在弹窗中的创建里面可查看到刚刚配置的互动类型

  • 点击新建,在弹出窗口内可以看到步骤2中填入的interactiveToolUrl对应的页面,此页面由开发者提供

此页面要嵌入步骤1中提到的qs-js-sdk-1.0.0.js文件,在用户编辑完成后,点击保存的时候,需要调用qssdk.interaction.setInteractiveToolInfo创建一个互动模板

  • 如果是选中了某一条进行预览或者编辑,则同样打开对应步骤2中填入的interactiveToolPreviewUrl和interactiveToolUrl对应的页面,由开发者提供

与创建模板不同的是,打开这2个窗口时,客户端会在打开的地址后面拼一个参数url?templateId=xxx,开发者可以通过该参数获知是哪个模板

  • 点击‘加入会议’,并点击底部工具栏的 ‘互动工具’,此时可在弹出的互动工具中看到新增的一个互动应用

  • 点击对应的互动应用,在弹出的窗口内即可查看到步骤2中填入的interactiveToolListUrl对应的页面,此页面由开发者提供

此页面要嵌入步骤1中提到的qs-js-sdk-1.0.0.js文件,然后调用qssdk.interaction.getInteractiveToolInfoList接口获取此类型的互动模板列表数据

  • 此时如果点击下面的创建按钮,则需要调用qssdk.interaction.open(url)接口打开步骤2中填入的interactiveToolUrl对应的页面,此页面由开发者提供

该页面同样要嵌入步骤1中提到的qs-js-sdk-1.0.0.js文件,例如最后的发起投票,需要调用qssdk.interaction.startInteraction接口

  • 如果此时直接选中某一个模板,点击发起投票,那么直接调用qssdk.interaction.startInteraction接口,将对应模板数据传入,同步骤8中最后一步