一种编程教学交互式视频录播系统及方法与流程

本发明涉及视频录播技术领域，尤其涉及一种编程教学交互式视频录播系统及方法。

背景技术：

在人工智能和认知技术急速发展的今天，场景感知的学习体验尤为重要。尤其是近些年来，随着互联网的快速蓬勃发展，学习编程也已经成为学生必不可少的一项技能。在传统的学习中，学生习惯以看视频去学习老师所讲的编程知识，但由于观看视频无法直接使用老师的课件，还需要学生将老师所编写的代码一点点下载并修改，同时需要自己配置环境、安装开发工具，才能学习并使用老师的代码以及资料。这种传统的视频录制过程繁琐，同时还存在成本大、视频体积过大、对网络要求过高等问题。

技术实现要素：

针对现有技术存在的不足，本发明的目的在于提供一种成本低、录制方便、容易学习的编程教学交互式视频录播系统及方法。

为实现上述目的，本发明可以通过以下技术方案予以实现：

一种编程教学交互式视频录播系统，包括录制客户端、服务器和播放客户端，其中，

录制客户端：监听设备层的操作信息并记录与操作信息对应的代码内容，所述代码内容与时间记录为一条代码信息，同时录制教学音频；

服务器：接收所述录制客户端和所述播放客户端提交的代码并进行编译运行，把编译运行的结果返回并显示在相应的录制客户端和播放客户端；保存所述录制客户端提交的操作事件、代码信息及音频信息；

播放客户端：从所述服务器中提取数据，解析并显示和播放对应时刻的代码信息和音频信息。

进一步地，所述录制客户端包括录制区，所述录制区包括：

录制模块，用于开启和终结录制；

代码编写模块，用于编写代码；

编译运行模块，用于把代码提交到服务器进行编译运行；

结果显示模块，用于显示服务器返回的编译运行结果。

进一步地，所述录制客户端还包括预览区，所述预览区包括：

播放模块，用于显示和播放解析出来的代码信息和音频信息；

代码显示模块，用于显示解析出来的代码信息以及对代码重新编辑；

编译运行模块，用于把代码提交到服务器进行编译运行；

结果显示模块，用于显示服务器返回的编译运行结果。

进一步地，所述播放客户端包括：

播放模块，用于显示和播放解析出来的代码信息和音频信息；

代码显示模块，用于显示解析出来的代码信息以及对代码重新编辑；

编译运行模块，用于把代码提交到服务器进行编译运行；

结果显示模块，用于显示服务器返回的编译运行结果。

进一步地，所述服务器包括云编译服务器和媒体服务器，所述云编译服务器用于接收所述录制客户端和所述播放客户端提交的代码并进行编译运行，把编译运行的结果返回并显示在相应的录制客户端和播放客户端，所述媒体服务器用于保存所述录制客户端提交的操作事件、代码信息及音频信息。

进一步地，所述录制客户端和播放客户端均包括浏览器客户端。

进一步地，所述设备层包括键盘。

一种编程教学交互式视频录播方法，包括以下步骤：

编程教学交互式视频的录制：

s11.监听客户端设备层的操作信息并记录与操作信息对应的代码，所述代

码与时间记录为一条代码信息；

s12.录制教学音频；

s13.把操作事件、代码信息和教学音频提交到服务器并保存在数据库里；

s14.所述服务器接收客户端提交的代码并进行编译运行，把编译运行的结果返回并显示在客户端；

编程教学交互式视频的播放：

s21.从所述服务器中提取并且解析代码信息和教学音频；

s22.在客户端显示和播放解析出来的对应时刻的代码信息和音频信息；

s23.所述服务器接收客户端提交的代码并进行编译运行，把编译运行的结

果返回并显示在客户端。

进一步地，所述客户端包括录制客户端和播放客户端，所述编程教学交互式视频的录制在录制客户端完成，所述编程教学交互式视频的播放在录制客户端和播放客户端完成。

进一步地，所述设备层包括键盘，所述录制客户端和播放客户端均包括浏览器客户端。

与现有技术相比，本发明的有益效果是：编写代码的过程与语音同步录制，在播放时将两者同步匹配，解决了传统慕课录制技术中准备工作复杂、文件过大、对网络要求高以及代码无法让学生直接使用等缺点。主讲人只需在浏览器里录制自己编写的代码，同时录制教学的录音。录制结束后保存，便可让学生通过浏览器直接预览，不但能够听到老师讲课的声音，还能够看到老师编写代码的过程，同时还可直接修改老师的代码，达到举一反三的目的。老师录制前无须配置开发环境，学生在观看的同时可以即学即用、直接修改老师的代码来进行更加广泛的学习，使学生有身临其境的即时体验。

综上所述，本发明具有以下优点：

1、老师使用浏览器便能完成对于编程教学过程的录制，简单方便、成本低；

2、可以在线编译，省去了开发环境的配置、开发工具的安装；

3、学生可以直接使用浏览器在线播放，节省流量，并且可以随时使用老师的代码进行编辑、运行。

附图说明

图1是本发明的结构示意图。

具体实施方式

下面将结合附图以及具体实施方式对本发明作进一步的说明：

如图1所示，本发明所述的编程教学交互式视频录播系统，包括录制客户端、服务器和播放客户端，其中，

录制客户端：监听设备层的操作信息并记录与操作信息对应的代码内容，代码内容与时间记录为一条代码信息，同时录制教学音频；

服务器：接收录制客户端和播放客户端提交的代码并进行编译运行，把编译运行的结果返回并显示在相应的录制客户端和播放客户端；保存录制客户端提交的操作事件、代码信息及音频信息；

播放客户端：从服务器中提取数据，解析并显示和播放对应时刻的代码信息和音频信息。

作为本实施例的具体改进，录制客户端包括录制区，录制区包括：

录制模块，用于开启和终结录制；

代码编写模块，用于编写代码；

编译运行模块，用于把代码提交到服务器进行编译运行；

结果显示模块，用于显示服务器返回的编译运行结果。

作为本实施例的具体改进，录制区还包括目录模块，用于显示文件目录。

作为本实施例的具体改进，录制客户端还包括预览区，预览区包括：

播放模块，用于显示和播放解析出来的代码信息和音频信息；

代码显示模块，用于显示解析出来的代码信息以及对代码重新编辑；

编译运行模块，用于把代码提交到服务器进行编译运行；

结果显示模块，用于显示服务器返回的编译运行结果。

作为本实施例的具体改进，预览区还包括目录模块，用于显示文件目录。

作为本实施例的具体改进，播放客户端包括：

播放模块，用于显示和播放解析出来的代码信息和音频信息；

代码显示模块，用于显示解析出来的代码信息以及对代码重新编辑；

编译运行模块，用于把代码提交到服务器进行编译运行；

结果显示模块，用于显示服务器返回的编译运行结果。

作为本实施例的具体改进，播放客户端还包括目录模块，用于显示文件目录。

作为本实施例的具体改进，服务器包括云编译服务器和媒体服务器，云编译服务器用于接收录制客户端和播放客户端提交的代码并进行编译运行，把编译运行的结果返回并显示在相应的录制客户端和播放客户端，媒体服务器用于保存录制客户端提交的操作事件、代码信息及音频信息。编译运行和保存代码音频信息分为两个不同的服务器，互不干扰，保证通讯质量。

作为本实施例的具体改进，录制客户端和播放客户端均包括浏览器客户端，只需浏览器即可完成编程教学的录制和播放，简便快捷。

作为本实施例的具体改进，设备层包括键盘，用户通过敲击键盘输入代码。

本发明所述的录制客户端在浏览器打开，开始视频录制之后，可以进行代码的编写、编译、运行，javascript代码会监听键盘按键的每一次敲击，当按键抬起时并触发javascript的保存动作代码，把用户编写的代码和时间作为一条数据保存到mysql数据库里。在用户操作的同时，浏览器在持续录音，记录老师讲课的内容。录制完成之后点击保存，系统会把这些操作信息、老师编写的代码以及录音都提交到服务器保存到mysql中。

本发明所述的播放客户端在浏览器打开，在观看已经录制好的编程操作时，从服务器把老师的操作信息以及录音再次获取到，通过解析数据，把对应时刻的代码内容或者点击操作与语音同步显示在浏览器进行播放。点击暂停，系统会同时停止操作与语音的播放。

编译时，系统会把当前的代码提交到服务器进行编译、运行，将结果返回显示在浏览器上。

本发明所述的编程教学交互式视频录播方法，包括以下步骤：

编程教学交互式视频的录制：

s11.监听客户端设备层的操作信息并记录与操作信息对应的代码，代码与

时间记录为一条代码信息；

s12.录制教学音频；

s13.把操作事件、代码信息和教学音频提交到服务器并保存在数据库里；

s14.服务器接收客户端提交的代码并进行编译运行，把编译运行的结果返回并显示在客户端；

编程教学交互式视频的播放：

s21.从服务器中提取并且解析代码信息和教学音频；

s22.在客户端显示和播放解析出来的对应时刻的代码信息和音频信息；

s23.服务器接收客户端提交的代码并进行编译运行，把编译运行的结果返

回并显示在客户端。

作为本实施例的具体改进，客户端包括录制客户端和播放客户端，编程教学交互式视频的录制在录制客户端完成，编程教学交互式视频的播放在录制客户端和播放客户端完成。

作为本实施例的具体改进，设备层包括键盘，用户通过敲击键盘输入代码；录制客户端和播放客户端均包括浏览器客户端。

本发明在浏览器对用户的行为操作的监控以及声音的录制，最终将操作的事件、内容以及声音保存起来，在播放的时候再按时间进行组合，特别适合编程教学视频的录播，具有以下优点：

1、只需浏览器即可完成编程教学的录制和播放，简便快捷。

2、支持对正在播放的内容实时编辑、编译、运行，形成交互式的教学视频。

3、将用户操作的数据和录音相结合，不仅产生过程简单，而且容量小、体验效果好。

对于本领域的技术人员来说，可根据以上技术方案以及构思，做出其他各种相应的改变以及变形，而所有的这些改变和变形都应该属于本发明权利要求的保护范围之内。