HTML5 离线功能介绍
HTML5 是目前正在讨论的新一代HTML 标准，它代表了现在Web 领域的最新发展方向。在HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。
在开发支持离线的Web 应用程序时，开发者通常需要使用以下三个方面的功能：
1. 离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在
在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动
加载，从而让用户正常使用。HTML5 中，通过cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。
2. 在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应
的处理。在HTML5 中，提供了两种检测当前网络是否在线的方式。
3. 本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不
同的存储需求，HTML5 提供了DOM Storage 和Web SQL Database 两种存储机制。前者提
供了易用的key/value 对存储方式，而后者提供了基本的关系数据库存储功能。
尽管HTML5 还处于草稿状态，但是各大主流浏览器都已经实现了其中的很多功能。Chrome、Firefox、Safari 和Opera 的最新版本都对HTML5 离线功能提供了完整的支持。IE8 也支持了其中的在线状态检测和DOM Storage 功能。下面将具体介绍HTML5 离线功能中的离线资源缓存、在线状态检测、DOM Storage 和Web SQL Database，最后通过一个简单的Web 程序说明使用HTML5 开发离线应用的方法。
回页首离线资源缓存
为了能够让用户在离线状态下继续访问Web 应用，开发者需要提供一个cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。本节先通过一个例子展示cache manifest 文件的用途，然后详细描述其书写方法，最后说明缓存的更新方式。
cache manifest 示例
我们通过W3C 提供的示例来说明。Clock Web 应用由三个文件“clock.html”、“clock.css”和“clock.js”组成。
当用户在离线状态下访问“clock.html”时，页面将无法展现。为了支持离线访问，开发者必须添加cache manifest 文件，指明需要缓存的资源。这个例子中的cache manifest 文件为“clock.manifest”，它声明了3 个需要缓存的资源文件“clock.html”、“clock.css”和“clock.js”。
添加了cache manifest 文件后，还需要修改“clock.html”，把 标签的manifest 属性设置为“clock.manifest”。修改后的“clock.html”代码如下。
修改后，当用户在线访问“clock.html”时，浏览器会缓存“clock.html”、“clock.css”和“clock.js”文件；而当用户离线访问时，这个Web 应用也可以正常使用了。
cache manifest 格式
下面说明书写cache manifest 文件需要遵循的格式。
1. 首行必须是CACHE MANIFEST。
2. 其后，每一行列出一个需要缓存的资源文件名。
3. 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。
声明白名单使用NETWORK：标识符。
4. 如果在白名单后还要补充需要缓存的资源，可以使用CACHE：标识符。
5. 如果要声明某URI 不能访问时的替补URI，可以使用FALLBACK：标识符。其后的每一行包含
两个URI，当第一个URI 不可访问时，浏览器将尝试使用第二个URI。
6. 注释要另起一行，以# 号开头。
清单 4 的代码中给出了cache manifest 中各类标识符的使用示例。
更新缓存
应用程序可以等待浏览器自动更新缓存，也可以使用Javascript 接口手动触发更新。
1. 自动更新
浏览器除了在第一次访问Web 应用时缓存资源外，只会在cache manifest 文件本身发生变化时更新缓存。而cache manifest 中的资源文件发生变化并不会触发更新。
2. 手动更新
开发者也可以使用window.applicationCache 的接口更新缓存。方法是检测
window.applicationCache.status 的值，如果是UPDATEREADY，那么可以调用
window.applicationCache.update() 更新缓存。示范代码如下。
清单 5 手动更新缓存
其中最常用的接口是getItem 和setItem。getItem 用于获取指定key 的value，而setItem 用于设置指定key 的value。
DOM Storage 示例
这里给出一个使用了sessionStorage 的例子，localStorage 的用法与它相同。首先使用SetItem 添加了一个名为“userName”的项，它的值是“developerworks”。然后，调用getItem 得到“userName”的值，并且弹出提示框显示它。最后，调用removeItem 删除“userName”。
回页首离线应用示例
最后，通过一个例子来说明使用HTML5 开发离线应用的基本方法。这个例子会用到前面提到的离线资源缓存、在线状态检测和DOM Storage 等功能。假设我们开发一个便签管理的Web 应用程序，用户可以在其中添加和删除便签。它支持离线功能，允许用户在离线状态下添加、删除便签，并且当在线以后能够同步到服务器上。
1. 应用程序页面
这个程序的界面很简单，如图 1 所示。用户点击“New Note”按钮可以在弹出框中创建新的便签，双击某便签就表示删除它。
图 1. 应用程序页面
这个页面的源文件是index.html，它的代码如清单8 所示。
清单8 页面HTML 代码
在body 中声明了一个按钮和一个无序列表。当按下“New Note”按钮时，newNote 函数将被调
用，它用来添加一条新的便签。而无序列表初始为空，它是用来显示便签的列表。
2. cache manifest 文件
定义cache manifest 文件，声明需要缓存的资源。在这个例子中，需要缓存“index.html”、
“server.js”、“data.js”和“UI.js”等4 个文件。除了前面列出的“index.html”外，“server.js”、“data.js”
和“UI.js”分别包含服务器相关、数据存储和用户界面代码。cache manifest 文件定义如下。
data.js 中的代码包含添加便签、删除便签和与服务器同步等数据操作。其中用到了
navigator.onLine 属性、online 事件、DOM Storage 等HTML5 新功能。
o添加便签：addDataItem
1. 通过navigator.onLine 判断是否在线。
2. 如果在线，那么调用addServerItem 直接把数据存储到服务器上。addServerItem 将在
后面列出。
3. 如果离线，那么把数据添加到localStorage 的“toAdd”项中。
o删除便签：removeDataItem
5. 通过navigator.onLine 判断是否在线。
6. 如果在线，那么调用removeServerItem 直接在服务器上删除数据。removeServerItem
将在后面列出。
7. 如果离线，那么把数据添加到localStorage 的“toRemove”项中。
o数据同步：SyncWithServer
在data.js 的最后一行，注册了window 的online 事件处理函数SyncWithServer。当online 事件发生时，SyncWithServer 将被调用。其功能如下。
9. 如果navigator.onLine 表示当前离线，则不做任何操作。
10. 把localStorage 中“toAdd”项的所有数据添加到服务器上，并删除“toAdd”项。
11. 把localStorage 中“toRemove”项的所有数据从服务器中删除，并删除“toRemove”项。
12. 删除当前页面列表中的所有便签。
13. 调用getServerItems 从服务器获取所有便签，并添加在页面列表中。getServerItems 将
在后面列出。
服务器相关代码
服务器相关代码定义在server.js 中。
清单12 服务器相关代码server.js
function addServerItem(title)
{
// 在服务器中添加一项
}
function removeServerItem(title)
{
// 在服务器中删除一项
}
function getServerItems()
{
// 返回服务器中存储的便签列表
}
由于这部分代码与服务器有关，这里只说明各个函数的功能，具体实现可以根据不同服务器编写代码。
o在服务器中添加一项：addServerItem
o在服务器中删除一项：removeServerItem
o返回服务器中存储的便签列表：getServerItems
开始之前 本教程假定您具有 HTML、CSS 和 JavaScript 的一些基本经验。假定您知道什么是 HTML 元素或标记、属性表示什么、HTML 标记的基本语法、Web 页面的常规结构等等。关于 CSS，您应该熟悉元素、类、以及基于 ID 的选择器、CSS 特性的语法以及如何使用内嵌或外部样式表在您的 Web 页面中包括 CSS。最后，假定您具有一些 JavaScript 的工作知识，例如什么是变量、函数、if 语句和for 循环以及如何在您的 Web 页面中包括 JavaScript 代码。如果您决定需要在开始之前先复习一下以上任何技术，请跳至参考资料部分，查找一些有用的教程和文章，它们将帮助您快速了解 HTML、CSS 和 JavaScript 开发的基础知识。 关于本教程 在过去的十年左右，Web 2.0、富因特网应用程序（RIA）以及 Semantic Web 等概念都将 HTML、CSS 和 JavaScript 推到了它们的极限以及极限之外，建成依赖Adobe? Flash 等插件来支持视频和音频等组件以及高度图形化和交互的应用程序。Adobe Flex 开发框架、Microsoft? 的 Silverlight 平台和 JavaFX 都似乎在 HTML 的缺点使得开发人员犯难时来提供支持。但是，使用 HTML5，标记语言将具有完整的多媒体支持、本地存储和脱机应用程序支持、原生 2D 绘图API 以及承载新应用程序开发 API，提供所有这些都是旨在证明 HTML、CSS 和JavaScript 可以为您的 Web 站点和应用程序提供一个丰富的前端。 HTML5 被广泛认为是计划在 2010 年出现的最重要的新技术之一，已经有几本关于该主题的书正在编写过程中，其中一些将最早在今年三月初出版。在过去许多年，Web 都是依赖于外部插件来提供 Web 浏览器自己无法支持的功能，特别是在 2D 绘图、动画以及多媒体方面。HTML 和 CSS 规范的最新版本目的是不再需要这些额外的浏览器组件来促进此类功能，以及减少进行以下细小操作所需的JavaScript（或者在某些情况下完全不再需要 JavaScript）：行拖放、行条带化等等。请按照本教程学习如何使用 HTML5。 回页首 先决条件 HTML5 是一种对象较新的规范，因为浏览器支持是非常有限的（在编写本教程时）。本教程中提供的代码尽可能是跨浏览器兼容的，但是一些功能将无法在所有浏览器中使用。当前为浏览器特定的任何功能都会在本教程中明确指出。为了确保您可以体验所有这些新功能，建议您在开发 HTML5 和 CSS3 应用程序时在您的系统上安装以下 Web 浏览器的最新版本： ?Mozilla Firefox（版本3.5+） ?Apple Safari（版本 4.0+）
附录 A HTML5 基本介绍 一、HTML5 概要 HTML5 是用于取代1999 年所制定的HTML 4.01 和XHTML 1.0 标准的HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5 技术。HTML 5 有两大特点：首先，强化了Web 网页的表现性能。其次，追加了本地数据库等Web 应用的功能。广义论及HTML5 时，实际指的是包括HTML、CSS 和JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX 的需求，并且提供更多能有效增强网络应用的标准集。 在相当长的一段时间内，后继的HTML5 和其他标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了Web 超文本应用技术工作组（WHATWG，Web Hypertext Application Technology Working Group），他们继续开发HTML5。第一份正式草案于2008 年1 月22 日公布。正式的HTML5 标准预计于2012 年3 月公布（成书日期为2011 年12 月）。其实目前各种最新版的浏览器（Safari5/FireFox/Chrome/Opera/IE9）以及智能手机（iPhone/Android 等）中已经支持HTML5。相对于传统的PC 网站，HTML5 在智能手持式设备上已经得到越来越广泛的应用，使用HTML5 开发的各种移动网站、甚至手机游戏已经越来越多地出现在智能手机上。 目前支持HTML 的浏览器有：最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer 9 将支持某些HTML5 特性。 二、HTML5 特性 1．语义特性 HTML5 赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。 2．本地存储特性 基于HTML5 开发的网页APP 拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5 本地存储最重要的技术之一）和API 说明文档。 3．设备兼容特性 从Geolocation 功能的API 文档公开以来，HTML5 为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5 提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与
为VMware ESXi 主机添加本地存储的过程及注意事项 在规划数据中心的时候， 除了考虑当前的实际情况下， 还要考虑将来二至三年的可能出现的 问题。但有的时候，虽然已经做了多种考虑，但在信息化实施的过程中，仍然会碰到问题， 这时就需要管理员根据实际情况进行处理。 例如，在规划虚拟化数据中心的时候，作为群集中的虚拟化主机， 一般不配置本地硬盘，而 是采用共享存储，以实现系统的高可用性。即时为服务器配置本地硬盘， 一般也只是配置一 个较小的磁盘，例如60?120GB 的固态硬盘安装系统。相信这是大多数虚拟化数据中心的选 择与规划。 对于初期规划没有考虑配置本地存储的服务器，如果在后期需要在服务器安装大容量的存 储，并且需要在现有业务不中断的情况下进行， 应该怎么做？在添加本地存储中碰到问题怎 么解决，本文将讨论这个问题。 1己有数据中心服务器添加本地存储思路及方法 1.1现有数据中心拓扑 近期有一个 vSphere 数据中心，该中心有三台 IBM 3650安装 VMware ESXi 5.5的服务器、1 图1 存储、服务器连接示意图 台IBM V3500存储，在服务器与存储之间使用 SAS 连接，拓扑如图1所示。 rm 3650 M4 172. 16- 3 11M 幽0删 宙IZ2. IG L 16.2 im lTO, Id IG. 203 ESCiOh 172. 16 L& I im: 172. l(i 15 201 172. JR 年为貉700 24 千狂丄屋交搂肌 vSphere Client 轉理E 作站
这三台服务器原来本地没有配置硬盘，是使用的存储分配的空间用于系统及数据。 现在用户的需求是：为每台服务器添加6块硬盘，作为本地的存储。因为这三台ESXi组成一个HA并且已经有虚拟机运行，所以要求在添加本地硬盘的过程中，业务不能中断。另外，由于在开始规划的时候，没有考虑为服务器添加本地硬盘，所以没有选择配置支持RAID5 的RAID卡，故在添加本地硬盘时，需要一同添加RAID卡。 1.2解决思路及原理 在VMware vSphere数据中心中，当所有的虚拟机运行在共享存储上、并且为vSphere数据中心配置了”群集”后，当群集中主机多于2台时，如果要对其中的主机进行维护，包括关机 检修、添加配件等，可以将检修的主机置于"维护模式”，此时该主机上运行的虚拟机会自动"迁移”到其他主机，然后可以重新启动或关闭处于"维护模式”的ESXi主机，在关机后可以 为服务器添加硬件（例如添加RAID卡、添加硬盘、重新配置RAID卡）。在本案例中，就使 用这一功能，可以保证业务不中断的前提下，关闭虚拟化主机（安装了VMware ESXi 5.5 系统），为主机添加RAID卡、本地硬盘，甚至为主机重新安装VMware ESXi 5.5系统并重 新加入现有群集，都不会造成业务的中断。 主要步骤如下： （1）使用vSphere Client （或vSphere Web Client ），登录vCenter Server ，将其中一 台主机，例如第1台主机置于”维护模式”，等该主机上的所有虚拟机，都迁移到其他主机上 之后，关闭该主机。 （2）等主机关闭后，断开该主机电源。拆开机箱，插入RAID卡。 （3）安装好硬盘，重新开机，进入RAID卡配置界面，为添加的硬盘，配置RAID。配置完RAID之后，重新启动主机。 （4）重新进入VMwareESXi系统，将新添加的磁盘，添加到ESXi本地存储。然后将当前主机退出”维护模式”。 （5）之后参照（1）?（4）的步骤，将其他主机进入维护模式，关机，添加RAID卡、硬盘，并配置RAID,重新启动系统并退出维护模式，这些不一一介绍。 （6 ）最后检查服务器、存储、及软件系统，没有故障之后，添加存储完成。下面较为详细的介绍整个过程及注意事项。 1.3将主机进入维护模式 使用vSphere Client将要维护的主机进入维护模式，之后关闭主机并断开电源，添加卡，打开 RAID 电源、添加硬盘。主要步骤如下。
本地数据库Demo 用到的技术Html5，JavaScript，Jquery 应用环境：Chrome浏览器 根据Html5提供的LocalDatabase API，在浏览器里面建立数据库，然后下载服务器数据，保存到本地，以便需要的时候直接从本地查询数据库。 详细使用方法： 创建数据库： var db = openDatabase('myData','1.0','test database',1024*1024); openDatabase()方法含有四个参数，第一个参数为数据库名，第二个参数为版本号，第三个参数为数据库的描述，第四个参数为数据库的大小（1024*1024表示1M大小） 执行SQL的主要方法是executeSql() db.transaction(function(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)', []); }) 查询方法： transaction.executeSql(SQLquery,[],dataHandler,errorHandler); 第一个参数是要执行的SQL语句，如如果其中含有未知的参数，用？代替；第二个参数是SQL语句需要用到的参数，即取代第一个参数中的？；第三个参数是查询结果的处理函数；第四个是错误处理函数；数据库查询结果的数据集对象有一个rows属性，其中保存了查询到的每条记录，可以用for循环来一次取出里面的数据： for(var i = 0; i < rows.length; i++){ var temp = rows.item(i); } 操作实例代码： // JavaScript Document var db, edit_record = 0, errormsg = []; errormsg[0] = "Local Database error:"; errormsg[1] = "Failed to open the local database. There may not be enough space left in this domain's quota"; errormsg[2] = "Can't open a database. Get a Browser that supports HTML 5 like Googe Chrome";
为VMware ESXi主机添加本地存储的过程及注意事项 在规划数据中心的时候，除了考虑当前的实际情况下，还要考虑将来二至三年的可能出现的问题。但有的时候，虽然已经做了多种考虑，但在信息化实施的过程中，仍然会碰到问题，这时就需要管理员根据实际情况进行处理。 例如，在规划虚拟化数据中心的时候，作为群集中的虚拟化主机，一般不配置本地硬盘，而是采用共享存储，以实现系统的高可用性。即时为服务器配置本地硬盘，一般也只是配置一个较小的磁盘，例如60～120GB的固态硬盘安装系统。相信这是大多数虚拟化数据中心的选择与规划。 对于初期规划没有考虑配置本地存储的服务器，如果在后期需要在服务器安装大容量的存储，并且需要在现有业务不中断的情况下进行，应该怎么做？在添加本地存储中碰到问题怎么解决，本文将讨论这个问题。 1 己有数据中心服务器添加本地存储思路及方法 1.1 现有数据中心拓扑 近期有一个vSphere数据中心，该中心有三台IBM 3650安装VMware ESXi 5.5的服务器、1台IBM V3500存储，在服务器与存储之间使用SAS连接，拓扑如图1所示。
图1 存储、服务器连接示意图 这三台服务器原来本地没有配置硬盘，是使用的存储分配的空间用于系统及数据。 现在用户的需求是：为每台服务器添加6块硬盘，作为本地的存储。因为这三台ESXi组成一个HA，并且已经有虚拟机运行，所以要求在添加本地硬盘的过程中，业务不能中断。另外，由于在开始规划的时候，没有考虑为服务器添加本地硬盘，所以没有选择配置支持RAID5的RAID卡，故在添加本地硬盘时，需要一同添加RAID卡。 1.2解决思路及原理 在VMware vSphere数据中心中，当所有的虚拟机运行在共享存储上、并且为vSphere数据中心配置了"群集"后，当群集中主机多于2台时，如果要对其中的主机进行维护，包括关机检修、添加配件等，可以将检修的主机置于"维护模式"，此时该主机上运行的虚拟机会自动"迁移"到其他主机，然后可以重新启动或关闭处于"维护模式"的ESXi主机，在关机后可以为服务器添加硬件（例如添加RAID卡、添加硬盘、重新配置RAID卡）。在本案例中，就使用这一功能，可以保证业务不中断的前提下，关闭虚拟化主机（安装了VMware ESXi 5.5系统），为主机添加RAID卡、本地硬盘，甚至为主机重新安装VMware ESXi 5.5系统并重新加入现有群集，都不会造成业务的中断。 主要步骤如下： （1）使用vSphere Client（或vSphere Web Client），登录vCenter Server，将其中一台主机，例如第1台主机置于"维护模式"，等该主机上的所有虚拟机，都迁移到其他主机上之后，关闭该主机。 （2）等主机关闭后，断开该主机电源。拆开机箱，插入RAID卡。 （3）安装好硬盘，重新开机，进入RAID卡配置界面，为添加的硬盘，配置RAID。配置完RAID之后，重新启动主机。 （4）重新进入VMware ESXi系统，将新添加的磁盘，添加到ESXi本地存储。然后将当前主机退出"维护模式"。 （5）之后参照（1）～（4）的步骤，将其他主机进入维护模式，关机，添加RAID卡、硬盘，并配置RAID，重新启动系统并退出维护模式，这些不一一介绍。 （6）最后检查服务器、存储、及软件系统，没有故障之后，添加存储完成。 下面较为详细的介绍整个过程及注意事项。 1.3 将主机进入维护模式 使用vSphere Client将要维护的主机进入维护模式，之后关闭主机并断开电源，添加RAID 卡，打开电源、添加硬盘。主要步骤如下。
HTML5 本地存储 LocalStorage (2010-10-31 20:39:59) 转载▼ 标签： html5 本地存储 分类：前端技术 localstorage sessionstorage storage （转载请注明出处：https://www.doczj.com/doc/e312387318.html,/s/blog_4515673f0100mm6m.html） 说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示：
最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。 userData是IE的东西，垃圾。现在用的最多的是Flash吧，空间是Cookie的25倍，基本够用。再之后Google推出了Gears，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了HTML5把这些都统一了，官方建议是每个网站5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。
支持的情况如上图，IE在8.0的时候就支持了，非常出人意料。不过需要注意的是，IE、Firefox测试的时候需要把文件上传到服务器上（或者localhost），直接点开本地的HTML文件，是不行的。 首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。 if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }
网吧视频监控系统建设系统 技 术 方 案 2015年
目录 1.前言 (2) 2.设计目标 (2) 3.系统设计依据 (4) 4.系统设计原则 (5) 4.1.系统的设计思想 (5) 4.2.网络化结构-“一线多能” (5) 4.3.网络化结构-方便日后扩展 (5) 4.4.分布式结构-系统更加安全 (5) 4.5.分布式存储、分布式观看-更加方便使用 (6) 4.6.单元总结 (6) 5.系统可以完成的功能 (6) 5.1.网络化图像传输 (6) 5.2.多存储服务器图像记录 (7) 5.3.图像回放 (7) 5.4.图像监视 (7) 5.5.监控拼接屏 (7) 5.6.图像输出 (7) 5.7.图像远程传输 (7) 6.技术方案设计 (8) 6.1.每个监控点系统结构（前端子系统） (8) 6.2.监控中心 (8) 6.3.数字化监控系统的优点 (9) 7.系统设备综述 (10) 7.1.网络高清数字解码器DS-6400HD-T系列 (10) 7.2.前端摄像采集 (12) 8.中心平台功能 (16) 8.1.资源验证、用户管理 (16) 8.2.流媒体数据转发 (16) 8.3.中心主控应用程序 (18) 8.4.网络视频数字矩阵 (18) 8.5.系统日志 (19) 8.6.系统电子地图 (19) 8.7.双向音频功能 (19) 8.8.多画面监视功能 (19) 8.9.视频轮巡功能 (20) 8.10.实时图像抓拍 (20) 8.11.视频调整功能 (20) 8.12.多用户切换功能 (20) 9.设备配置清单及报价 (21)
1. 前言 随着网络的社会普及，人们的网络生活越来越丰富，网络已经是不可或缺的一种生活和工作的工具了。而网吧的诞生正是迎合了这个网络时代的特征，为网络的发展提供了一种帮助，同时也为人们的生活带来了更多的乐趣。 网吧数量的不断增多，也陆续出现了一些经营业主出于以牟利为目的，放纵未成年少儿进入网吧等问题，以及出现一些利用网吧作为据点实施敲诈勒索等违法犯罪的现象，并且在全国各地呈扩散蔓延趋势。 如何有效地对加强对各网吧经营活动的监督管理，防患于未燃，成为文化、公安等各相关主管部门的当务之急。 文化、公安等各相关主管部门对各分散网吧实施远程图像的实时集中监控管理，不仅可以及时发现并查处网吧经营活动中的违规违法行为，而且还可以对违规违法行为的潜在实施者起到极大的震慑作用，大大减少了行政管理部门人员工作量，减化了工程流程，方便了网吧的管理和监控。 然而，传统的视频监控及报警联网系统受到当时技术发展水平的局限，图像模糊不清，监控系统大多只能在本地进行监视。而目前，随着计算机的普及、应用，网络通讯技术及图像压缩处理技术的快速发展，采用最新的计算机、通信、图象处理技术，通过网络线路传输数码图像，可为为远程图像监控提供高效可行且价格低廉的解决方案。 对于有网络基础的网吧，利用其已建成的宽带网，充分发挥计算机网络的优势，可建成高效可靠的视频联网监控系统。本系统主要针对网吧监控的安全管理，设计一套完整的网络视频管理系统。主要是实时的浏览每个网吧的情况，降低事故的发生率和犯罪率，保证能对突发事件做到及时的处理。 2. 设计目标 分布式联网结构网络视频监控系统,是由联网监控中心及下级所有网吧集成组建。 主要功能是建立以网吧的出入人员的情况及场景为对象，对前端图象进行监控，并服务于各级主要管理部门的视频图像监控网络。为各位管理人员正确进行
WEB应用的快速发展，是的本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。 sessionStorage与localStorage Web Storage实际上由两部分组成：sessionStorage与localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。userData 语法： XML
使用HTML5开发离线应用- cache manifest HTML5 是目前正在讨论的新一代HTML 标准，它代表了现在Web 领域的最新发展方向。在HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。在开发支持离线的Web 应用程序时，开发者通常需要使用以下三个方面的功能： 1.离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样， 浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。 2.在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状 态，做出对应的处理。在HTML5 中，提供了两种检测当前网络是否在线的方式。 3.本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。 为了满足不同的存储需求，HTML5 提供了DOM Storage 和Web SQL Database 两种存储机制。前者提供了易用的key/value 对存储方式，而后者提供了基本的关系数据库存储功能。 尽管HTML5 还处于草稿状态，但是各大主流浏览器都已经实现了其中的很多功能。Chr ome、Firefox、Safari 和Opera 的最新版本都对 HTML5 离线功能提供了完整的支持。IE8 也支持了其中的在线状态检测和DOM Storag e 功能。下面将具体介绍HTML5 离线功能中的离线资源缓存、在线状态检测、DOM Storage 和Web SQL Database，最后通过一个简单的Web 程序说明使用HTML5 开发离线应用的方法。 离线资源缓存 为了能够让用户在离线状态下继续访问Web 应用，开发者需要提供一个cache manife st 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。本节先通过一个例子展示cache manifest 文件的用途，然后详细描述其书写方法，最后说明缓存的更新方式。 cache manifest 示例 我们通过W3C 提供的示例来说明。Clock Web 应用由三个文件“clock.html”、“clock.css”和“clock.js”组成。
在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择： 1HTTP cookie。HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP 请求都会被传送回服务器，明文传输（除非你使用SSL）。 2IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据，允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE，否则它基本没什么用处。 3Flash cookie。Flash cookie的名字有些误导，它实际上和HTTP cookie并不是一回事，或许它的名字应该叫做"Flash本地存储”，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash 的问题很简单，就是因为它是Flash。 4Google Gears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是Google自己都已经不用它了。 现状 我们现在通常所说的HTML5本地存储，一般指的是Web Storage规范，这个标准曾经是HTML5规范的一部分，但后来因为种种原因从HTML5规范中分离了出来。 Web Storage Web Storage是目前得到支持最广泛的HTML5本地存储规范：IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，以及iPhone 2+和Android 2+都已经支持Web Storage，要判断你的浏览器是否支持Web Storage，可以使用下面这个函数： HTML5 Storage的使用非常简单： 也可以写成下面这样
HTML5 离线功能介绍 HTML5 是目前正在讨论的新一代HTML 标准，它代表了现在Web 领域的最新发展方向。在HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。 在开发支持离线的Web 应用程序时，开发者通常需要使用以下三个方面的功能： 1. 离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在 在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动 加载，从而让用户正常使用。HTML5 中，通过cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。 2. 在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应 的处理。在HTML5 中，提供了两种检测当前网络是否在线的方式。 3. 本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不 同的存储需求，HTML5 提供了DOM Storage 和Web SQL Database 两种存储机制。前者提 供了易用的key/value 对存储方式，而后者提供了基本的关系数据库存储功能。 尽管HTML5 还处于草稿状态，但是各大主流浏览器都已经实现了其中的很多功能。Chrome、Firefox、Safari 和Opera 的最新版本都对HTML5 离线功能提供了完整的支持。IE8 也支持了其中的在线状态检测和DOM Storage 功能。下面将具体介绍HTML5 离线功能中的离线资源缓存、在线状态检测、DOM Storage 和Web SQL Database，最后通过一个简单的Web 程序说明使用HTML5 开发离线应用的方法。 回页首离线资源缓存 为了能够让用户在离线状态下继续访问Web 应用，开发者需要提供一个cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。本节先通过一个例子展示cache manifest 文件的用途，然后详细描述其书写方法，最后说明缓存的更新方式。 cache manifest 示例 我们通过W3C 提供的示例来说明。Clock Web 应用由三个文件“clock.html”、“clock.css”和“clock.js”组成。