本發(fā)明涉及互聯(lián)網(wǎng)教學(xué)領(lǐng)域，具體而言，涉及一種多端課件實(shí)時(shí)互動(dòng)方法及一種多端課件實(shí)時(shí)互動(dòng)系統(tǒng)。

背景技術(shù)：

在pc端啟動(dòng)客戶(hù)端軟件，加載互動(dòng)課件，利用程序?qū)崿F(xiàn)多端的互動(dòng)實(shí)時(shí)同步教學(xué)(包括點(diǎn)擊、拖動(dòng)等動(dòng)畫(huà)效果的展示同步以及音視頻的播放同步)，高效方便地實(shí)現(xiàn)了多端的互動(dòng)教學(xué)。當(dāng)前比較普遍的做法是錄屏，將教師的界面通過(guò)媒體流的形式分享出去，這樣會(huì)帶來(lái)很高的帶寬需求。另外其他的一些實(shí)施方式中，如果將老師端的頁(yè)面操作動(dòng)畫(huà)轉(zhuǎn)換為圖像進(jìn)行顯示，容易造成失真現(xiàn)象，且用戶(hù)看不到動(dòng)畫(huà)的執(zhí)行過(guò)程，上課過(guò)程較為枯燥，缺乏趣味性；如果音視頻播放依賴(lài)于flash實(shí)現(xiàn)，將會(huì)極大的加大了cpu的占用，且安全性不高，如果用戶(hù)的電腦配置不高且任務(wù)量過(guò)大，將造成音視頻播放的卡頓現(xiàn)象，為用戶(hù)的學(xué)習(xí)帶來(lái)了些許不便；如果將老師端的頁(yè)面操作動(dòng)畫(huà)轉(zhuǎn)換為視頻進(jìn)行顯示，較強(qiáng)依賴(lài)于網(wǎng)絡(luò)環(huán)境的傳輸，且用戶(hù)看不到實(shí)時(shí)的效果，且用戶(hù)無(wú)法參與整個(gè)過(guò)程，缺少互動(dòng)性；如果將老師端的頁(yè)面操作動(dòng)畫(huà)轉(zhuǎn)換為swf進(jìn)行顯示，需要客戶(hù)端具有flash播放功能，另外swf不具有跨平臺(tái)的能力，即手機(jī)端不支持swf文件，跨平臺(tái)及可移植性較差。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明為了解決現(xiàn)有課件分發(fā)過(guò)程中實(shí)時(shí)性差，特別是分發(fā)帶有動(dòng)畫(huà)音頻的課件時(shí)，占用cpu、帶寬大的問(wèn)題，提供了一種多端課件實(shí)時(shí)互動(dòng)方法，包括教師端、學(xué)生端，所述方法包括如下步驟：

教師端和學(xué)生端分別加載html格式的控制器controller.html和h5互動(dòng)課件，所述控制器controller.html包括工具包模塊sdk.js、屬性模塊status.js、隊(duì)列模塊queue.js，所述h5互動(dòng)課件是指通過(guò)html5、css3以及js編寫(xiě)完成的html頁(yè)面；

所述控制器controller.html利用屬性模塊status.js進(jìn)行信息初始化，完成信息初始化后利用隊(duì)列模塊queue.js序列化信息隊(duì)列，序列化隊(duì)列以后，請(qǐng)求加載所述h5互動(dòng)課件；

教師端獲取對(duì)所述h5互動(dòng)課件的操作數(shù)據(jù)，并將所述操作數(shù)據(jù)發(fā)送給所述工具包模塊sdk.js，所述工具包模塊sdk.js中的動(dòng)畫(huà)效果模塊執(zhí)行動(dòng)畫(huà)效果播放，動(dòng)畫(huà)效果播放完成后，所述工具包模塊sdk.js中的消息構(gòu)造模塊根據(jù)所述操作數(shù)據(jù)生成消息，發(fā)送所述消息給所述學(xué)生端中的工具包模塊sdk.js，所述學(xué)生端中的工具包模塊sdk.js中的事件觸發(fā)模塊觸發(fā)所述學(xué)生端中的h5互動(dòng)課件根據(jù)所述操作數(shù)據(jù)進(jìn)行動(dòng)畫(huà)播放。

進(jìn)一步地，還包括服務(wù)器，所述教師端和學(xué)生端還包括客戶(hù)端，所述發(fā)送所述消息給所述學(xué)生端中的工具包模塊sdk.js的步驟具體包括：所述工具包模塊sdk.js中的消息構(gòu)造模塊發(fā)送所述消息給教師端的客戶(hù)端，所述教師端的客戶(hù)端將所述消息發(fā)送給服務(wù)器，所述服務(wù)器將所述消息發(fā)送給學(xué)生端的客戶(hù)端，學(xué)生端的客戶(hù)端將所述消息發(fā)送給所述學(xué)生端的工具包模塊sdk.js。

進(jìn)一步地，所述教師端和學(xué)生端分別加載html格式的控制器controller.html和h5互動(dòng)課件的步驟之前，還包括：初始化教師端和學(xué)生端的步驟或者初始化教師端、學(xué)生端和服務(wù)器的步驟。

進(jìn)一步地，所述消息為json數(shù)據(jù)格式的消息。

進(jìn)一步地，所述學(xué)生端的數(shù)量為多個(gè)。

進(jìn)一步地，所述操作數(shù)據(jù)包括點(diǎn)擊按鈕、拖拽按鈕和對(duì)課件中元素的操作。

本發(fā)明另一方面還提供了一種多端課件實(shí)時(shí)互動(dòng)系統(tǒng)，包括教師端、學(xué)生端，所述教師端和學(xué)生端分別包括控制器，所述控制器中包括工具包模塊、屬性模塊和隊(duì)列模塊；

所述教師端、學(xué)生端用于加載所述控制器和h5互動(dòng)課件，所述h5互動(dòng)課件是指通過(guò)html5、css3以及js編寫(xiě)完成的html頁(yè)面；

所述控制器用于利用屬性模塊進(jìn)行信息初始化，完成信息初始化后利用隊(duì)列模塊序列化信息隊(duì)列，序列化隊(duì)列以后，請(qǐng)求加載所述h5互動(dòng)課件；

所述教師端還包括課件操作數(shù)據(jù)獲取模塊，所述課件操作數(shù)據(jù)獲取模塊用于獲取用戶(hù)對(duì)所述h5互動(dòng)課件的操作數(shù)據(jù)，并將所述操作數(shù)據(jù)發(fā)送給所述工具包模塊；

所述教師端中的所述工具包模塊中的動(dòng)畫(huà)效果模塊執(zhí)行動(dòng)畫(huà)效果播放，動(dòng)畫(huà)效果播放完成后，所述工具包模塊中的消息構(gòu)造模塊根據(jù)所述操作數(shù)據(jù)生成消息，發(fā)送所述消息給所述學(xué)生端中的工具包模塊，所述學(xué)生端中的工具包模塊中的事件觸發(fā)模塊觸發(fā)所述學(xué)生端中的h5互動(dòng)課件根據(jù)所述操作數(shù)據(jù)進(jìn)行動(dòng)畫(huà)播放。

進(jìn)一步地，還包括服務(wù)器，所述教師端和學(xué)生端還包括客戶(hù)端，所述教師端中的工具包模塊中的消息構(gòu)造模塊發(fā)送所述消息給教師端的客戶(hù)端，所述教師端的客戶(hù)端將所述消息發(fā)送給服務(wù)器，所述服務(wù)器將所述消息發(fā)送給學(xué)生端的客戶(hù)端，學(xué)生端的客戶(hù)端將所述消息發(fā)送給所述學(xué)生端的工具包模塊。

進(jìn)一步地，所述消息為json數(shù)據(jù)格式的消息。

進(jìn)一步地，所述學(xué)生端的數(shù)量為多個(gè)。

本本發(fā)明與現(xiàn)有技術(shù)相比能夠保證了多端動(dòng)畫(huà)效果的執(zhí)行的一致性、有序性；保證了多端上課過(guò)程的互動(dòng)性；同時(shí)占用較小的cpu的情況加載音視頻。

附圖說(shuō)明

通過(guò)參考附圖會(huì)更加清楚的理解本發(fā)明的特征和優(yōu)點(diǎn)，附圖是示意性的而不應(yīng)理解為對(duì)本發(fā)明進(jìn)行任何限制，在附圖中：

圖1為本發(fā)明一些實(shí)施例中的多端課件實(shí)時(shí)互動(dòng)方法的流程示意圖；

圖2為本發(fā)明一些實(shí)施例中的多端課件實(shí)時(shí)互動(dòng)方法的流程示意圖；

圖3為本發(fā)明一些實(shí)施例中的多端課件實(shí)時(shí)互動(dòng)系統(tǒng)的結(jié)構(gòu)示意圖；

圖4為本發(fā)明一些實(shí)施例中的多端課件實(shí)時(shí)互動(dòng)系統(tǒng)的結(jié)構(gòu)示意圖；

圖5為本發(fā)明一些實(shí)施例中的多端課件實(shí)時(shí)互動(dòng)系統(tǒng)的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為了能夠更清楚地理解本發(fā)明的上述目的、特征和優(yōu)點(diǎn)，下面結(jié)合附圖和具體實(shí)施方式對(duì)本發(fā)明進(jìn)行進(jìn)一步的詳細(xì)描述。需要說(shuō)明的是，在不沖突的情況下，本申請(qǐng)的實(shí)施例及實(shí)施例中的特征可以相互組合。

在下面的描述中闡述了很多具體細(xì)節(jié)以便于充分理解本發(fā)明，但是，本發(fā)明還可以采用其他不同于在此描述的其他方式來(lái)實(shí)施，因此，本發(fā)明的保護(hù)范圍并不受下面公開(kāi)的具體實(shí)施例的限制。

本發(fā)明克服現(xiàn)有中多端分發(fā)課件占用帶寬大，加載音視頻占用cpu高的問(wèn)題，提出了一種基于html(超文本標(biāo)記語(yǔ)言)課件分發(fā)系統(tǒng)，可直接在瀏覽器上進(jìn)行運(yùn)行，不需額外的軟件，將課件中的動(dòng)作(如，點(diǎn)擊、拖拽按鈕，對(duì)課件中元素(小動(dòng)物、植物)的點(diǎn)擊，移動(dòng)等信息)預(yù)先建立好事件函數(shù)，在客戶(hù)端中安裝的sdk文件中接收到這些動(dòng)作觸發(fā)信息后，解析形成動(dòng)畫(huà)，在客戶(hù)端上顯示，不需要將遠(yuǎn)程的動(dòng)作信息轉(zhuǎn)換為動(dòng)畫(huà)格式文件進(jìn)行傳遞，這時(shí)占用的帶寬較小，同時(shí)，動(dòng)畫(huà)在本端實(shí)時(shí)生成，不需要加載，占用內(nèi)存和cpu較小，使得實(shí)時(shí)性更加提高，流暢性、一致性較好。

實(shí)施例一

如圖1所示，本發(fā)明提供了一種多端課件實(shí)時(shí)互動(dòng)方法，包括教師端、學(xué)生端，所述教師端、學(xué)生端為可連接網(wǎng)絡(luò)的計(jì)算機(jī)或者控制器，所述方法包括如下步驟：

s110教師端和學(xué)生端分別加載html格式的控制器controller.html和h5互動(dòng)課件；所述控制器controller.html包括工具包模塊sdk.js、屬性模塊status.js、隊(duì)列模塊queue.js，所述h5互動(dòng)課件是指通過(guò)html5、css3以及js編寫(xiě)完成的html頁(yè)面；

s120所述控制器controller.html利用屬性模塊status.js進(jìn)行信息初始化，完成信息初始化后利用隊(duì)列模塊queue.js序列化信息隊(duì)列，序列化隊(duì)列以后，請(qǐng)求加載所述h5互動(dòng)課件；

s130教師端獲取對(duì)所述h5互動(dòng)課件的操作數(shù)據(jù)，并將所述操作數(shù)據(jù)發(fā)送給所述工具包模塊sdk.js，所述工具包模塊sdk.js中的動(dòng)畫(huà)效果模塊執(zhí)行動(dòng)畫(huà)效果播放，動(dòng)畫(huà)效果播放完成后，所述工具包模塊sdk.js中的消息構(gòu)造模塊根據(jù)所述操作數(shù)據(jù)生成消息，發(fā)送所述消息給所述學(xué)生端中的工具包模塊sdk.js，所述學(xué)生端中的工具包模塊sdk.js中的事件觸發(fā)模塊觸發(fā)所述學(xué)生端中的h5互動(dòng)課件根據(jù)所述操作數(shù)據(jù)進(jìn)行動(dòng)畫(huà)播放。所述操作數(shù)據(jù)包括點(diǎn)擊按鈕、拖拽按鈕和對(duì)課件中元素的操作。

本發(fā)明實(shí)施例中通過(guò)工具包模塊sdk.js獲取操作數(shù)據(jù)后在本端進(jìn)行動(dòng)畫(huà)顯示，然后將操作數(shù)據(jù)形成特定格式的消息發(fā)送給遠(yuǎn)端，如發(fā)送給學(xué)生端，學(xué)生端中的工具包模塊sdk.js接收到上述的信息后進(jìn)行解析，生成動(dòng)畫(huà)進(jìn)行顯示。所述序列化隊(duì)列的步驟能夠?qū)@示數(shù)據(jù)、操作數(shù)據(jù)按照時(shí)間順序進(jìn)行排列，保證了本端和遠(yuǎn)端的信息有序性，

本發(fā)明的方法可在小網(wǎng)絡(luò)中運(yùn)行，即教師端直接將消息發(fā)送給學(xué)生端；也可在較大網(wǎng)絡(luò)中運(yùn)行，便于多個(gè)學(xué)生端同時(shí)接收數(shù)據(jù)，進(jìn)行課件互動(dòng)，如這時(shí)，還包括服務(wù)器，所述教師端和學(xué)生端還包括客戶(hù)端，所述步驟s130中，所述發(fā)送所述消息給所述學(xué)生端中的工具包模塊sdk.js的步驟具體包括：所述工具包模塊sdk.js中的消息構(gòu)造模塊發(fā)送所述消息給教師端的客戶(hù)端，所述教師端的客戶(hù)端將所述消息發(fā)送給服務(wù)器，所述服務(wù)器將所述消息發(fā)送給學(xué)生端的客戶(hù)端，學(xué)生端的客戶(hù)端將所述消息發(fā)送給所述學(xué)生端的工具包模塊sdk.js。

本發(fā)明的方法在初始運(yùn)行時(shí)還需進(jìn)行初始化的步驟，具體地，所述教師端和學(xué)生端分別加載html格式的控制器controller.html和h5互動(dòng)課件的步驟之前，還包括：初始化教師端和學(xué)生端的步驟或者初始化教師端、學(xué)生端和服務(wù)器的步驟。

本發(fā)明中控制器發(fā)送的消息或者接收的消息格式應(yīng)為易于解析的消息，例如所述消息為json數(shù)據(jù)格式的消息。

本發(fā)明實(shí)施例中所述學(xué)生端的數(shù)量為多個(gè)，這樣可保證在多個(gè)學(xué)生端之間的數(shù)據(jù)統(tǒng)一、一致，保證了實(shí)時(shí)性。

保證了多端動(dòng)畫(huà)效果的執(zhí)行的一致性、有序性；保證了多端上課過(guò)程的互動(dòng)性；占用較小的cpu的情況加載音視頻。

實(shí)施例二

本發(fā)明提供了一種多端課件實(shí)時(shí)互動(dòng)方法，其基本思想是，通過(guò)controller.html完成與客戶(hù)端的通信，進(jìn)行隊(duì)列控制，并循環(huán)執(zhí)行隊(duì)列。抽離出獨(dú)有的sdk文件，綁定各個(gè)事件函數(shù)。加載課件，課件中執(zhí)行各個(gè)行為，展示動(dòng)畫(huà)效果；如圖2所示，具體流程方法步驟包括，

s210加載controller.html；學(xué)生端和教師端都進(jìn)行加載。

s220請(qǐng)求信息初始化、序列化隊(duì)列；學(xué)生端和教師端同步進(jìn)行。

s230功能綁定，將動(dòng)作信息與sdk中函數(shù)對(duì)應(yīng)；

s240本端接收到動(dòng)作信息后進(jìn)行sdk解析；

s250解析之后進(jìn)行本端顯示；

s260顯示后將本端接收到動(dòng)作信息轉(zhuǎn)換成特定格式信息傳遞給遠(yuǎn)端(如、學(xué)生端)，也可傳遞給服務(wù)器；

s270服務(wù)器將接收到數(shù)據(jù)進(jìn)行分發(fā)；

s280各個(gè)遠(yuǎn)端利用sdk解析器進(jìn)行解析展示。

本發(fā)明實(shí)施例中方法，其運(yùn)用的硬件環(huán)境如圖3所示。

本發(fā)明實(shí)施例中的的方法，具體運(yùn)用到計(jì)算機(jī)中的步驟如下：

1.初始化服務(wù)端及客戶(hù)端，客戶(hù)端包括教師端和學(xué)生端。教師端和學(xué)生端分別加載controller.html以及h5互動(dòng)課件。注：h5互動(dòng)課件是指html頁(yè)面。

2.controller.html中的status.js請(qǐng)求信息初始化，完成信息初始化以后通過(guò)queue.js序列化信息隊(duì)列。

3.queue.js序列化隊(duì)列以后請(qǐng)求加載h5互動(dòng)課件。注：h5互動(dòng)課件是指通過(guò)html5、css3以及js編寫(xiě)完成的具有的html頁(yè)面。

4.教師端上課時(shí)候?qū)τ趆5課件上的點(diǎn)擊、拖拽等按鈕以及元素的操作會(huì)觸發(fā)sdk.js中動(dòng)畫(huà)效果模塊即有動(dòng)畫(huà)效果的播放，當(dāng)每個(gè)動(dòng)畫(huà)效果播放完成時(shí)候會(huì)通過(guò)sdk.js消息構(gòu)造模塊，將操作的指令發(fā)送給客戶(hù)端，再通過(guò)svc服務(wù)器下發(fā)到學(xué)生端的客戶(hù)端。當(dāng)學(xué)生端的客戶(hù)端接收消息后會(huì)觸發(fā)sdk.js中的事件觸發(fā)方法，進(jìn)而觸發(fā)學(xué)生端h5課件的動(dòng)畫(huà)播放。

發(fā)送消息、接收消息都是通過(guò)json數(shù)據(jù)格式進(jìn)行傳輸。

通過(guò)html的方式完成課件的實(shí)時(shí)同步教學(xué)，可以在最接近實(shí)時(shí)同步的狀態(tài)下快速、便捷的完成對(duì)課件的各項(xiàng)互動(dòng)操作。

實(shí)施例四

另一方面，本發(fā)明還提供了一種運(yùn)行上述實(shí)施例的系統(tǒng)，如圖4所示，即提供了一種多端課件實(shí)時(shí)互動(dòng)系統(tǒng)100，包括教師端110、學(xué)生端120，所述教師端110和學(xué)生端120分別包括控制器130，所述控制器130中包括工具包模塊131、屬性模塊132和隊(duì)列模塊133；

所述教師端110、學(xué)生端110用于加載所述控制器130和h5互動(dòng)課件，所述h5互動(dòng)課件是指通過(guò)html5、css3以及js編寫(xiě)完成的html頁(yè)面；

所述控制器130用于利用屬性模塊132進(jìn)行信息初始化，完成信息初始化后利用隊(duì)列模塊133序列化信息隊(duì)列，序列化隊(duì)列以后，請(qǐng)求加載所述h5互動(dòng)課件；

所述教師端110還包括課件操作數(shù)據(jù)獲取模塊111，所述課件操作數(shù)據(jù)獲取模塊111用于獲取用戶(hù)對(duì)所述h5互動(dòng)課件的操作數(shù)據(jù)，并將所述操作數(shù)據(jù)發(fā)送給所述工具包模塊131；

教師端110中的所述工具包模塊131中的動(dòng)畫(huà)效果模塊1311執(zhí)行動(dòng)畫(huà)效果播放，動(dòng)畫(huà)效果播放完成后，所述工具包模塊131中的消息構(gòu)造模塊1312根據(jù)所述操作數(shù)據(jù)生成消息，發(fā)送所述消息給所述學(xué)生端120中的工具包模塊131，所述學(xué)生端中的工具包模塊131中的事件觸發(fā)模塊1313觸發(fā)所述學(xué)生端中的h5互動(dòng)課件根據(jù)所述操作數(shù)據(jù)進(jìn)行動(dòng)畫(huà)播放。

本發(fā)明可直接端到端傳遞數(shù)據(jù)，也可通過(guò)服務(wù)器將數(shù)據(jù)分發(fā)到各個(gè)端，實(shí)現(xiàn)各個(gè)端數(shù)據(jù)的統(tǒng)一、一致。具體地，如圖5所示，還包括服務(wù)器140，所述教師端110和學(xué)生端120還包括客戶(hù)端150，所述教師端110中的工具包模塊131中的消息構(gòu)造模塊1312發(fā)送所述消息給教師端110的客戶(hù)端150，所述教師端110的客戶(hù)端150將所述消息發(fā)送給服務(wù)器140，所述服務(wù)器140將所述消息發(fā)送給學(xué)生端120的客戶(hù)端150，學(xué)生端120的客戶(hù)端150將所述消息發(fā)送給所述學(xué)生端120的工具包模塊131。所述消息為json數(shù)據(jù)格式的消息。

在本發(fā)明的一些實(shí)施例中所述學(xué)生端120的數(shù)量為多個(gè)。

本發(fā)明實(shí)施例中的系統(tǒng)保證了多端動(dòng)畫(huà)效果的執(zhí)行的一致性，保證了上課效果的實(shí)時(shí)互動(dòng)性。

實(shí)施例五

如圖5所示，本發(fā)明提供了一種一種多端課件實(shí)時(shí)互動(dòng)系統(tǒng)，包括學(xué)生端、教師端、html格式控制器controller.html、客戶(hù)端、svc服務(wù)器，所述教師端和學(xué)生端分別和控制器controller.html連接傳遞操作數(shù)據(jù)和顯示數(shù)據(jù)，所述控制器controller.html與客戶(hù)端之間發(fā)送信息和接受信息，所述客戶(hù)端和svc服務(wù)器之間發(fā)送信息和接受信息，所述控制器controller.html中包括sdk.js模塊、queue.js模塊和status.js模塊，所述sdk.js模塊中包括事件觸發(fā)模塊、隊(duì)列解鎖模塊和消息構(gòu)建模塊；所述教師端和學(xué)生端中加載所述控制器controller.html和h5互動(dòng)課件，接收用戶(hù)的操作數(shù)據(jù)如對(duì)button按鈕的操作，在本端進(jìn)行動(dòng)畫(huà)顯示，同時(shí)創(chuàng)遞給遠(yuǎn)端(學(xué)生端)，遠(yuǎn)端通過(guò)控制器controller.html進(jìn)行sdk解析，生成動(dòng)畫(huà)進(jìn)行顯示。

本發(fā)明實(shí)施例中系統(tǒng)保證了多端動(dòng)畫(huà)效果的執(zhí)行的一致性、有序性；保證了多端上課過(guò)程的互動(dòng)性；占用較小的cpu的情況加載音視頻。

在本發(fā)明中，術(shù)語(yǔ)“第一”、“第二”、“第三”僅用于描述目的，而不能理解為指示或暗示相對(duì)重要性。術(shù)語(yǔ)“多個(gè)”指兩個(gè)或兩個(gè)以上，除非另有明確的限定。

以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，并不用于限制本發(fā)明，對(duì)于本領(lǐng)域的技術(shù)人員來(lái)說(shuō)，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。