眼睛作为人与外界交互的重要感官，视线数据具有十分重要的应用价值。随着技术的发展，近年来，越来越多的学者及相关领域开发者开始关注眼球的运动轨迹及视觉所感兴趣区域。

聚焦环境描写 在教学这一部分时，薛老师先让学生找出文章中明显的两处环境，再通过朗读、替换等方法让学生感知环境描写绝不是可有可无的。“公路”、“餐馆”的环境描写的教学，学生明白了环境描写是为了衬托人物的心境、处境，薛老师趁热打铁，引导学以致用，当堂练习写作——通过想象“里屋”的环境，续写文章的结尾。

视觉兴趣区域的获取主要分为两种方式：通过外部设备获取人眼的视觉兴趣区域和通过智能算法模拟人眼的视觉特性并提取显著性区域。通过外部设备的方法主要是基于数字视频分析(VOG)的非侵入式追踪技术。瞳孔—角膜反射法是基于VOG方法中的主流，又可分为两类：基于二维映射模型的视线估计方法和直接的三维视线估计方法[1]。三维视线估计方法基于RGB-D图像信息，获得的结果较二维视线估计方法更为准确。例如LI等人[2]基于RGB-D摄像头构建了头部坐标系和眼球模型获得瞳孔和眼球中心的位置，从而计算出用户的视线。XIONG等人[3]利用RGB-D摄像头进行眼动检测，同时将结果与仅基于RGB二维摄像头的眼动检测结果进行比较，发现基于三维图像较基于二维图像的检测结果在精度上获得了很大提升。

与此同时，众多学者进行了基于用户视觉兴趣区域的应用的研究。例如CHENG等人[4]利用用户在在线网站上的视线数据提出了“第三只眼”的原型，能够基于用户浏览过的商品的视线数据为用户推荐令其满意的相关商品。H. Zamani等人[5]利用眼动仪追踪人眼视线从而获得用户对于不同商品的兴趣程度和对于特定商品不同部分的兴趣程度，证明了用户的视线与用户消费习惯间存在紧密联系。索铭泽[6]利用了眼动仪对不同认知负荷下用户对于在线广告的反应进行了研究，得出了个性化广告对于用户更具有吸引力的结论。

然而大部分的眼动研究的数据获取基于开发者自行设计的设备或基于价格较为昂贵的Tobii公司、SMI公司等开发的眼动仪。本文基于Intel SR300摄像头和Intel实感软件开发套件，利用摄像头获取到的RGB-D图像信息，结合WebSocket协议[7]和Chrome浏览器构建了一个简便、价格低廉但高效的网页视觉兴趣区域的检测系统。

1 系统简介

1.1 Intel SR300介绍

Intel实感(RealSense)技术能够使用各种感知技术实现深度感知、3D 成像、内部映射以及物体跟踪等功能。Intel为研发者提供了两种摄像头：前置的SR300摄像头和后置的F200摄像头。SR300摄像头可以用来扫描、建模并且追踪在摄像头工作距离范围内的物体。SR300摄像头包含一个分辨率为1 920×1 080的彩色摄像头、一个分辨率为640×480的红外摄像头以及一个红外激光发射器[8]。SR300摄像头的价格在仟元左右，大小为110 mm(宽)×12.6 mm(高)。

此外，Intel还提供了实感软件开发套件(SDK)来简化开发者的工作。SDK给开发者提供了很多应用程序接口(API)，包括人脸分析和追踪、扫描和映射、场景分割、手部追踪、增强现实等。

1.2 系统架构

SR300摄像头的工作距离为20 cm到120 cm，而人们在使用电脑时，眼睛到屏幕的距离在50 cm左右，因此利用SR300摄像头来追踪近距离使用者的眼动行为和视线是可行的。如图1中所示，将摄像头放在一个24英寸的普通显示器的正上方，通过连接一台安装有Win10操作系统的电脑，即可组成一个简易的眼动追踪系统。以屏幕左上角的点为原点建立坐标系，则屏幕上的坐标点可表示为(x，y)，代表了从原点开始的第x个水平方向和第y个竖直方向的像素点。

手术组39例中，优14例，良18例，可5例，差2例，优良率为82.05%；非手术组39例中，优4例，良14例，可13例，差8例，优良率为46.15%，手术组明显优于非手术组，两组比较，差异有统计学意义（P＜0.05）。

图1 基于屏幕建立的坐标系示意图

(2)接着，五个校准点逐个显示在屏幕上，每一点都会持续一秒钟，中心点在开始和结束时出现两次，以确保校准前后的准确性。五个校准点的位置和显示顺序如图4所示。

图2 系统架构示意图

1.3 系统流程

如图3所示，在数据采集之前需要完成一系列的数据校准工作。校准成功后，数据采集立刻开始，为了保证数据的稳定性和准确性，在数据传输到本机前端浏览器之前，需要对数据进行预处理以减少噪声的影响。基于低时延的WebSocket协议，通过localhost回环接口构建本机不同端口间的虚拟网络，实现摄像头调用进程和本机前端浏览器进程之间的消息传输。最后，通过浏览器控制网页，在网页上绘制热点图，显示出用户的视觉兴趣区域。

图3 系统主要流程

2 校准

在捕捉和跟踪用户的视线之前，需要校准系统以建立屏幕上坐标点与人眼视线之间的联系。SDK 提供了应用程序接口(API)，包括校准点的坐标(x，y)和校准处理的时间。通过调用API以及Windows 10中的系统接口可以实现弹出提示框、绘制图形等操作，从而在屏幕上显示校准点并指导用户完成校准过程。校准的过程如下：

(2)获得浏览器滚动条的位置数据。网页长度往往大于屏幕的高度，因此需要将基于屏幕局部网页的坐标数据和滚动条位置进行叠加计算，得到基于整个网页的坐标数据。

校准完成后，SDK通过捕捉人眼的RGB-D图像与校准时采集的图像进行对比，输出数据为屏幕上的坐标点。由于SDK中的算法主要基于图像处理，所以输出的坐标点数据会被人眼的眨眼动作以及背景噪声所影响，导致输出的数据波动较大。只有去除异常点并利用平滑算法处理之后，输出数据才较为稳定。

系统利用SR300摄像头采集用户的眼动数据并将其在网页上的兴趣区域进行可视化，充分利用了SDK提供的眼动表情检测数据以及视线点检测数据。在摄像头调用进程和 Chrome浏览器之间的数据传输基于WebSocket协议。开发的插件能在浏览器中控制本机设备，同时显示用户在网页上的视觉兴趣区域。系统的架构如图2所示。

图4 校准页面及校准点信息

(3)如果用户的头部有很大的摇摆或者在一个校准点的持续时间内，其视线发生大幅度的移动，系统会检测到这种情况并通知用户重启校准程序。

3 数据采集及预处理

(1)首先，用户点击校准按钮开始校准；

在1917年法国皮卡第的一场战斗中，德军突破了防线，直接冲入了英法联军的阵地，正在挖战壕的华工们猝不及防，他们只得用铁锹、镐头与德国兵肉搏，当英法联军赶到时，大部分华工已战死。

SDK提供了四种平滑程序接口供开发人员选择：稳定器算法(Stabilizer)、加权算法(Weighted)、二次算法(Quadratic)和弹簧算法(Spring)。稳定器算法通过忽略给定阈值下的变化，将一定范围内的数据用一个最近的值表示。加权算法取当前与之前的N个点的数据值按一定权重做加权平均作为当前点的输出值。二次算法利用二次函数在当前点与之前点的数据之间进行插值拟合，达到平滑的目的。弹簧算法则利用线性方程根据当前点与之前点的数据进行插值拟合。数据的平滑性和准确性无法同时满足，所以需要尝试不同的参数和算法，以达到二者之间的平衡。经过多次重复测试，基于二次函数的算法较为合适。

将WebSocket作为数据传输协议，在Chrome浏览器和摄像头调用进程之间传输坐标数据和控制命令可以满足实时性的需求。此外，使用JavaScript语言实现WebSocket客户端和Chrome插件，WebScoket服务器使用C++基于开源库WebSocket++[9]实现。同时，通过localhost回环接口能在本机的不同端口间构建快速稳定的虚拟网络，为数据的传输提供通道。

SDK还提供了眼动表情接口，返回摄像头检测到特定表情的强度值，其中一种眼动表情为闭眼检测。借助这一接口数据，可以对眨眼进行补偿处理，即设置阈值，当系统检测到的闭眼表情返回的强度大于该阈值时，将采集到的眼动数据标记为异常并忽略，同时用被捕获的最后一组正常数据替换。对原始数据进行眨眼补偿处理后，将处理后的坐标点再输入平滑程序接口，可使眼动跟踪结果更加稳定。

如图5所示，在屏幕上绘制一个坐标为(960，200)的点。同时，人眼一直注视着这一点并通过摄像头采集视线数据。原始坐标数据由于眨眼动作而出现不理想的尖峰；仅进行平滑处理后的数据曲线较为平滑，但仍有尖峰出现，并且尖峰的宽度受平滑处理作用而被放大；数据仅经过眨眼补偿处理后，曲线中因眨眼产生的尖峰消失，但是其余数据没有变化；经过眨眼补偿处理以及滤波处理后的数据最为理想。

图5 经过不同处理方式的视线点纵坐标曲线

4 数据传输

4.1 数据传输方法

摄像头调用程序每秒输出约30组坐标数据，两组数据之间的时间间隔相当短。因此，为保证数据的实时性，系统需要高效的方式将数据从摄像头调用进程传输到前端Chrome浏览器进程。WebSocket是一种计算机通信协议，能够基于TCP连接提供全双工通信。WebScoket协议被广泛应用于浏览器和Web服务器之间的连接，主流浏览器均能良好地支持WebSocket协议。同时，WebSocket协议只有几毫秒的时间延迟，响应极快，是实时通信系统的理想传输方式。

(3)根据以往地质资料显示，在前苏联科里亚克高原等地的橄榄玄武岩中发现了金刚石。因此，该调查区发现的橄榄玄武岩对寻找金刚石具有积极的作用。下一步，除对岩体含矿性进行评价之外，还应关注岩浆上升通道位置以及侵位方向，有可能在该区发现金伯利岩岩体。

同时，SDK的原始输出数据也受到眨眼的影响。当眼睑下合时，输出坐标点的纵坐标数据会突然变大，因为摄像头错误地认为用户正在俯视。由于平滑算法的输出基于当前与之前的若干个点，如果此错误数据输入平滑算法后，错误将会被放大，多组坐标点的数据都会受到影响。

门茄采收后将下部老叶摘除，待对茄形成后，剪去上部两个向外的侧枝，形成双干枝，以此类推，当四门斗茄坐住后摘心，一般每株留5-7个茄子。

4.2 浏览器插件

根据Chrome浏览器的标准，插件主要由三个部分组成：popup.js文件、background.js文件和content.js文件。

903 Feasibility of deep learning image-based segmentation algorithm in pathological section of gastric cancer

popup.js文件用于处理用户的点击操作并将其转化为命令控制字，该命令控制字将被发送到摄像头调用进程以控制摄像头或发送到background.js文件以获取滚动条高度。

background.js文件主要有两个功能：

(1)实现WebSocket客户端以建立服务器和客户端之间的稳定连接。

方法：用一块棉布包50克花椒，用绳系紧，加水煮开后泡脚即可。花椒包可以反复利用，用一个星期左右再换新的就可以了。

互联网时代，信息泛滥，网络资源鱼龙混杂，人们呼唤科学权威的信息资讯和优质的网络教育产品。现今，企业、高校和教育研究部门已经开始致力于研究“互联网+教育”产品，但是大部分研究要么仅仅止于理论的推理，要么并没有得到科学完备的论证便急于推向市场，所以市场上优质的产品案例并不多，影响也不大。

同时，content.js实现了两个功能：

3) 焊缝XRD物相分析和断口EDS能谱扫描表明焊缝中含有大量的脆性相Mg2Al3、Mg17Al12，大量的脆性相决定了断口形貌图中断裂面主要以解理断裂为主，有少量的韧窝存在，脆性相的存在严重降低了接头质量。

(1)向网页中注入代码段，控制网页，可视化数据；

(2)由于Chrome浏览器的安全策略，popup.js文件与background.js文件之间不能直接通信。因此需要创建content.js，在popup.js文件和background.js文件之间中转消息。

如图6所示，插件界面中，按钮“开始”用于启动视线追踪程序，按钮“显示追踪结果”将数据在网页上呈现，多选框可以选择所需要的功能。

图6 用户交互界面

4.3 数据同步

为了跟踪用户在整个网页上的视线，需要在坐标数据和滚动条的位置数据之间保持同步。在Chrome插件和摄像头调用进程连接建立并完成校准后，客户端发送命令请求数据，服务器每隔30ms将数据发送到前端Chrome浏览器。一旦background.js文件从服务器接收到数据，就利用JQuery开源库获得当前滚动条的位置，并将滚动条的位置数据和接收到的坐标数据存储为一组数据。得益于WebSocket协议的快速响应，这些复杂的动作可以在两组数据之间的短暂时隙中完成。

在用户停止视线追踪后，滚动条的高度数据与接收到的数据纵坐标相加，使得坐标数据完成从相对于局部页面到整个页面的转换。

5 数据可视化

使用热点图可以直观地呈现处理后的用户视线数据。图7显示了系统对于眼动追踪的精确度测试结果。在图a～c中，分别在页面上绘制一个矩形、圆形和三角形。人眼以顺时针方向分别环视这些几何图形的边缘并利用系统的输出结果检验系统对于视线点追踪的精度。可见，系统可以较准确地追踪到人眼的视线并实现可视化。

图7 视线点追踪结果的精确度测试

在图8中，用户浏览了Bing搜索页面a和亚马逊购物网站搜索页面b，并利用该系统来呈现用户的视觉兴趣区域。图中区域的颜色越偏红，表示用户注视的时间越长，也是用户越关注的地方。实验结果显示，用户对于排名越靠前的搜索结果条目越感兴趣。搜索引擎的排序算法会将与用户输入的搜索关键词相关度最高的选项排列在最前，因此实际浏览时用户对于靠前的搜索结果条目会给予更多的关注，这与系统的测试结果是相符的。

图8 用户浏览实际网页的测试结果

6 结束语

本项目使用了 Intel SR300视觉交互设备，结合 深度图进行眼动跟踪检测，从而绘制出用户在网页上的视觉兴趣区域，具有十分广泛的应用范围，例如帮助研究人员了解消费者对于商品的喜好情况和关注点、帮助网页广告商们改进广告内容、帮助设计者改善网页的布局等。系统仍有待改进的部分，如进一步提高眼动识别的精度、加入多用户的登录和数据存储功能、综合多用户的眼动信息给出追踪结果，都值得进一步的探讨和研究。

参考文献：

[1] 张闯，迟健男，张朝晖，等. 视线追踪系统中视线估计方法研究[J]. 中国科学:信息科学, 2011(5):580-591.

[2] LI J F, LI S G. Eye-Model-Based Gaze Estimation by RGB-D Camera[C]// 2014 IEEE Conference on Computer Vision and Pattern Recognition Workshops, 2014:606-610.

[3] XIONG X, LIU Z, CAI Q, et al. Eye Gaze Tracking Using an RGBD Camera: A Comparison with a RGB Solution[C]// Proceedings of the 2014 ACM International Joint Conference on Pervasive and Ubiquitous Computing: Adjunct Publication, 2014:1113-1121.

[4] CHENG S. “Third Eye”: Designing Eye Gaze Visualizations for Online Shopping Social Recommendations[C]// Proceedings of the 2013 Conference on Computer Supported Cooperative Work Companion, 2013:125-128.

[5] ZAMANI H, ABAS A, M.AMIN M K. Eye Tracking Application on Emotion Analysis for Marketing Strategy[J]. Journal of Telecommunication, Electronic and Computer Engineering (JTEC), 2016, 8(11): 87-91.

[6] 索铭泽. 网页广告的眼动行为研究[J]. 商, 2016(2): 218.

[7] The WebSocket Protocol[EB/OL]. [2017-04-15]. https://tools.ietf.org/html/rfc6455.

[8] Intel ARK (Product Specs). Intel RealSense Camera SR300 Product Specifications[EB/OL]. [2017-05-31]. https://ark.intel.com/products/92329/Intel-RealSense-Camera-SR300.

[9] WebSocket++: Main Page[EB/OL]. [2017-04-15]. https://docs.websocketpp.org/.