多端课件实时互动方法及系统与流程

文档序号:11250540阅读:580来源:国知局
多端课件实时互动方法及系统与流程

本发明涉及互联网教学领域,具体而言,涉及一种多端课件实时互动方法及一种多端课件实时互动系统。



背景技术:

在pc端启动客户端软件,加载互动课件,利用程序实现多端的互动实时同步教学(包括点击、拖动等动画效果的展示同步以及音视频的播放同步),高效方便地实现了多端的互动教学。当前比较普遍的做法是录屏,将教师的界面通过媒体流的形式分享出去,这样会带来很高的带宽需求。另外其他的一些实施方式中,如果将老师端的页面操作动画转换为图像进行显示,容易造成失真现象,且用户看不到动画的执行过程,上课过程较为枯燥,缺乏趣味性;如果音视频播放依赖于flash实现,将会极大的加大了cpu的占用,且安全性不高,如果用户的电脑配置不高且任务量过大,将造成音视频播放的卡顿现象,为用户的学习带来了些许不便;如果将老师端的页面操作动画转换为视频进行显示,较强依赖于网络环境的传输,且用户看不到实时的效果,且用户无法参与整个过程,缺少互动性;如果将老师端的页面操作动画转换为swf进行显示,需要客户端具有flash播放功能,另外swf不具有跨平台的能力,即手机端不支持swf文件,跨平台及可移植性较差。



技术实现要素:

本发明为了解决现有课件分发过程中实时性差,特别是分发带有动画音频的课件时,占用cpu、带宽大的问题,提供了一种多端课件实时互动方法,包括教师端、学生端,所述方法包括如下步骤:

教师端和学生端分别加载html格式的控制器controller.html和h5互动课件,所述控制器controller.html包括工具包模块sdk.js、属性模块status.js、队列模块queue.js,所述h5互动课件是指通过html5、css3以及js编写完成的html页面;

所述控制器controller.html利用属性模块status.js进行信息初始化,完成信息初始化后利用队列模块queue.js序列化信息队列,序列化队列以后,请求加载所述h5互动课件;

教师端获取对所述h5互动课件的操作数据,并将所述操作数据发送给所述工具包模块sdk.js,所述工具包模块sdk.js中的动画效果模块执行动画效果播放,动画效果播放完成后,所述工具包模块sdk.js中的消息构造模块根据所述操作数据生成消息,发送所述消息给所述学生端中的工具包模块sdk.js,所述学生端中的工具包模块sdk.js中的事件触发模块触发所述学生端中的h5互动课件根据所述操作数据进行动画播放。

进一步地,还包括服务器,所述教师端和学生端还包括客户端,所述发送所述消息给所述学生端中的工具包模块sdk.js的步骤具体包括:所述工具包模块sdk.js中的消息构造模块发送所述消息给教师端的客户端,所述教师端的客户端将所述消息发送给服务器,所述服务器将所述消息发送给学生端的客户端,学生端的客户端将所述消息发送给所述学生端的工具包模块sdk.js。

进一步地,所述教师端和学生端分别加载html格式的控制器controller.html和h5互动课件的步骤之前,还包括:初始化教师端和学生端的步骤或者初始化教师端、学生端和服务器的步骤。

进一步地,所述消息为json数据格式的消息。

进一步地,所述学生端的数量为多个。

进一步地,所述操作数据包括点击按钮、拖拽按钮和对课件中元素的操作。

本发明另一方面还提供了一种多端课件实时互动系统,包括教师端、学生端,所述教师端和学生端分别包括控制器,所述控制器中包括工具包模块、属性模块和队列模块;

所述教师端、学生端用于加载所述控制器和h5互动课件,所述h5互动课件是指通过html5、css3以及js编写完成的html页面;

所述控制器用于利用属性模块进行信息初始化,完成信息初始化后利用队列模块序列化信息队列,序列化队列以后,请求加载所述h5互动课件;

所述教师端还包括课件操作数据获取模块,所述课件操作数据获取模块用于获取用户对所述h5互动课件的操作数据,并将所述操作数据发送给所述工具包模块;

所述教师端中的所述工具包模块中的动画效果模块执行动画效果播放,动画效果播放完成后,所述工具包模块中的消息构造模块根据所述操作数据生成消息,发送所述消息给所述学生端中的工具包模块,所述学生端中的工具包模块中的事件触发模块触发所述学生端中的h5互动课件根据所述操作数据进行动画播放。

进一步地,还包括服务器,所述教师端和学生端还包括客户端,所述教师端中的工具包模块中的消息构造模块发送所述消息给教师端的客户端,所述教师端的客户端将所述消息发送给服务器,所述服务器将所述消息发送给学生端的客户端,学生端的客户端将所述消息发送给所述学生端的工具包模块。

进一步地,所述消息为json数据格式的消息。

进一步地,所述学生端的数量为多个。

本本发明与现有技术相比能够保证了多端动画效果的执行的一致性、有序性;保证了多端上课过程的互动性;同时占用较小的cpu的情况加载音视频。

附图说明

通过参考附图会更加清楚的理解本发明的特征和优点,附图是示意性的而不应理解为对本发明进行任何限制,在附图中:

图1为本发明一些实施例中的多端课件实时互动方法的流程示意图;

图2为本发明一些实施例中的多端课件实时互动方法的流程示意图;

图3为本发明一些实施例中的多端课件实时互动系统的结构示意图;

图4为本发明一些实施例中的多端课件实时互动系统的结构示意图;

图5为本发明一些实施例中的多端课件实时互动系统的结构示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点,下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是,在不冲突的情况下,本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明,但是,本发明还可以采用其他不同于在此描述的其他方式来实施,因此,本发明的保护范围并不受下面公开的具体实施例的限制。

本发明克服现有中多端分发课件占用带宽大,加载音视频占用cpu高的问题,提出了一种基于html(超文本标记语言)课件分发系统,可直接在浏览器上进行运行,不需额外的软件,将课件中的动作(如,点击、拖拽按钮,对课件中元素(小动物、植物)的点击,移动等信息)预先建立好事件函数,在客户端中安装的sdk文件中接收到这些动作触发信息后,解析形成动画,在客户端上显示,不需要将远程的动作信息转换为动画格式文件进行传递,这时占用的带宽较小,同时,动画在本端实时生成,不需要加载,占用内存和cpu较小,使得实时性更加提高,流畅性、一致性较好。

实施例一

如图1所示,本发明提供了一种多端课件实时互动方法,包括教师端、学生端,所述教师端、学生端为可连接网络的计算机或者控制器,所述方法包括如下步骤:

s110教师端和学生端分别加载html格式的控制器controller.html和h5互动课件;所述控制器controller.html包括工具包模块sdk.js、属性模块status.js、队列模块queue.js,所述h5互动课件是指通过html5、css3以及js编写完成的html页面;

s120所述控制器controller.html利用属性模块status.js进行信息初始化,完成信息初始化后利用队列模块queue.js序列化信息队列,序列化队列以后,请求加载所述h5互动课件;

s130教师端获取对所述h5互动课件的操作数据,并将所述操作数据发送给所述工具包模块sdk.js,所述工具包模块sdk.js中的动画效果模块执行动画效果播放,动画效果播放完成后,所述工具包模块sdk.js中的消息构造模块根据所述操作数据生成消息,发送所述消息给所述学生端中的工具包模块sdk.js,所述学生端中的工具包模块sdk.js中的事件触发模块触发所述学生端中的h5互动课件根据所述操作数据进行动画播放。所述操作数据包括点击按钮、拖拽按钮和对课件中元素的操作。

本发明实施例中通过工具包模块sdk.js获取操作数据后在本端进行动画显示,然后将操作数据形成特定格式的消息发送给远端,如发送给学生端,学生端中的工具包模块sdk.js接收到上述的信息后进行解析,生成动画进行显示。所述序列化队列的步骤能够将显示数据、操作数据按照时间顺序进行排列,保证了本端和远端的信息有序性,

本发明的方法可在小网络中运行,即教师端直接将消息发送给学生端;也可在较大网络中运行,便于多个学生端同时接收数据,进行课件互动,如这时,还包括服务器,所述教师端和学生端还包括客户端,所述步骤s130中,所述发送所述消息给所述学生端中的工具包模块sdk.js的步骤具体包括:所述工具包模块sdk.js中的消息构造模块发送所述消息给教师端的客户端,所述教师端的客户端将所述消息发送给服务器,所述服务器将所述消息发送给学生端的客户端,学生端的客户端将所述消息发送给所述学生端的工具包模块sdk.js。

本发明的方法在初始运行时还需进行初始化的步骤,具体地,所述教师端和学生端分别加载html格式的控制器controller.html和h5互动课件的步骤之前,还包括:初始化教师端和学生端的步骤或者初始化教师端、学生端和服务器的步骤。

本发明中控制器发送的消息或者接收的消息格式应为易于解析的消息,例如所述消息为json数据格式的消息。

本发明实施例中所述学生端的数量为多个,这样可保证在多个学生端之间的数据统一、一致,保证了实时性。

保证了多端动画效果的执行的一致性、有序性;保证了多端上课过程的互动性;占用较小的cpu的情况加载音视频。

实施例二

本发明提供了一种多端课件实时互动方法,其基本思想是,通过controller.html完成与客户端的通信,进行队列控制,并循环执行队列。抽离出独有的sdk文件,绑定各个事件函数。加载课件,课件中执行各个行为,展示动画效果;如图2所示,具体流程方法步骤包括,

s210加载controller.html;学生端和教师端都进行加载。

s220请求信息初始化、序列化队列;学生端和教师端同步进行。

s230功能绑定,将动作信息与sdk中函数对应;

s240本端接收到动作信息后进行sdk解析;

s250解析之后进行本端显示;

s260显示后将本端接收到动作信息转换成特定格式信息传递给远端(如、学生端),也可传递给服务器;

s270服务器将接收到数据进行分发;

s280各个远端利用sdk解析器进行解析展示。

本发明实施例中方法,其运用的硬件环境如图3所示。

本发明实施例中的的方法,具体运用到计算机中的步骤如下:

1.初始化服务端及客户端,客户端包括教师端和学生端。教师端和学生端分别加载controller.html以及h5互动课件。注:h5互动课件是指html页面。

2.controller.html中的status.js请求信息初始化,完成信息初始化以后通过queue.js序列化信息队列。

3.queue.js序列化队列以后请求加载h5互动课件。注:h5互动课件是指通过html5、css3以及js编写完成的具有的html页面。

4.教师端上课时候对于h5课件上的点击、拖拽等按钮以及元素的操作会触发sdk.js中动画效果模块即有动画效果的播放,当每个动画效果播放完成时候会通过sdk.js消息构造模块,将操作的指令发送给客户端,再通过svc服务器下发到学生端的客户端。当学生端的客户端接收消息后会触发sdk.js中的事件触发方法,进而触发学生端h5课件的动画播放。

发送消息、接收消息都是通过json数据格式进行传输。

通过html的方式完成课件的实时同步教学,可以在最接近实时同步的状态下快速、便捷的完成对课件的各项互动操作。

实施例四

另一方面,本发明还提供了一种运行上述实施例的系统,如图4所示,即提供了一种多端课件实时互动系统100,包括教师端110、学生端120,所述教师端110和学生端120分别包括控制器130,所述控制器130中包括工具包模块131、属性模块132和队列模块133;

所述教师端110、学生端110用于加载所述控制器130和h5互动课件,所述h5互动课件是指通过html5、css3以及js编写完成的html页面;

所述控制器130用于利用属性模块132进行信息初始化,完成信息初始化后利用队列模块133序列化信息队列,序列化队列以后,请求加载所述h5互动课件;

所述教师端110还包括课件操作数据获取模块111,所述课件操作数据获取模块111用于获取用户对所述h5互动课件的操作数据,并将所述操作数据发送给所述工具包模块131;

教师端110中的所述工具包模块131中的动画效果模块1311执行动画效果播放,动画效果播放完成后,所述工具包模块131中的消息构造模块1312根据所述操作数据生成消息,发送所述消息给所述学生端120中的工具包模块131,所述学生端中的工具包模块131中的事件触发模块1313触发所述学生端中的h5互动课件根据所述操作数据进行动画播放。

本发明可直接端到端传递数据,也可通过服务器将数据分发到各个端,实现各个端数据的统一、一致。具体地,如图5所示,还包括服务器140,所述教师端110和学生端120还包括客户端150,所述教师端110中的工具包模块131中的消息构造模块1312发送所述消息给教师端110的客户端150,所述教师端110的客户端150将所述消息发送给服务器140,所述服务器140将所述消息发送给学生端120的客户端150,学生端120的客户端150将所述消息发送给所述学生端120的工具包模块131。所述消息为json数据格式的消息。

在本发明的一些实施例中所述学生端120的数量为多个。

本发明实施例中的系统保证了多端动画效果的执行的一致性,保证了上课效果的实时互动性。

实施例五

如图5所示,本发明提供了一种一种多端课件实时互动系统,包括学生端、教师端、html格式控制器controller.html、客户端、svc服务器,所述教师端和学生端分别和控制器controller.html连接传递操作数据和显示数据,所述控制器controller.html与客户端之间发送信息和接受信息,所述客户端和svc服务器之间发送信息和接受信息,所述控制器controller.html中包括sdk.js模块、queue.js模块和status.js模块,所述sdk.js模块中包括事件触发模块、队列解锁模块和消息构建模块;所述教师端和学生端中加载所述控制器controller.html和h5互动课件,接收用户的操作数据如对button按钮的操作,在本端进行动画显示,同时创递给远端(学生端),远端通过控制器controller.html进行sdk解析,生成动画进行显示。

本发明实施例中系统保证了多端动画效果的执行的一致性、有序性;保证了多端上课过程的互动性;占用较小的cpu的情况加载音视频。

在本发明中,术语“第一”、“第二”、“第三”仅用于描述目的,而不能理解为指示或暗示相对重要性。术语“多个”指两个或两个以上,除非另有明确的限定。

以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1