投屏批注方法和系统与流程

本发明涉及显示技术领域，尤其涉及一种投屏批注方法和系统。

背景技术：

在现代化的课堂上，多媒体互动式教学是现代化课堂的重要组成部分。多媒体交互教学主要通过压缩教师教学现场的视频、音频流结合同步浏览课件命令，形成教学资源流，利用网络实时传送到远端学生的电脑上，学生可以及时通过举手提问、共享教师端程序、文字交流等方式实现互动教学。如以下场景：学生利用电子书本、笔记本电脑、平板、手机终端等获取教学课件以及课堂作业，并现场提交作业，甚至提交自己的学习进度以便教师安排；学生将自己的移动终端屏幕投影到无线投屏仪上提问或是分享，教师通过远程控制来进行指导。这就要求无线投屏的过程中具有良好的流畅性和实时性。流畅性是指在传屏播放过程中不出现卡顿、不出现画面失真，同时播放的帧率至少20fps以上；实时性是指两个终端间的画面同步延时至少要小于200ms。

目前，采用标准协议所能达到的无线投屏的同步延时基本在200ms以上，甚至达到秒级，特别是在无线环境和硬件资源差的条件下，导致了显示批注的笔记滞后而引起操作不便，降低用户体验感。

技术实现要素：

本发明的目的是提供一种投屏批注方法和系统，解决了由于无线环境和硬件资源影响产生的显示批注的笔记滞后导致操作不便的问题，让用户感觉不到书写的迟钝感，提高用户体验感。

本发明提供了一种投屏批注方法，包括以下步骤：

将第一终端分为多个画布层，所述多个画布层包括第一画布层和第二画布层；

实时获取坐标信息，根据所述坐标信息在所述第一画布层上绘制第一批注笔迹直接显示，同时将所述坐标信息通过网络传输至第二终端；

对所述坐标信息进行换算，得到坐标换算信息，并根据所述坐标换算信息在所述第二终端中绘制第二批注笔迹；

获取并存储所述第二终端上当前屏幕的截屏图像，将所述截屏图像通过网络传输至所述第一终端，并将所述截屏图像显示在所述第二画布层上；

擦除所述第一画布层上绘制的所述第一批注笔迹，显示所述第二画布层上的所述截屏图像。

作为一种可实施方式，所述实时获取坐标信息，根据所述坐标信息在所述第一画布层上绘制第一批注笔迹直接显示，包括以下步骤：

在实时获取坐标信息后，根据时间顺序将每个所述坐标信息进行存储，得到第一队列数据；

将所述第一队列数据中每个相邻的所述坐标信息进行绘制，得到第三批注笔迹；

同时获取传输延迟值，并根据所述传输延迟值提取第一队列数据中相应的所述坐标信息，得到坐标延迟信息；

根据所述坐标延迟信息对所述第三批注笔迹进行擦除绘制，得到第一批注笔迹。

作为一种可实施方式，所述同时将所述坐标信息通过网络传输至第二终端，包括以下步骤：

将单次的所述坐标信息通过网络传输至第二终端；

或，根据预设时间将所述坐标信息通过网络传输至第二终端。

作为一种可实施方式，所述对所述坐标信息进行换算，得到坐标换算信息，并根据所述坐标换算信息在所述第二终端中绘制第二批注笔迹，包括以下步骤：

获取所述第一终端的第一分辨率和所述第二终端的第二分辨率；

根据所述第一分辨率和所述第二分辨率，对所述坐标信息进行换算，得到坐标换算信息；

根据时间顺序将每个所述坐标换算信息进行存储，得到第二队列数据；

将所述第二队列数据中每个相邻的所述坐标换算信息进行绘制，得到第二批注笔迹。

作为一种可实施方式，所述获取并存储所述第二终端上当前屏幕的截屏图像，将所述截屏图像通过网络传输至所述第一终端，并将所述截屏图像显示在所述第二画布层上，还包括以下步骤：

在获取并存储所述第二终端上当前屏幕的截屏图像后，对所述截屏图像进行压缩处理。

在将所述截屏图像显示在所述第二画布层上前，对所述截屏图像进行解码、渲染处理，并将处理结果显示在所述第二画布层上。

相应的，本发明还提供一种投屏批注系统，包括分层模块、获取批注模块、换算批注模块、获取显示模块以及擦除模块；

所述分层模块，用于将第一终端分为多个画布层，所述多个画布层包括第一画布层和第二画布层；

所述获取批注模块，用于实时获取坐标信息，根据所述坐标信息在所述第一画布层上绘制第一批注笔迹直接显示，同时将所述坐标信息通过网络传输至第二终端；

所述换算批注模块，用于对所述坐标信息进行换算，得到坐标换算信息，并根据所述坐标换算信息在所述第二终端中绘制第二批注笔迹；

所述获取显示模块，用于获取并存储所述第二终端上当前屏幕的截屏图像，将所述截屏图像通过网络传输至所述第一终端，并将所述截屏图像显示在所述第二画布层上；

所述擦除模块，用于擦除所述第一画布层上绘制的所述第一批注笔迹，显示所述第二画布层上的所述截屏图像。

作为一种可实施方式，所述获取批注模块包括第一存储单元、第一绘制单元、提取单元以及擦除绘制单元；

所述第一存储单元，用于在实时获取坐标信息后，根据时间顺序将每个所述坐标信息进行存储，得到第一队列数据；

所述第一绘制模块，用于将所述第一队列数据中每个相邻的所述坐标信息进行绘制，得到第三批注笔迹；

所述提取单元，用于同时获取传输延迟值，并根据所述传输延迟值提取第一队列数据中相应的所述坐标信息，得到坐标延迟信息；

所述擦除绘制单元，用于根据所述坐标延迟信息对所述第三批注笔迹进行擦除绘制，得到第一批注笔迹。

作为一种可实施方式，所述获取批注模块还包括单此传输单元或批量传输单元；

所述单此传输单元，用于将单次的所述坐标信息通过网络传输至第二终端；

所述批量传输单元，用于根据预设时间将所述坐标信息通过网络传输至第二终端。

作为一种可实施方式，所述换算批注模块包括获取分辨率单元、换算单元、第二存储单元以及第二绘制单元；

所述获取分辨率单元，用于获取所述第一终端的第一分辨率和所述第二终端的第二分辨率；

所述换算单元，用于根据所述第一分辨率和所述第二分辨率，对所述坐标信息进行换算，得到坐标换算信息；

所述第二存储单元，用于根据时间顺序将每个所述坐标换算信息进行存储，得到第二队列数据；

所述第二绘制单元，用于将所述第二队列数据中每个相邻的所述坐标换算信息进行绘制，得到第二批注笔迹。

作为一种可实施方式，所述获取显示模块包括压缩单元和解码渲染单元；

所述压缩单元，用于在获取并存储所述第二终端上当前屏幕的截屏图像后，对所述截屏图像进行压缩处理；

所述解码渲染单元，用于在将所述截屏图像显示在所述第二画布层上前，对所述截屏图像进行解码、渲染处理，并将处理结果显示在所述第二画布层上。

与现有技术相比，本技术方案具有以下优点：

本发明提供的投屏批注方法和系统，通过将第一终端分为第一画布层和第二画布层，用户在第一终端上做标注时，第一终端的第一画布层中直接绘制出第一批注笔迹，立即呈现给使用者观看。在第一终端显示第一批注笔迹上的同时，第一终端向第二终端传输坐标信息，第二终端根据坐标信息绘制第二批注笔迹。并且将第二批注笔迹进行回传，在第一终端的第二画布层中显示，同时擦除第一画布层上绘制的第一批注笔迹，最终呈现给用户观看。本发明解决了由于无线环境和硬件资源影响产生的显示批注的笔记滞后导致操作不便的问题，实现了在无线投屏的过程中，在画面传输时的同步延时客观存在的情况下，使用户在进行远程批注时，书写能够得到实时响应，不仅让用户感觉不到书写的迟钝感，而且提高用户体验感。

附图说明

图1为本发明实施例一提供的投屏批注方法的流程示意图；

图2为本发明实施例二提供的投屏批注系统的结构示意图；

图3为图2中获取批注模块的结构示意图；

图4为图2中换算批注模块的结构示意图；

图中：100、分层模块；200、获取批注模块；210、第一存储单元；220、第一绘制单元；230、提取单元；240、擦除绘制单元；300、换算批注模块；310、获取分辨率单元；320、换算单元；330、第二存储单元；340、第二绘制单元；400、获取显示模块；410、压缩单元；420、解码渲染单元；500、擦除模块。

具体实施方式

以下结合附图，对本发明上述的和另外的技术特征和优点进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的部分实施例，而不是全部实施例。

请参阅图1，本发明实施例一提供的投屏批注方法，包括以下步骤：

s100、将第一终端分为多个画布层，多个画布层包括第一画布层和第二画布层；

s200、实时获取坐标信息，根据坐标信息在第一画布层上绘制第一批注笔迹直接显示，同时将坐标信息通过网络传输至第二终端；

s300、对坐标信息进行换算，得到坐标换算信息，并根据坐标换算信息在第二终端中绘制第二批注笔迹；

s400、获取并存储第二终端上当前屏幕的截屏图像，将截屏图像通过网络传输至第一终端，并将截屏图像显示在第二画布层上；

s500、擦除第一画布层上绘制的第一批注笔迹，显示第二画布层上的截屏图像。

这里需要对多个画布层中进行说明，于本实施例中只用到第一画布层和第二画布层用来绘制显示，其他画布层设置为不影响呈现效果，例如设置为空白层；而第一画布层设置在第二画布层的上层，也就是说第一画布层设置在接近视觉处，第二画布层的设置在远离视觉处；通过这种方式，在第二画布层上显示的第二批注笔迹可以被显示在第一画布层上的第一批注笔迹覆盖；而在第一批注笔迹被擦除后，第二批注笔迹可以呈现。第一终端是一个带有批注和远程交互功能的装置，可以是电子书本、电脑、平板以及手机终端的一种；第二终端是一个带有处理功能的装置，可以是电脑。

实时获取坐标信息可以是在响应于点击第一终端，每一次点击都会将点击的当前坐标信息实时记录下来，提高绘制线条的清晰度。

为了保证坐标信息传输的及时性，在网络传输时使用udp(userdatagramprotocol，用户数据协议)和帧率自动调节机制。udp是osi(opensysteminterconnection，开放式系统互联)参考模型中一种无连接的传输层协议。利用udp数据包传输策略和帧率自动调节机制使得本实施例资源消耗小，处理速度快。

本发明提供的投屏批注方法，通过将第一终端分为第一画布层和第二画布层，用户在第一终端上做标注时，第一终端的第一画布层中直接绘制出第一批注笔迹，立即呈现给使用者观看。在第一终端显示第一批注笔迹上的同时，第一终端向第二终端传输坐标信息，第二终端根据坐标信息绘制第二批注笔迹。并且将第二批注笔迹进行回传，在第一终端的第二画布层中显示，同时擦除第一画布层上绘制的第一批注笔迹，最终呈现给用户观看。本发明解决了由于无线环境和硬件资源影响产生的显示批注的笔记滞后导致操作不便的问题，实现了在无线投屏的过程中，在画面传输时的同步延时客观存在的情况下，使用户在进行远程批注时，书写能够得到实时响应，不仅让用户感觉不到书写的迟钝感，而且提高用户体验感。

具体的，步骤s200包括以下步骤：

s210、在实时获取坐标信息后，根据时间顺序将每个坐标信息进行存储，得到第一队列数据；

s220、将第一队列数据中每个相邻的坐标信息进行绘制，得到第三批注笔迹；

s230、同时获取传输延迟值，并根据传输延迟值提取第一队列数据中相应的坐标信息，得到坐标延迟信息；

s240、根据坐标延迟信息对第三批注笔迹进行擦除绘制，得到第一批注笔迹。

例如，第一终端程序启用两个线程使用两层画布，包括第一画布层和第二画布层，都是定义的canvas类，第二画布层用来显示第二终端传输回来的第二批注笔迹，第一画布层用来显示在第一终端的屏幕画的第一批注笔迹。在第一画布层中，实时获取坐标信息采用ontouchevent(motioneventevent)方法来检测到鼠标左击的动作motionevent.action_down时，记录下坐标信息(x2，y2)，根据时间顺序将坐标信息(x2，y2)存入第一队列数据中。然后调用canvas.drawpath(mypath,mypaint)来画线，将第一队列数据中每个相邻的坐标信息进行绘制，也就是将(x2，y2)与队列中的上一个坐标(x1，y1)用线连接起来，最终将第一队列数据中每个相邻的坐标信息用线连接起来得到第三批注笔迹。为了防止绘制结束后画布被清空，调用方法canvas.drawbitmap(mybitmap,0,0,mbitmappaint)。

在获取传输延迟值，并根据传输延迟值提取第一队列数据中相应的坐标信息，得到坐标延迟信息；采用调用方法mybitmap.erasecolor(myresources.getcolor(r.color.touming))将位图清除为白色，并且调用invalidate()根据坐标延迟信息刷新绘制得到第一批注笔迹。

这里需要说明的是对于存放坐标的队列长度的计算：假设鼠标移动一个坐标的时间是t毫秒，则第一终端存放坐标的队列的长度为l>＝n/t。如果队列的长度太长，会浪费资源；如果队列的长度太短，则会在擦除的时候，使得前面的线条擦除不干净，而影响批注视觉体验。

采用上述方法，在无线投屏的过程中，在画面传输时的同步延时客观存在的情况下，使用户在进行远程批注时，保证第一终端和第二终端的显示的批注笔迹一致性，不仅让用户感觉不到书写的迟钝感，而且提高用户体验感。

具体的，步骤s200还包括以下步骤：

将单次的坐标信息通过网络传输至第二终端；将坐标信息进行单次传输使得绘制的批注笔迹更加清楚，提高批注笔迹质量。

或，根据预设时间将坐标信息通过网络传输至第二终端；降低系统运算负担，提高运算速率；于本实施例中，采用根据预设时间将坐标信息通过网络传输至第二终端，预设时间根据网络传输的传输延迟值确定。

具体的，步骤s300包括以下步骤：

s310、获取第一终端的第一分辨率和第二终端的第二分辨率；

s320、根据第一分辨率和第二分辨率，对坐标信息进行换算，得到坐标换算信息；

s330、根据时间顺序将每个坐标换算信息进行存储，得到第二队列数据；

s340、将第二队列数据中每个相邻的坐标换算信息进行绘制，得到第二批注笔迹。

对坐标信息进行换算的换算公式为：

式中，第二终端坐标换算信息为(x'2，y'2)、第一终端坐标信息为(x2，y2)、第一终端屏幕分辨率为(w1，h1)以及第二终端屏幕分辨率为(w2，h2)。

具体的，步骤s400还包括以下步骤：

s410、在获取并存储第二终端上当前屏幕的截屏图像后，对截屏图像进行压缩处理。采用h.264的压缩技术，提高传输速度，降低资源占用率；

s420、在将截屏图像显示在第二画布层上前，对截屏图像进行解码、渲染处理，并将处理结果显示在第二画布层上。

第一终端使用ffmpeg视频解码库对接收到的截屏图像进行解码，得到的yuv图像数据格式，再对yuv图像数据进行渲染处理。用户最后看到的图像是两层画布层上的像素按不同比例合成的。两层画布层上的像素都采用rgba的格式(a代表透明度)，在同一坐标下，第一画布层的像素为r1g1b1a1，第二画布层的像素为r2g2b2a2，其中，a1+a2＝255。最后，用户看到的点的像素为rgb，其中r＝(r1a1+r2a2)/255，g＝(g1a1+g2a2)/255，b＝(b1a1+b2a2)/255。刚开始时，第一画布层是透明的(让所有的像素点的a1设置为0)，当在第一画布层上开始画线时，根据第一队列数据中的坐标信息，将显示出来的线条的像素点的a1设置为255；当客户端的屏幕显示在第二画布层时，就需要将第一画布层上前n毫秒的像素点的a1设置为0。在判断鼠标的状态为motionevent.action_up时，将第一队列数据中所有坐标信息的像素点中的a1设置为0。清空队列，将上一层画布的位图全部清除为透明色，从而能将下一层的图像全部显示出来。

采用上述方法，在网络状态很差的情况下，也能保证在无线投屏的过程中，第一终端和第二终端的显示的批注笔迹一致性，不仅让用户感觉不到书写的迟钝感，而且提高用户体验感。

基于同一发明构思，本发明实施例还提供一种投屏批注系统，该系统的实施可参照上述方法的过程实现，重复之处不再冗述。

如图2所示，是本发明实施例二提供的投屏批注系统的结构示意图，包括：

分层模块100用于将第一终端分为多个画布层，多个画布层包括第一画布层和第二画布层；

获取批注模块200用于实时获取坐标信息，根据坐标信息在第一画布层上绘制第一批注笔迹直接显示，同时将坐标信息通过网络传输至第二终端；

换算批注模块300用于对坐标信息进行换算，得到坐标换算信息，并根据坐标换算信息在第二终端中绘制第二批注笔迹；

获取显示模块400用于获取并存储第二终端上当前屏幕的截屏图像，将截屏图像通过网络传输至第一终端，并将截屏图像显示在第二画布层上；

擦除模块500用于擦除第一画布层上绘制的第一批注笔迹，显示第二画布层上的截屏图像。

如图3所示，是获取批注模块200的结构示意图，包括第一存储单元210、第一绘制单元220、提取单元230以及擦除绘制单元240；

第一存储单元210用于在实时获取坐标信息后，根据时间顺序将每个坐标信息进行存储，得到第一队列数据；

第一绘制模块用于将第一队列数据中每个相邻的坐标信息进行绘制，得到第三批注笔迹；

提取单元230用于同时获取传输延迟值，并根据传输延迟值提取第一队列数据中相应的坐标信息，得到坐标延迟信息；

擦除绘制单元240用于根据坐标延迟信息对第三批注笔迹进行擦除绘制，得到第一批注笔迹。

进一步地，获取批注模块200还包括单此传输单元或批量传输单元；

单此传输单元用于将单次的坐标信息通过网络传输至第二终端；

批量传输单元用于根据预设时间将坐标信息通过网络传输至第二终端。

如图4所示，是换算批注模块300的结构示意图，包括获取分辨率单元310、换算单元320、第二存储单元330以及第二绘制单元340；

获取分辨率单元310用于获取第一终端的第一分辨率和第二终端的第二分辨率；

换算单元320用于根据第一分辨率和第二分辨率，对坐标信息进行换算，得到坐标换算信息；

第二存储单元330用于根据时间顺序将每个坐标换算信息进行存储，得到第二队列数据；

第二绘制单元340用于将第二队列数据中每个相邻的坐标换算信息进行绘制，得到第二批注笔迹。

进一步地，参阅图1，获取显示模块400包括压缩单元410和解码渲染单元420；

压缩单元410用于在获取并存储第二终端上当前屏幕的截屏图像后，对截屏图像进行压缩处理。

解码渲染单元420用于在将截屏图像显示在第二画布层上前，对截屏图像进行解码、渲染处理，并将处理结果显示在第二画布层上。

本发明提供的投屏批注系统，通过将第一终端分为第一画布层和第二画布层，用户在第一终端上做标注时，第一终端的第一画布层中直接绘制出第一批注笔迹，立即呈现给使用者观看。在第一终端显示第一批注笔迹上的同时，第一终端向第二终端传输坐标信息，第二终端根据坐标信息绘制第二批注笔迹。并且将第二批注笔迹进行回传，在第一终端的第二画布层中显示，同时擦除第一画布层上绘制的第一批注笔迹，最终呈现给用户观看。本发明解决了由于无线环境和硬件资源影响产生的显示批注的笔记滞后导致操作不便的问题，实现了在无线投屏的过程中，在画面传输时的同步延时客观存在的情况下，使用户在进行远程批注时，书写能够得到实时响应，不仅让用户感觉不到书写的迟钝感，而且提高用户体验感。

本发明虽然已以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改，因此，凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术方案的保护范围。