WIS+TIS+LSS整合详解

奥点云许多强大的产品互相组合，总是可以给我们带来惊喜。本文介绍的是WIS白板互动、TIS聊天互动、LSS流媒体直播的整合，这三个服务的整合可以给网络教育等提供一种很好解决方案。

一、开通服务

          开通WIS参考https://www.aodianyun.com/aodianyun_doc/225

    开通TIS参考https://www.aodianyun.com/aodianyun_doc/247

    开通LSS参考https://www.aodianyun.com/aodianyun_doc/8

二、安装、配置

2.1、安装Web服务器。

毫无疑问，运行网站需要一个Web服务器。由于该解决方案是由php编写的，所以推荐的是Apache+PHP。具体步骤请参考网上其他资料。

2.2、源码下载。

从奥点云官网下载解决方案的源码。

https://cdn.aodianyun.com/wis-help/education.zip

2.3、配置

2.3.1修改conf.php

将conf.php中ADConf 类里的AccessId、AccessKey、TisId、DmsSKey参数改写成自己的信息。

其中AccessId和AccessKey从奥点云的用户中心获取，一些API的认证需要提供这两个参数。DmsSKey是开通TIS实例时选择的DMS实例的s_key，从DMS实例详情中可以获取的到，用于获取在线用户列表。TisId可以在TIS实例管理中获取，有些TIS的Api需要该参数。

2.3.2修改index-wis.js

将以下着色部分做相应的修改。

1、在WIS相关参数部分找到wisId的定义部分，改写wisId的赋值语句：

wisId = wisId ? wisId : "填写自己的wisId";

wisId是在白板实例管理中可以获取到。

2、同样在TIS相关参数部分修改tisId的赋值语句：

tisId = tisId ? tisId : "填写自己的tisId";

3、在发布播放相关的参数部分修改 5个参数：

         lssApp = lssApp ? lssApp : "填写学生端发布的app";

         lssStream = lssStream ? lssStream : "填写学生端发布用的stream";

         thApp = thApp ? thApp : "填写教师端发布的app";

         thStream = thStream ? thStream : "填写教师端发布的stream";

         adUserId = adUserId ? adUserId : "填写奥点云行号Id";      //从奥点云用户中心中获取

以上用到三目运算符?:，是因为这些参数可以从url参数上获取，如果不需要从url参数上获取，可以直接给他们赋值固定值。

三、系统功能

配置完毕后就可以运行了。系统分为教师端和学生端，教师端的页面manage.html，学生端的页面是room.html。

教师端和学生端大部分功能类似，结构图如下：

图3-1 教师端界面结构

教师端可以管理白板操作、发布视频直播、让学生发言。

学生端可以申请发言，等待教师端通过后就可以发布语音了。

四、代码详解

4.1 结构分析

系统的目录结构说明如下：

系统最核心的文件是index-wis.js，它是教师端和学生端共用的脚本文件，在该文件中很明显地划分了三部分：WIS相关的定义和初始化函数、TIS相关的定义和初始化函数、LSS相关的实现。除了这三大部分还有一些其他的辅助函数。

三个服务本来是可以互相独立的，但是为了实现举手发言功能，每个客户端之间必然需要通讯，所以基于LSS服务的发言功能利用了WIS的发送自定义消息接口。为了显示学生的名字和新用户进入时知道当前是否有其他学生在发言，发言功能还和TIS服务有一些耦合。三个服务之间的关系如下：

图 4-1 服务之间的依赖

教师端的上麦也是基于LSS服务，学生端利用LSS播放教师端发布的视频。这部分相对独立，与其他服务没有什么依赖关系，且教师端和学生端代码不一样，为了简单起见直接将实现代码写在教师端和学生端的页面里。

WIS、TIS还有其他一些接口的请求路线如下图所示：

图 4-2 接口请求路线

         从上图中可以发现，中间的服务器就是部署网站的服务器，大部分接口请求经过该服务器去请求奥点云接口服务器。因此我们可以在这一层去做业务扩展和权限控制。

4.2 WIS分析

WIS的初始化在函数initWIS中进行，初始化的过程基本上可以参考：

https://www.aodianyun.com/aodianyun_doc/118

不过需要注意的是WIS有可以发送自定消息的接口，系统利用该接口发送和接收发言相关的通知。发送消息的接口是WIS.SendCustomMessage,接受消息的回调是onCustomMessage。为了避免在WIS未初始化完成而调用SendCustomMessage导致发送失败，这里对sendCustomMessage进行了封装，在未初始化完成时先将消息存入队列pendingTask中，初始化完毕后将pendingTask中的消息全部发送出去。接收消息的回调函数onCustomMessage中的具体处理代码由参数handler.onCustomMessage函数表中的函数去实现，该参数在最下面初始化时会传入。

    在WIS.Init操作之后调用了loadDocList，函数loadDocList中主要的工作是发起请求向服务器请求文档列表数据，然后创建html元素添加到界面中。学生端是不显示文档列表的，所以该函数开始部分利用manager标志控制学生端不显示文档列表。另外，当上传文档成功后也会调用该函数重新加载文档列表。

    WIS的其他接口可以参见https://www.aodianyun.com/aodianyun_doc/146。

4.3 TIS整合

TIS聊天服务的初始化可以参考：

https://www.aodianyun.com/aodianyun_doc/244

TIS初始化时可以指定clientid，因为TIS是基于DMS服务的产品，我们可以利用TIS的topic获取在线用户列表。TIS的topic会在onConnect回调函数中传递过来。根据topic获取在线用户列表的接口说明参见：

https://www.aodianyun.com/aodianyun_doc/46

这里还有一个难题，获取到的用户列表是clientId列表，我们如果需要在线用户更详细的信息，比如用户名和头像等，一种方案是建立一个数据库表，将clientId和用户详细信息对应起来。当通过接口获取在线用户列表后，根据这些clientId去数据库中获取更详细的信息。本系统为了简单起见，以用户名+时间戳+随机数的方式生成clientId,这样可以很容易从clientId中解析出用户名，但这种方式也有缺陷，clientId的大小只能是100字节左右，携带的信息非常有限。同样为了简单起见，每个客户端的用户名是随机生成的，我们可以对此进行修改，使系统更符合业务需求。

TIS可已接收用户上下限通知，只需要将generateUserEvent设置成true即可。每当一个新的TIS客户端连接成功后，其他客户端都会收到updateUser事件。在这个回调函数里可以更新用户列表。发言功能中当有新用户上线时，教师端收到该通知后会发送消息告知新来的客户端当前是否有人在发言。

4.4 LSS整合

系统中用到LSS服务的地方有两个，一是教师端发布直播，学生端观看教师端发布的直播；二是学生端发言，其他客户端收听。

教师端发布直播和观看直播分别在manage.html和room.html中实现。教师端需要引入js/player/swfobject.js，同时保证js/player目录下有player.swf和playerProductInstall.swf文件。该插件能播放rtmp视频也能发布直播，但只能在有flash插件的情况下使用。学生端使用了LSS播放器，它可以在手机上播放hls视频，参考：

https://www.aodianyun.com/aodianyun_doc/15

学生端的发言和收听在micFrame.html页面实现，但控制什么时候发言和接听还是在index-wis.js中实现的。在index-wis.js的底部，初始化时将申请发言、清空麦序、上下麦通知的处理函数onHandUp、onMicListClear、onMic、offMic传递给了initWIS函数，WIS在收到自定义消息时会调用相应的函数去处理。

将发言和收听的实现放在micFrame.html中的好处是方便调试、不干扰主页面，控制起来也比较方便。在micFrame.html中有noVideo，该参数可以控制发言时要不要视频流，将它设置成true表示不需要视频流。

五、小结

         至此系统的主要部分已经介绍完毕，本文并没有提到太多的界面布局和其他插件的代码，而是抓住WIS、TIS和LSS三种服务进行讲解，也是希望能突出重点。更多的细节请参考源码。