岳 峰

（中原工学院，郑州450007）

基于VNC和HTML5技术的远程教学直播系统设计

岳 峰

（中原工学院，郑州450007）

采用VNC和HTML5技术，构建了远程教学直播系统．该系统可实现教师计算机屏幕内容的直播，用户可以使用支持HTML5标准的浏览器访问该系统网站而无需安装任何插件．

VNC；HTML5；远程教学直播系统

目前的远程教学直播系统主要采用的是实时传输视频数据的模式．该模式不仅对网络带宽占用较大，且学生在访问直播系统时，往往需要安装相应的程序或插件，较为繁琐．当用户使用不允许安装相应程序或插件的终端浏览器时，直播的图像往往无法正常显示出来．这种情况在以iPad为代表的非Windows系统平板电脑和以Android系统为代表的智能手机终端上尤为突出．本文采用VNC和HTML5技术构建了一个远程教学直播系统，用户可以使用支持HTML5标准的浏览器进行访问而无需安装任何插件，拓宽了用户使用终端类型的范围，降低了操作的技术难度，保证了教学直播的效果．

1 VNC和HTML5技术

1．1 VNC技术

VNC（Virtual Network Computing）是一种开源的、跨操作系统平台的屏幕图像分享及远程操作软件［1］，其派生版本有Real VNC、Tight VNC和Ultra VNC等．VNC系统由客户端、服务端和VNC协议组成．VNC服务端能够分享其所运行计算机的屏幕图像；VNC客户端可以察看服务端的屏幕图像并与服务端交互；VNC协议负责在服务端和客户端之间传输图像数据和控制信息．

1．2 HTML5技术

HTML5作为下一代互联网技术的新标准，目前仍处于完善之中，但主流的浏览器，包括微软的Internet Explorer、Google的Chrome、苹果的Safari等，都已经开始了对于 HTML5技术的支持［2］．广义的HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合，它减少了浏览器对于插件的依赖，添加了新的语法特征如＜video＞、＜audio＞和＜canvas＞元素，集成了SVG内容，使程序员在网页中处理多媒体内容时更加容易．

2 远程教学直播系统的实现

通常在使用VNC技术时，需要在用户端安装VNC客户端程序或插件；用户端通过VNC协议直接连接到安装有VNC服务端的计算机．这样做不仅使双方的操作都比较繁琐，还暴露了VNC服务端的计算机IP地址，可能造成潜在的安全隐患．本远程教学直播系统在设计上避免了这种直接连接的方式．

2．1 系统架构

本远程教学直播系统使用Apache Tomcat作为Web服务器和Java应用服务器，使用MySQL数据库存储用户数据等资料信息，使用J2EE技术开发了Web应用程序和组件，实现了VNC－to－XML的转换，使用户不用安装任何插件，就可以直接使用浏览器访问安装有VNC服务端的教师机［3－4］．图1所示为系统架构．

2．2 系统实现

在本系统中，使用Guacamole组件作为VNC客户端，部署在 Web服务器上．Guacamole是使用Java语言开发的基于HTML5的Web应用组件，可实现热部署．教师机需安装VNC服务端，并在 Web服务器上发布直播信息，包含直播时间、内容、教师机IP地址等．Web服务器以Guacamole组件样本为模板，创建一个新的实例，按照教师机提交的直播信息自动建立定时任务，在指定时间将配置好的实例部署到Java应用服务器之中．其中部分关键代码如下：

热部署操作完成后，该直播实例自动开始运行，用户在浏览器中点击该实例的链接即可进入直播界面．由于用户终端连接的是Web服务器的IP地址，从而隐藏了教师机的IP地址，既增强了教师机的安全性，又方便了用户端操作．

本系统直播界面的页面设计中使用到了＜canvas＞元素来显示实时直播的图像信息．＜canvas＞是在HTML5标准草案中新引入的元素，主要用于定义图形．＜canvas＞元素可以使用JavaScript脚本语言在网页上绘制图形、图像或动画，用户计算机的浏览器不需要安装Flash等第三方插件．在本系统中，主要使用了JavaScript脚本对页面中的＜canvas＞元素进行定义及操作［5］．其中部分关键代码如下：

从教师机VNC服务端传回Web服务器的VNC数据，经过Guacamole组件的处理，转化为XML格式的数据，最终由＜canvas＞元素和JavaScript脚本在用户端的浏览器上显示出来．

3 结 语

本文采用VNC和HTML5技术，构建了一个远程教学直播系统．该系统无需用户终端的浏览器安装任何插件，可实现教师计算机屏幕内容的直播；用户终端可以是计算机、平板电脑、智能手机等，只需支持HTML5即可．在HTML5标准逐渐走向成熟，大有取代当前主流的FLASH解决方案的大背景下，该远程教学直播系统的设计方案具有一定的现实意义和前瞻性．

［1］程行荣，陈新．基于VNC和P2P技术的实时课堂直播系统［J］．计算机时代，2007（20）：75－78．

［2］刘华星，杨庚．HTML5——下一代 Web开发标准研究［J］．计算机技术与发展，2011，21（8）：54－58．

［3］刘奎恩，王青．一种基于VNC的智能应用服务系统的设计和实现［J］．计算机工程与应用，2004（9）：131－134．

［4］卢小林．基于虚拟网络计算的网管系统集成的设计与实现［J］．计算机工程，2007，33（3）：82－84．

［5］祁立君，李录平．AJAX结合VML在基于B／S模式的实时监测系统中的应用［J］．微计算机信息，2007（27）：258－260．

Design of Distance Teaching Live Broadcast System Based on VNC and HTML5 Technology

YUE Feng
（Zhongyuan University of Technology，Zhengzhou 450007，China）

With VNC and HTML5 technologies，a distance teaching live broadcast system is built，a live broadcast about teacher’s computer screen content can be achieved；without any plug－ins，users can use any HTML5－capable browser to visit the website．

VNC；HTML5；distance teaching live broadcast system

TP393

A

10．3969／j．issn．1671－6906．2012．01．008

1671－6906（2012）01－0033－03

2012－01－20

河南省教育信息化及网络软件应用研究与开发项目（豫教科外【2002】146号）

岳 峰（1975－），男，河南林州人，实验师，硕士．