Background
The method has the advantages that client software is started at the PC terminal, interactive courseware is loaded, multi-terminal interactive real-time synchronous teaching (including animation effect display synchronization such as clicking and dragging and audio and video playing synchronization) is achieved through a program, and multi-terminal interactive teaching is achieved efficiently and conveniently. The current common method is to record a screen, and share the interface of a teacher in a media stream mode, which brings high bandwidth requirements. In other embodiments, if the page operation animation of the teacher end is converted into an image to be displayed, distortion is easily caused, and the user cannot see the execution process of the animation, so that the lesson process is dull and lacks interest; if the audio and video playing is realized by depending on flash, the CPU occupation is greatly increased, the safety is not high, and if the computer configuration of a user is not high and the task amount is too large, the phenomenon of pause of the audio and video playing is caused, so that a little inconvenience is brought to the learning of the user; if the page operation animation of the teacher end is converted into the video for display, the transmission of the network environment is strongly relied on, the user cannot see the real-time effect, and the user cannot participate in the whole process, so that the interactivity is lacked; if the page operation animation of the teacher side is converted into the swf to be displayed, the client side is required to have a flash playing function, and in addition, the swf does not have the cross-platform capability, namely, the swf file is not supported by the mobile phone side, and the cross-platform and transportability are poor.
Disclosure of Invention
The invention provides a multi-end courseware real-time interaction method, which aims to solve the problems of poor real-time performance in the existing courseware distribution process, especially the problems of CPU occupation and large bandwidth when courseware with animation audio is distributed, and comprises a teacher end and a student end, wherein the method comprises the following steps:
the method comprises the steps that a teacher end and a student end respectively load controller html and h5 interactive courseware in an html format, wherein the controller html comprises a toolkit module sdk.js, an attribute module status.js and a queue module queue.js, and the h5 interactive courseware refers to html pages written by html5, css3 and js;
html of the controller utilizes an attribute module status.js to initialize information, a queue module queue.js is utilized to serialize an information queue after the information initialization is completed, and the h5 interactive courseware is requested to be loaded after the information queue is serialized;
the teacher end obtains operation data of the h5 interactive courseware and sends the operation data to the toolkit module sdk.js, an animation effect module in the toolkit module sdk.js executes animation effect playing, after the animation effect playing is completed, a message construction module in the toolkit module sdk.js generates messages according to the operation data and sends the messages to the toolkit module sdk.js in the student end, and an event trigger module in the toolkit module sdk.js in the student end triggers h5 interactive courseware in the student end to play the animation according to the operation data.
Further, the method further comprises a server, the teacher end and the student end further comprise clients, and the step of sending the message to a toolkit module sdk.js in the student end specifically comprises the following steps: and the message construction module in the toolkit module sdk.js sends the message to a client of a teacher end, the client of the teacher end sends the message to a server, the server sends the message to a client of a student end, and the client of the student end sends the message to the toolkit module sdk.js of the student end.
Further, before the step of loading the controller control, html and h5 interactive courseware in html format respectively at the teacher end and the student end, the method further includes: initializing the teacher end and the student end or initializing the teacher end, the student end and the server.
Further, the message is in a json data format.
Further, the number of the student ends is multiple.
Further, the operation data comprises click buttons, drag buttons and operation on elements in the courseware.
The invention also provides a multi-end courseware real-time interaction system which comprises a teacher end and a student end, wherein the teacher end and the student end respectively comprise controllers, and the controllers comprise a toolkit module, an attribute module and a queue module;
the teacher end and the student end are used for loading the controller and h5 interactive courseware, and the h5 interactive courseware refers to html pages written by html5, css3 and js;
the controller is used for initializing information by using the attribute module, serializing an information queue by using the queue module after the information initialization is finished, and requesting to load the h5 interactive courseware after the information queue is serialized;
the teacher end further comprises a courseware operation data acquisition module, and the courseware operation data acquisition module is used for acquiring operation data of the h5 interactive courseware from the user and sending the operation data to the toolkit module;
and after the animation effect playing is finished, a message construction module in the tool kit module generates a message according to the operation data, the message is sent to the tool kit module in the student end, and an event trigger module in the tool kit module in the student end triggers h5 interactive courseware in the student end to play the animation according to the operation data.
The teacher end and the student end further comprise clients, the message construction module in the tool kit module in the teacher end sends the message to the client of the teacher end, the client of the teacher end sends the message to the server, the server sends the message to the client of the student end, and the client of the student end sends the message to the tool kit module of the student end.
Further, the message is in a json data format.
Further, the number of the student ends is multiple.
Compared with the prior art, the method can ensure the consistency and the orderliness of the execution of the multi-end animation effect; the interactivity of the multi-end class process is ensured; and meanwhile, the audio and video are loaded under the condition of occupying a smaller cpu.
Detailed Description
In order that the above objects, features and advantages of the present invention can be more clearly understood, a more particular description of the invention will be rendered by reference to the appended drawings. It should be noted that the embodiments and features of the embodiments of the present application may be combined with each other without conflict.
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present invention, however, the present invention may be practiced in other ways than those specifically described herein, and therefore the scope of the present invention is not limited by the specific embodiments disclosed below.
The invention overcomes the problems that the bandwidth occupied by multi-end courseware distribution is large and the CPU occupied by loading audio and video is high in the prior art, and provides a courseware distribution system based on html (hypertext markup language), which can be directly operated on a browser without additional software, and can pre-establish an event function for actions (such as clicking and dragging buttons, clicking and moving information of elements (small animals and plants) in courseware), and analyze and form animations after receiving the action trigger information in sdk files installed in a client, and display the actions on the client without converting remote action information into animation format files for transmission, so that the occupied bandwidth is small, meanwhile, the animations are generated in real time at the local end without loading, and the occupied memory and the CPU are small, so that the real-time performance is improved, and the smoothness and the consistency are good.
Example one
As shown in fig. 1, the present invention provides a real-time multi-end courseware interaction method, including a teacher end and a student end, where the teacher end and the student end are computers or controllers capable of connecting to a network, and the method includes the following steps:
s110, the teacher end and the student end respectively load controllers in html format, html and h5 interactive courseware; html of the controller includes a toolkit module sdk.js, an attribute module status.js and a queue module queue.js, and the h5 interactive courseware refers to html pages written by html5, css3 and js;
s120, the controller. html performs information initialization by using an attribute module status. js, serializes an information queue by using a queue module queue. js after the information initialization is completed, and requests to load the h5 interactive courseware after the serializing queue;
s130, a teacher end obtains operation data of the h5 interactive courseware and sends the operation data to the toolkit module sdk.js, an animation effect module in the toolkit module sdk.js executes animation effect playing, after the animation effect playing is completed, a message construction module in the toolkit module sdk.js generates messages according to the operation data and sends the messages to the toolkit module sdk.js in the student end, and an event trigger module in the toolkit module sdk.js in the student end triggers h5 interactive courseware in the student end to play animation according to the operation data. The operation data comprises click buttons, drag buttons and operation on elements in courseware.
In the embodiment of the invention, the operation data is acquired through the tool kit module sdk.js and then animation display is carried out at the local terminal, then the operation data is formed into a message with a specific format and is sent to a remote terminal, for example, a student terminal, and the tool kit module sdk.js in the student terminal receives the message and then analyzes the message to generate animation for display. The step of the serialization queue can arrange the display data and the operation data according to the time sequence, thereby ensuring the information order of the local end and the remote end,
the method can be operated in a small network, namely, the teacher end directly sends the message to the student end; the method can also be operated in a larger network, so that a plurality of student terminals can receive data at the same time and perform courseware interaction conveniently, if the method further comprises a server, the teacher terminal and the student terminals further comprise client terminals, and in the step S130, the step of sending the message to the toolkit module sdk.js in the student terminal specifically comprises the following steps: and the message construction module in the toolkit module sdk.js sends the message to a client of a teacher end, the client of the teacher end sends the message to a server, the server sends the message to a client of a student end, and the client of the student end sends the message to the toolkit module sdk.js of the student end.
Before the step of loading the controller html and h5 interactive courseware in html format respectively at the teacher end and the student end, the method further comprises: initializing the teacher end and the student end or initializing the teacher end, the student end and the server.
In the invention, the format of the message sent or received by the controller is easy to be analyzed, for example, the message is in a json data format.
In the embodiment of the invention, the number of the student terminals is multiple, so that the data among the student terminals can be ensured to be uniform and consistent, and the real-time property is ensured.
The consistency and the orderliness of the execution of the multi-end animation effect are ensured; the interactivity of the multi-end class process is ensured; and loading the audio and video under the condition of occupying a smaller cpu.
Example two
The invention provides a real-time interaction method for multi-terminal courseware, which has the basic idea that communication with a client terminal is completed through a controller. And (4) extracting unique sdk files and binding event functions. Loading courseware, executing each behavior in the courseware, and displaying animation effect; as shown in fig. 2, the specific process steps include,
s210 loads controller. html; both the student side and the teacher side are loaded.
S220, request information initialization and serialization queues; the student side and the teacher side are synchronously carried out.
S230, function binding, wherein the action information corresponds to a function in the SDK;
s240, after receiving the action information, the home terminal performs SDK analysis;
s250, performing local display after analysis;
s260, after the action information received by the local terminal is displayed, the action information is converted into information with a specific format and transmitted to a remote terminal (such as a student terminal) or a server;
s270, the server distributes the received data;
s280, each remote end utilizes the SDK resolver to perform resolution and display.
The hardware environment for the method of the embodiment of the present invention is shown in fig. 3.
The method in the embodiment of the invention is specifically applied to a computer and comprises the following steps:
1. initializing a server and a client, wherein the client comprises a teacher end and a student end. Html and h5 interactive courseware are loaded by the teacher end and the student end respectively. Note: the h5 interactive courseware refers to an html page.
And 2. initializing the status.js request information in html, and serializing the information queue by queue.js after completing the information initialization.
Js serialized queue later requests to load h5 interactive courseware. Note: h5 interactive courseware refers to html pages written by html5, css3 and js.
4. When the teacher end is on class, the operation of clicking, dragging and other buttons and elements on h5 courseware can trigger the animation effect module in sdk.js to play animation effects, when the playing of each animation effect is completed, the operation instruction is sent to the client through the sdk.js message construction module, and then the operation instruction is sent to the client of the student end through the svc server. And after receiving the message, the client of the student end triggers an event triggering method in sdk.js, so as to trigger the animation playing of courseware of the student end h 5.
Both the sent message and the received message are transmitted in json data format.
The real-time synchronous teaching of courseware is completed in an html mode, and various interactive operations on courseware can be completed quickly and conveniently in a state closest to real-time synchronization.
Example four
On the other hand, the present invention further provides a system for operating the above embodiment, as shown in fig. 4, that is, a multi-end courseware real-time interaction system 100 is provided, which includes a teacher end 110 and a student end 120, where the teacher end 110 and the student end 120 respectively include a controller 130, and the controller 130 includes a toolkit module 131, an attribute module 132 and a queue module 133;
the teacher end 110 and the student end 110 are used for loading the controller 130 and h5 interactive courseware, and the h5 interactive courseware refers to html pages written by html5, css3 and js;
the controller 130 is configured to perform information initialization by using the attribute module 132, serialize an information queue by using the queue module 133 after the information initialization is completed, and request to load the h5 interactive courseware after the information queue is serialized;
the teacher end 110 further includes a courseware operation data obtaining module 111, where the courseware operation data obtaining module 111 is configured to obtain operation data of the h5 interactive courseware from the user, and send the operation data to the toolkit module 131;
the animation effect module 1311 in the toolkit module 131 in the teacher end 110 executes animation effect playing, after the animation effect playing is completed, the message constructing module 1312 in the toolkit module 131 generates a message according to the operation data, sends the message to the toolkit module 131 in the student end 120, and the event triggering module 1313 in the toolkit module 131 in the student end triggers h5 interactive courseware in the student end to perform animation playing according to the operation data.
The invention can directly transmit data end to end, and can also distribute the data to each end through the server, thereby realizing the unification and consistency of the data of each end. Specifically, as shown in fig. 5, the teacher end 110 and the student end 120 further include a server 140, the message constructing module 1312 in the toolkit module 131 in the teacher end 110 sends the message to the client 150 of the teacher end 110, the client 150 of the teacher end 110 sends the message to the server 140, the server 140 sends the message to the client 150 of the student end 120, and the client 150 of the student end 120 sends the message to the toolkit module 131 of the student end 120. The message is in a json data format.
In some embodiments of the present invention, the number of the student terminals 120 is plural.
The system in the embodiment of the invention ensures the consistency of the execution of the multi-end animation effect and ensures the real-time interactivity of the lesson effect.
EXAMPLE five
As shown in fig. 5, the invention provides a multi-terminal courseware real-time interaction system, which comprises a student terminal, a teacher terminal, an html format controller controller.html, a client terminal and an svc server, wherein the teacher terminal and the student terminal are respectively connected with the controller controller.html to transmit operation data and display data, the controller controller.html and the client terminal send and receive information, the client terminal and the svc server send and receive information, the controller.html comprises an sdk.js module, a queue.js module and a status.js module, and the sdk.js module comprises an event trigger module, a queue unlocking module and a message construction module; and the teacher end and the student end load the controllers control.html and h5 interactive courseware, receive operation data of a user such as operation on a button, display animation at the home end, create animation to a far end (student end), and analyze sdk by the far end through the controllers control.html to generate animation for display.
The system in the embodiment of the invention ensures the consistency and the orderliness of the execution of the multi-end animation effect; the interactivity of the multi-end class process is ensured; and loading the audio and video under the condition of occupying a smaller cpu.
In the present invention, the terms "first", "second", and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. The term "plurality" means two or more unless expressly limited otherwise.
The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.