支持手势识别的云黑板教学平台研究与实现*

简琤峰 陈嘉诚 任炜斌 张美玉

（浙江工业大学计算机学院，浙江杭州310023）

支持手势识别的云黑板教学平台研究与实现*

简琤峰 陈嘉诚 任炜斌 张美玉

（浙江工业大学计算机学院，浙江杭州310023）

针对近几年“云教育”和自主移动学习的应用发展存在的缺陷，在借鉴传统课堂双向交流教学模式优点的基础上，文章设计了支持移动终端手势识别的云黑板教学平台并给出了系统关键技术的实现方法。通过引入移动终端手势识别的人机交互技术，模拟传统教学黑板板书的方式，提供矢量的草图交互绘制和临摹，从而给自主移动学习教学平台带来了崭新的用户体验。

移动终端；云黑板；手势识别；教学平台

引言

随着云计算技术的发展及应用，远程教育进入了“云教育”时代。“云教育”在交互及协作方面有着较大的进步，是对传统远程、在线教育的发展和延伸[1][2][3]。同时基于移动终端的自主学习模式也被广泛推广[4]，是“云教育”在移动终端应用领域的拓展形式。它通过移动终端，提供能随时主动参与学习的服务。这样的自主移动学习模式能体现学习者学习的主动性，使学习者能够清楚认识到自身所学知识的动力所在，能培养学习者强烈的学习动机和浓厚的学习兴趣。

本研究针对近几年“云教育”的发展和自主移动学习的应用过程中存在的缺陷，研究并构建了一种支持移动终端手势识别的“云黑板”教学平台。该教学平台具有支持模拟黑板交流、支持移动终端手势识别和支持跨平台多用户在线实时参与三大特色。系统结合手势识别，模拟黑板板书的方式，提供矢量的草图交互绘制和临摹，教师和学生实时使用“云黑板”进行教学交流，能充分发挥群体学习互动用户体验效果，能有效弥补当前远程教育中移动教学平台的不足，从而给自主移动学习教学平台带来崭新的用户体验，对于现代远程教育的探讨和改进具有重要的应用参考价值。

一移动终端云黑板教学需求

现有的“云教育”在克服传统教育劣势的同时，也存在一些缺陷。一方面教师无法有效地引导和评估学生的进度和收益；另一方面学生相互之间存在交流隔阂，无法利用学生之间存在的差异性来激发个体主动参与的积极性[5]。而在传统课堂教育中，黑板作为提供实时交流教学的载体，引导教师与学生之间以及学生与学生之间参与互动，为课堂教学带来极大的便利。因此，“云黑板”就是对传统课堂教学优势的一种有效继承。

“云教育”中教师与学生之间的交互，可以被分成教师与设备之间、学生与设备之间的交互。所以，“云教育”中交互的实质就是人机交互。而现有的云教育系统一般通过鼠标点击进行操作，需要教师频繁中断思路，也使得学生的注意力被转移。所以，“云教育”需要更自然的交互方式（如手势交互）。此外，现有的移动设备上存在的笔划手势识别，是将用户在设备屏幕上绘制的笔划识别为某种手势命令，但是移动终端狭小的界面只能提供很差的用户体验。而基于视觉的手势识别技术[6]可以很好地解决这一问题，它通过手机摄像头获取手势的方式具有便捷性和适用面广的优势。

综合上述，“云黑板”教学关键在于如何以贴合人们习惯的人机交互方式将传统课堂中的黑板教学应用于现有“云教育”中，而“云黑板”教学平台技术实现的关键在于解决面向移动终端手势识别的黑板板书技术。

二“云黑板”教学平台关键技术的实现

在传统的计算机辅助设计领域，手势识别概念更多地归属于笔式交互技术范畴。利用笔划手势实现是将用户绘制的笔画识别为某种手势命令（如拷贝、删除、旋转等命令），相关研究已应用于某些三维建模软件中，具有比较成熟的理论基础[7]。但是如果将这种笔划手势模式直接应用于移动终端，由于移动终端狭小的界面将导致很差的用户体验，根本无法发挥移动终端用户体验设计的优势。当前移动终端手势识别的主流是基于视觉的手势识别技术，通过手机摄像头来识别手势，具有便捷性和适用面广的优势；但是，这种技术的缺陷在于无法精确定位识别，无法满足草图设计对精度的要求，因此，面向移动终端手势识别的黑板板书技术的关键，在于如何取长补短发挥两者的优势。该教学平台通过对模拟黑板和手势控制这两个关键技术的研究和实现，较好地解决了上述问题。

1系统相关功能概述

（1）矢量图形绘制

主要完成图形对象的生成和相关参数的设置。图形对象包括直线、圆、椭圆、矩形、任意曲线、贝塞尔曲线等。

（2）矢量图形编辑

主要完成对图形对象的编辑操作，如图形的移动、删除、缩放和设置图形样式等。

（3）三维草绘

该功能可实现三维绘图功能。可在该模式下绘制任意曲线，通过旋转、拉伸、平铺、扫描等操作将其转换为三维图形，并可通过查看命令在不同视角观察。

（4）手势绘制与控制

该功能需要前端平台系统或浏览器能够很好地支持WebRTC。在客户手势功能开启后，用户可以通过手势使用其它模块的功能。

以上功能模块的重点在于模拟黑板和手势控制等关键技术的实现，将在以下两个小节进行详细描述。

2模拟黑板

（1）基础功能

模拟黑板包含了矢量图形绘制、编辑、三维草绘等模块。相关的各种操作过程都会被同步显示到其他用户的模拟黑板上。对于模拟黑板本身，用户们可以进行各种设置，如比例尺变换、操作的撤销和恢复等。

（2）基础功能的实现方法

用户使用移动设备所看到的，事实上是一个Web页面。它使用了HTM L5中的〈canvas〉标签相关的各项API。它的三维绘制功能是使用了当前流行的three.js的开源WebGL库。它使用Socket.IO在客户端和服务器之间建立长链接，并由服务器将各用户的操作进行广播，以实现不同用户之间的协同。

（3）实现方式的特点

从图形对象的数据形式来讲，所有的图形对象使用统一的数据结构，主体为一个包含控制点的数组以及其它相关数据。统一的数据结构可以简化数据传输和图形捕捉等控制操作的实现。

从代码布局角度来讲，模拟黑板的各项功能都根据三个触发事件进行布置。以移动设备触摸事件为例，考虑三个触发事件：Touchstart、Touchmove、Touchend。按照这三个事件，每个功能的实现都会相应地被分成三块，由控制模块进行调配——这种方式使得系统功能的增加和删除更为快捷。

从模拟黑板的结构来讲，它实际包含三层画布，分别用于显示已完成操作、正在操作、其他用户操作的图形。这样可以保证在局部区域的图形发生改变时，减少整个黑板的更新次数，从而提高性能。

3手势控制

（1）研究方案

手势识别算法的重点在于对手势位置信息的确定。虽然手的形态在使用的过程中会不断改变，但如果假设手在运动和变化的构成中始终保持掌心方向面对摄像头，那么此时手的掌部外观形态基本上可以保持前后状态相似。由此，对于整个手势位置的定位可以通过掌部区域定位。

手势识别一直是计算机视觉领域的一个重大课题。手势识别虽然已经发展了一定的时间，但是一直没有被广泛地应用，其原因就是定位和识别的精确度还不能满足很多方面的需求。事实上，在很多时候这个问题可以通过数据手套[8]或多目摄像头[9]来解决，但其应用成本和便利性是不容忽视的。对于移动终端而言，可以通过较为便利的方式进行处理。只需要能够跟踪到手的运动轨迹，系统就能根据手势轨迹进行操作。因此，目前的手势识别技术对于移动终端设备所需要的大部分操作都是可以实现的。接下来的几个小节将对主要步骤进行详细描述。

（2）肤色分割

通常摄像头所拍摄的图片都是RGB颜色模式，即以红、绿、蓝为三原色叠加产生各种颜色。然而在这种颜色模式下，亮度的变化会对肤色分割产生显著的影响。所以，摄像头拍摄到的手势视频的每一帧都将被转换为YCrCb颜色模式。在这种模式下，色度和亮度会被分离，可以更好地进行肤色分割。其中，Y表示亮度，Cr表示光源中的红色分量，Cb表示光源中的蓝色分量。而RGB颜色模式向YCrCb颜色模式的转换公式如下：

一般而言，人类肤色在这个颜色模式下处于一个范围内，即133≤Cr≤173且77≤Cb≤127。根据这个标准，人手可能出现的位置范围就可以被找到。

tracking.js是一个独立的Javascript库，它可以根据系统开发者设定的条件，在视频中检测是否存在符合条件的颜色块。这里，它被用于检测视频中肤色区域，并从中选取手部所在区域。经过肤色分割后，视频图像经过了一次简化，大部分非肤色区域都被排除。这样使得后续步骤的计算效率可以获得相应的提高。肤色分割对于背景也有一定的要求，即背景中不能存在或只存在少量肤色元素。这种方法的优点在于条件明确，在使用时可以对不良条件进行回避。

（3）掌部定位

已经在人脸识别方面的应用中获得认可的基于Haar特征[10]的级联分类器算法，由于视频中手的形态变化过大，在手势定位和手势识别的应用中并不像在人脸识别时那样令人满意。幸运的是，用户们在使用移动设备时常常是手掌面对设备的摄像头。所以，手的掌部区域形态被假设为保持不变或变化非常小。

这个算法需要预先准备大量的图像作为样本，然后对每个图像提取Haar特征，再训练出相应的基于阈值的弱分类器，进而获得强分类器并将它们链接成为级联分类器。整个训练过程需要耗费大量时间。然而幸运的是，训练之后获得的分类器在运用时的效率较高，可以满足“云黑板”教学平台在效率方面的需求。

（4）手掌重心的定位

在获得的掌部区域中，肤色像素的坐标点都已经可以被轻易地确定。这样一来，手势的掌部重心就可以根据下方这个公式进行计算：

其中，C（x,y）为重心坐标，Pi（x）为肤色像素点的横坐标，Pi（y）为肤色像素点的纵坐标，N为肤色像素点的总数目。

（5）轨迹获取

随着手势位置的不断变化，掌部区域的重心位置也随之改变，从而形成一条曲折的轨迹路线。使用手势移动的方向变化情况来记录手势运动的轨迹，即轨迹描述序列。在每一次手势重心的运动方向发生变化时，新的运动方向会被加入到轨迹描述序列中。在视频中的手消失时，轨迹获取进程结束，系统开始根据轨迹描述序列进行识别。

（6）指令编码

轨迹描述序列记录了手部区域运动方向的变化情况。事实上，这个描述序列能够表达的指令数量，可以随着系统预设基本方向的数量的增加呈指数型增长。例如，将上、下、左、右作为基本方向，即轨迹描述序列由这四个字符组成。那么，在假设轨迹描述序列的长度固定为3的情况下，轨迹描述序列能够编码的指令数量就已经有36条。

（7）悬停判断

有时候，采用悬停判断的方法可以提高某些指令的准确性，即判断手势是否在特定区域停留了一定的时间。这个方法需要掌部区域已经被定位。此时，如果手势的掌部重心坐标记为那么随着时间推移，视频每一帧的重心坐标就可以组成一个序列，即。只要序列中有30个坐标点处于的邻域内，那么这个手势就可以被判断为在这个位置停留了一定时间，所表示的含义可以是“选中目标，进入下一步操作”。

三实例

开发完的“云黑板”教学平台系统1.0版已经可以基本实现预期效果。图1展示了系统的草图绘制展示功能，图2展示了手势三维控制功能，图3展示了图形对象缩放控制功能。

图1 草图绘制展示

图2 手势三维控制

图3 图形对象缩放控制

四研究总结

针对现代远程教育模式所存在的弊端，本研究参考了传统课堂教育模式中的优势，结合当前已有的“云教育”平台，探讨了“云黑板”的教学模式，实现了一种基于移动终端手势识别的“云黑板”教学平台。它能充分发挥群体学习互动的体验效果，且能支持模拟黑板交流，具有面向移动终端的手势识别功能。它提供了矢量草图交互绘制和编辑功能，并使施教者和受教者们实时使用“云黑板”进行教学交流。因此，本研究使远程教育模式在一定程度上继承了传统课堂模式的优点，满足了远程教育模式下对于角色区分的需求，使得教学管理者和施教者能够有效地引导、评估学习者的进度和收益。本研究的另一项主要贡献，是在远程教育中引入新的交互方式，即使用面向移动终端的手势识别技术进行交互。这种方式使学习者能更好地使用移动设备，从而更好地与其他学习者进行互动。系统涉及移动Web网页矢量图形绘制、移动终端手势识别等技术，充分考虑了跨平台性、人机交互便利性等需求，可以有效地弥补当前移动教学平台的不足，对于远程教育模式的进一步研究具有重要的实际参考价值。

[1]冯立国,杨孝堂.远程开放教育课程教学设计的模式框架[J].中国电化教育,2011,(9):53-60.

[2]孙立会.开放教育基本特征的变迁——兼议MOOC之本源性问题[J].远程教育杂志,2014,(2):30-38.

[3]李国斌.现代远程教育公共服务体系的构建与实践——以中央广播电视大学现代远程教育公共服务体系为例[J].现代教育技术,2015,(11):73-78.

[4]刘刚,胡水星,高辉.移动学习的“微”变及其应对策略[J].现代教育技术,2013,(12):34-41.

[5]胡凡刚,仇秀娟,刘玮,等.影响教育虚拟社区中学习动机激发因素的实证分析[J].远程教育杂志,2013,(4):52-59.

[6]Panwar M.Hand gesture recognition based on shape parameters[A].In:Institute of Electrical and Electronics Engineers.International Conference on Computing,Communication and Applications[C].Dindigul,Tamilnadu,India: Institute of Electrical and Electronics Engineers,2012:1-6.

[7]徐礼爽,田丰,吕菲,等.在线双向适应的笔手势界面框架研究[A].《计算机工程与科学》编辑部.中国计算机图形学进展2008——中国计算机图形学大会[C].长沙:《计算机工程与科学》编辑部,2008:1100-1109.

[8]冯志全,杨波,郑艳伟,等.基于用户行为分析的手势跟踪方法[J].软件学报,2013,(9):2101-2116.

[9]郭康德,张明敏,孙超,等.基于视觉技术的三维指尖跟踪算法[J].计算机研究与发展,2010,(6):1013-1019.

[10]Mei K,Xu L,Li B,et al.Areal-time hand detection system based on multi-feature[J].Neurocomputing,2015,(158):184-193.

编辑：小西

Research and Implementation of Cloud-blackboard Teaching Platform with Gesture Recognition

JIAN Cheng-feng CHEN Jia-cheng REN Wei-bin ZHANG Mei-yu
(Computer Science and Technology College,Zhejiang University of Technology,Hangzhou,China 310023)

Aiming at the defects in the“cloud education”and the application of autonomous mobile learning in recent years,a cloud-blackboard teaching platform with mobile terminal gesture recognition was proposed and the key techniques to realize this system was also provided based on the advantage of teaching mutually in traditional classroom. By introducing the human computer interaction technology of mobile terminal gesture recognition,and simulating the blackboard writing way of traditional teaching,this systemcould provide interactive rendering and copy for the vector image,bringing new user experience to autonomous mobile learning teaching platform.

mobile terminal;cloud-blackboard;gesture recognition;teaching platform

G 40-057

A【论文编号】1009—8097（2016）12—0106—06【DOI】10.3969/j.issn.1009-8097.2016.12.016

本文受国家自然基金面上项目“面向设计意图在线交换的语义云粒元重组方法研究”（项目编号：61672461）、国家自然基金面上项目“图像与视频的不变性局部结构特征描述及应用研究”（项目编号：61672463）资助。

简琤峰，副教授，博士，研究方向为云计算、CAD，邮箱为jianc f@zjut.edu.cn。

2016年4月23日