基于HTML5的交互‘画板’外文翻译资料

 2023-03-15 15:21:28

基于HTML5的交互lsquo;画板rsquo;

摘 要

会议和课堂要求他们的参与者们在现场出席，白板作为一个在这样的场景下广泛使用的工具，它的创造性和可交互性十分的有限，因此我们需要寻求更好的工具去替代它。在本文中，我们开发了一个不受任何位置、操作系统或者设备限制的web应用程序来增强我们之间的协作。我们的应用程序允许用户通过绘图、图像、聊天、音频和视频进行交互和共享信息。他们可以创建单独的房间，并仅与指定的人共享房间id。用户只需访问web浏览器和internet即可使用该应用程序。同时参与的用户数量没有上限，也不需要下载任何插件。整个系统由HTML5、Node.js和WebSocket搭建而成。WebSocket对消息实时的并发传输提供了支持。所有用户都可以同时与系统进行交互。实验结果表明，该系统具有很高的可扩展性。从实验中可以明显看出，响应延迟非常低，系统的流畅程度足以为用户提供实时的交互体验。

关键词：音频信息，聊天，协作，绘画, HTML5, Node.js, 视频消息

  1. 介绍

传统的白板和黑板广泛的被使用在办公室、学院和学校。它们使用记号笔和粉笔在黑板上显示信息。白板的使用者可以自由地绘制出不同类型的形状。但是同时物理的白板也是不方便的，因为它不允许房间里的每个人同时展示他们的想法。随着科技的进步，人们正在寻找一种更具互动性并且更注重协作的解决方式。

物理的白板主要有这几种局限：

1．在某些时间点，只有非常有限的几个人可以站在白板前。其他人既不能互动，也看不到白板上的某些部分。

2．我们在可选择工具的数量以及标记的颜色类型上都十分的有限。

3．如果讲师想要创建多个新的副本，那他必须手动创建。同样，其他的成员必须在自己的本子上重新绘制相同的图案以记录原来的副本。这会增加工作量，降低效率。

4．白板的大小是有限的，可能不足以表达一个完整的思路。

随着电子学习的发展，教师希望与尽可能多的学生交流。虽然学生通常会观看教授讲座的录音，但这还没有完全解决这个需求，因为没有即时解决疑问的渠道，我们无法获得和课堂一样的效果。但如果可以在教师和学生之间进行双向互动的情况下进行现场会话，那么问题就会迎刃而解。

这些白板还要求所有想要交互或者查看白板上显示的数据的人都能亲自到场。如果成员位于不同的区域，有效的实时通信会被阻碍。在当今世界，一个人亲自出席每次会议是不现实的，这会浪费许多的金钱和时间。

在本文中，我们设计并实现了一个可行的替代方案——一个虚拟白板。计算机可以提供物理白板所缺少的交互性和动态行为。此外，相对昂贵的计算机投影设备的出现使得在教室中布置一个实惠的投影计算机显示器成为可能。

这样的白板不仅允许人们在不同的地点相互交流，还允许他们以各种方式表达自己的想法。我们可以在画布上画画，聊天，保存图纸以便将来查看，并发送音频和视频。它将允许多个成员同时进行交互。我们将使用HTML5，Node.js，Socket.io和JavaScript构建虚拟白板。

通常应用程序会受限于特定的操作系统。我们的想法是使用HTML5，我们将创建一个Web应用程序，它将使白板在所有类型的设备上工作而不考虑操作系统。我们利用事件驱动型的Node.js创建一个快速而轻便的服务器。同时Socket.io将在客户端和服务器之间创建一个持久连接，从而实现它们的实时通信。

  1. 相关作品

Sin等人讨论了如何使用HTML5和CSS3创建基于web的应用程序。他们已经构建了基于map的web应用程序原型，并列出了基于web的应用程序的优缺点。他们的发现意味着基于web的应用程序可以在很大程度上模仿本机应用程序，并在大多数平台上提供相近的性能。当然，在需要设备硬件的领域，如陀螺仪等，本地应用程序会是更好的选择。

Wenzel等人开发了一个协作系统，以促进实时协作。它们允许用户提取和添加便签。通过测量SVG和HTML5 Canvas性能之间的差距，他们认为Canvas更适合作为渲染的选项。此外，他们还使用R-树数据结构来存储和搜索数据项。对于绘图活动，第一个Canvas上的图像会在第二个Canvas上绘制，第二个画布隐藏在背景后充当图像缓冲区，然后将其绘制到前一个Canvas上。我们通过直接捕获变化并立即发送更改的操作，消除了保留缓冲区的开销。由于我们是即时发送操作的，因此我们不用去维护数据结构来执行搜索查询。

Santarosa等人讨论了NIEE/UFRGS团队开发的可访问接口的可用性和可访问性，NIEE/UFRGS团队设计了一个白板工具，以改善残疾人的体验。他们根据W3C建议的指导方针提出了该工具的开发。这个工具允许他的用户聊天以及发送视频和音频。

Foster等人研究发现，通用的计算机界面的使用可以有效的提高学生的生产力。

Liu等人的研究表明WebSocket的连接效率是Http连接的十倍以上。WebSocket增加了带宽，从而减少了网络拥塞和延迟。他们还展示了如何在客户端和服务端实现WebSocket。当用户数量上升时，持久Http连接会占用许多的的内存资源。在我们的模型中，WebSocket非常实用的，因为它是减少网络拥塞和支持实时信息传输并发的最合适的选择。

  1. 技术

开发过程中使用的技术/方法如下：

    1. HTML5

HTML5是HTML标准的最新版本。它不仅具有新的语法功能，而且无需额外的支持或插件即可提供丰富的多媒体内容。我们将在web应用程序中使用的HTML5功能包括：

    1. Canvas:

它是一个基于像素的矩形区域，可以在其上绘制图形。用户使用画布区域绘制直线、正方形、圆形和各种其他形状。它可以动态地创建基于矢量的图形，让我们有机会创建丰富的交互式网站，而这些网站可以在任何浏览器和支持HTML5的任何设备上被查看。

    1. Video and Audio support:

HTML5为音频和视频元素提供本机支持。使用HTML5，用户不再需要下载插件来观看视频或听歌曲。我们可以使用lt;audiogt;和lt;videogt;标签嵌入音频和视频，并使用属性定制多媒体体验。Control属性添加视频控件，如播放、暂停和音量。Height和Width属性告诉浏览器视频的像素大小，src属性指向要显示的源文件。但我们必须注意，不同的现代浏览器并不具有一致的视频编解码器，因此我们必须有多个不同格式的源文件作为备用。

    1. Web Storage:

它允许网页在客户端Web浏览器中本地存储命名的键、值对。在本地存储中的数据，即使在您离开网站、关闭浏览器选项卡或退出浏览器后，它仍然存在。会话存储器存储单个会话的数据，当浏览器选项卡或窗口关闭时，会话结束。它是保密的，不像Cookie，它不包括在服务器请求中，并且信息永远不会传输到远端的web服务器，这使本地存储更安全、更快捷。

    1. Node.js

它是一个基于谷歌“V8”引擎的服务器端JavaScript环境。Node服务器进程是单线程的，基于异步I/O事件模型。事件驱动编程具有更高的效率、更好的扩展性，因为它使开发人员能够更好地控制应用程序活动之间的切换。异步I/O意味着它可以防止应用程序在等待I/O操作时被阻塞。在多线程开发中，当操作系统决定执行哪个线程以及线程的执行时间时，开发人员会对系统状态失去一定程度的控制，同时它还会带来死锁之类的问题。Node服务器可以同时为许多客户机提供服务。Node包管理器（npm）提供了库及其依赖项的安装服务。

    1. JavaScript

它是一种面向对象的语言，程序员可以在其中创建和删除自己的对象。它可以与HTML源代码交互，从而使站点具有动态内容。它允许我们控制浏览器。我们还可以选择直接将JavaScript嵌入HTML代码中。如果我们使用.js扩展名将脚本放在单独的文件中，那么脚本可以很容易地在多个页面上复用。由于JavaScript代码可以在用户浏览器中本地运行，让浏览器可以快速响应用户操作，从而使应用程序更具响应性。它可以用来创建客户端脚本同样也可以用来编写服务器端程序。

    1. Json

JavaScript对象表示法提供了一种简单的语法，与XML相比，它的结构不太详细。与XML相比，JSON更具限制性，因为JSON支持的数据格式数量远小于XML。在XML中。我们可以包括照片。音频视频和其他文件。这可能会对安全造成威胁，因为其中可能包含可执行文件。将JSON文件中的数据导入Perl、Ruby、JavaScript和Python等编程语言十分的容易，因为JSON是轻量级的，它的数据的序列化和反序列化速度都十分的迅速。

  1. 模块

Node.js有一个简单的模块加载系统。在Node.js中文件和模块一一对应。

    1. Socket.io

它是一个针对Node.js的实时开源应用程序框架。如果浏览器支持WebSocket，它将使用WebSocket，否则它将使用任意一个回退协议，如Flash、AJAX长轮询、AJAX多部分流、IFrame、JSONP轮询。因此，它更加的灵活。WebSocket通过单个TCP连接提供全双工通信通道。客户端和服务器之间存在持久连接，响应以事件驱动的方式接收，而无需轮询服务器以获得回复。我们使用Node.js创建经典的Http服务，然后将服务器实例传递到socket.io。当客户端和服务器可以相互推送消息时，它有助于数据的实时传输。

    1. Formidable

它用于解析表单数据，重点是上传和编码图像和视频。它提供了各种各样的功能，使文件处理变得容易。例如，我们可以检查文件名和mime类型，同时它还允许我们设置用于放置上传文件的目录，我们可以稍后操作它们。我们可以查询上传的开始，结束状态及磁盘已写入的字节数。

    1. MySql

它是一个Node.js用于实现MYSQL协议的JavaScript驱动程序。在建立连接时，我们可以设置主机、端口、用户和密码等参数。MYSQL协议是顺序的，因此我们需要多个连接来并行执行查询。我们可以使用连接池管理多个连接，我们可以使用连接池当传入一个http请求时。它将使用循环竞争的方式为多个连接提供服务。

    1. New Relic

New Relic是一个SaaSNode.js应用程序监控工具，用于监控整个应用程序。我们需要安装和配置New Relic

剩余内容已隐藏，支付完成后下载完整资料

英语原文共 8 页，剩余内容已隐藏，支付完成后下载完整资料

资料编号：[596052]，资料为PDF文档或Word文档，PDF文档可免费转换为Word

原文和译文剩余内容已隐藏，您需要先支付 30元 才能查看原文和译文全部内容！立即支付

以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。

您可能感兴趣的文章