博客 (69)

设规则：
    属性-文件传输规则-全局
        如果 时间 为 较旧 并且 传输 为 下载 那么 覆盖
        如果 大小 为 不同 并且 传输 为 下载 那么 覆盖
        如果没有匹配的规则，那么：跳过

建站点：
    站点-站点管理器-新建站点
        设好本地路径，传输 自定义规则 使用全局设置

队列：
    连接站点，在需要备份的目录上右键，队列
    在队列上右键，另存为

计划：
    工具-计划-新建任务
    选择队列文件，使用自定义规则
    设置执行时间，Windows 密码

设置完成！

《Windows Server 2008 R2 Web 服务搭建流程》

前提一、安装完系统后，各分区的权限均设为：
    IIS_IUSRS        完全拒绝（不是什么都不勾，而是勾满右侧的拒绝）
一、创建网站用户，如 netXoyozoWww，密码永不过期，仅隶属于 IIS_IUSRS 组。
二、创建网站根目录 net.xoyozo.www，权限添加用户 netXoyozoWww， 允许“读取和执行”、“列出文件夹内容”、“读取”。
        创建上传目录 upload，用户 netXoyozoWww 的权限再允许“修改”、“写入”。
三、IIS 中添加网站，网站名称如 net.xoyozo.www，指定物理路径，点击连接为，特定用户，测试设置……
        主机名 www.xoyozo.net
四、应用程序池，把 net.xoyozo.www 改成实际需要的 .NET 版本；高级设置，标识，自定义帐户 netXoyozoWww
五、选中网站，日志，更改目录，应用
六、展示网站目录树，选中 upload，处理程序映射，编辑功能权限，取消“脚本”前的勾。
    此操作的结果会在该目录下创建 web.config 文件，切勿删除！尚未研究出被上传文件替换的解决方案。程序应严格控制上传路径，阻止修改或替换 web.config 文件

另：
    查看端口命令：netstat -an
 

问题描述：
当我们的界面需要在程序运行中不断更新数据时，当一个textbox的数据需要变化时，为了让程序执行中不出现界面卡死的现像，最好的方法就是多线程来解决
一个主线程来创建界面，使用一个子线程来执行程序并更新主界面
这样就不会出现卡死的现像了
这肯定是没有问题的，
但是为什么在使用的过程中一样会有很多地方会出现卡死呢，而且有用户跟我说是我的Httphelper类的问题，其实不是，而且我再次声明我的Httphelper类跟多线程并没有关系。不要在诬赖我了哦。
这个问题其实也困或了我很久，但是今天终于解决了，而且我发现很多人有这样的问题，所以我分享一个例子方便大家参考吧。
先来看看我的界面

当我单击
开始执行后

这个时候界面是不会卡死的，
只是数据在不断的更新
下面看看我的代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Threading;

namespace WindowsFormsApplication3
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        //创建一个委托，是为访问TextBox控件服务的。
        public delegate void UpdateTxt(string msg);
        //定义一个委托变量
        public UpdateTxt updateTxt;

        //修改TextBox值的方法。
        public void UpdateTxtMethod(string msg)
        {
            richTextBox1.AppendText(msg + "\r\n");
            richTextBox1.ScrollToCaret();
        }

        //此为在非创建线程中的调用方法，其实是使用TextBox的Invoke方法。
        public void ThreadMethodTxt(int n)
        {
            this.BeginInvoke(updateTxt, "线程开始执行，执行" + n + "次，每一秒执行一次");
            for (int i = 0; i < n; i++)
            {
                this.BeginInvoke(updateTxt, i.ToString());
                //一秒 执行一次
                Thread.Sleep(1000);
            }
            this.BeginInvoke(updateTxt, "线程结束");
        }
        //开启线程
        private void button1_Click(object sender, EventArgs e)
        {
            Thread objThread = new Thread(new ThreadStart(delegate
            {
                ThreadMethodTxt(Convert.ToInt32(textBox1.Text.Trim()));
            }));
            objThread.Start();
        }

        private void Form1_Load_1(object sender, EventArgs e)
        {
            //实例化委托
            updateTxt = new UpdateTxt(UpdateTxtMethod);
        }
    }
}

就这些代码，大家看注释应该就明白一点了，
主要是使用一个委托来更新界面的richTextBox1
这样写是肯定没有问题的，而且在我其它的更高级一点的例子里也是这么写的
C#多线程|匿名委托传参数|测试网站压力--升级版
http://www.sufeinet.com/thread-13-1-1.html
上面的文件大家可以做为参考
那问题现在那里呢，其实就出在这一句上

this.BeginInvoke(updateTxt, "线程结束");

大家也许已经发现了，我是这样写的，而不是

updateTxt("线程结束")；

这样来直接在子线程中使用，
我相信有很多同志都是这样写的，其实错就错在这里
如果直接使用

updateTxt("线程结束")；

大家想一下应该就明白了，
updateTxt是在主线程创建的，而我们在子线程中直接使用，运行的数据多了，就会出现卡死，这是界面信息堵死的原因，
所以就算是委托也不能直接在子线程中使用，而是要使用BeginInvoke方法来调用这个委托
这样才不会出现卡死的现像。
问题就解决了。
大家支持一下哦
下面是我的源码提供给大家下载吧
WindowsFormsApplication3.zip (49.65 KB)

// 定义

public enum status { ready, ordered, printed }

public enum statusB { ready = 1, ordered = 3, printed = 5 }

// 将字符串转化为枚举类型

public static status? ConvertStringToEnum_status(string str)
{
  return str != null && Enum.IsDefined(typeof(status), str) ? (status)Enum.Parse(typeof(status), str) : null as status?;
}

// 将数字（索引值）转化为枚举类型

status s = (status)1; // 值为 status.ordered

statusB s = (statusB)1; // 值为 statusB.ready

// 将枚举类型转化为数字（索引值）

int s = (int)status.ordered; // 值为 1

int s = (int)statusB.ready; // 值为 1

// 循环

foreach (status s in Enum.GetValues(typeof(status)))
{
}

当无法序列化或需要序列化为字符串时，在定义枚举前加上：

当使用 System.Text.Json 时为：

[System.Text.Json.Serialization.JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))]

当使用 Newtonsoft.Json 时为：

[Newtonsoft.Json.JsonConverter(typeof(Newtonsoft.Json.Converters.StringEnumConverter))]

http://npoi.codeplex.com/documentation

免费，开源，无需安装 Office，功能强大，兼容性好，使用方便，可以在 Visual Studio 的 NuGet 管理器中直接搜索安装。

导出 Excel 简单示例：

HSSFWorkbook book = new HSSFWorkbook();
ISheet sheet = book.CreateSheet("工作表1");

IRow r0 = sheet.CreateRow(0);
r0.CreateCell(0).SetCellValue("行1列1");
r0.CreateCell(1).SetCellValue("行1列2");

IRow r1 = sheet.CreateRow(1);
r1.CreateCell(0).SetCellValue("行2列1");
r1.CreateCell(2).SetCellValue("行2列3");

MemoryStream ms = new MemoryStream();
book.Write(ms);
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}.xls", "文件名"));
Response.BinaryWrite(ms.ToArray());
Response.End();
book = null;
ms.Close();
ms.Dispose();

字体相关：

ICellStyle style = book.CreateCellStyle();
IFont font = book.CreateFont();
font.FontHeightInPoints = 20; // 字体大小
font.Color = HSSFColor.White.Index; // 字体颜色
style.SetFont(font);
style.FillForegroundColor = HSSFColor.Red.Index; // 背景色
style.FillPattern = FillPattern.SolidForeground;
cell.CellStyle = style;

合并单元格：

CellRangeAddress cra = new CellRangeAddress(r - 1, r - 1, c - 1, c);
sheet.AddMergedRegion(cra);

宽度自适应：

for (int i = 1; i < c; i++) {
  sheet.AutoSizeColumn(i);
}

函数：

cell.SetCellFormula("SUM(B2:B4)");

顺便提一句，ICellStyle 和 IFont 最好一种样式一个变量先定义好再用，不要在循环里疯狂地 Create，否则超出数量（512个）会导致样式失效。

其它参考：http://www.ez2o.com/Blog/Post/csharp-Excel-NPOI-Font-Style

在开发微信中的网页时，会遇到一些域名相关的配置：

① 公众号设置 - 功能设置 - 业务域名
② 公众号设置 - 功能设置 - JS接口安全域名
③ 接口权限 - 网页授权获取用户基本信息
④ 商户平台 - 产品中心 - 开发配置 - JSAPI支付授权目录
⑤ 小程序 - 开发 - 开发设置 - 业务域名
⑥ 公众号开发 - 基本设置 - IP白名单

第①种 业务域名：相对不重要，只是用来禁止显示“防欺诈盗号,请勿支付或输入qq密码”提示框，可配置 3 个二级或二级以上域名（个人理解是“非顶级域名”，即填写了 b.a.com 的话，对 c.b.a.com 不起作用，待测）。

我们网站的域名和公众号是没有绑定关系的，那么你在打开一个（可能是朋友分享的）网页时，跟哪个公众号的配置去关联呢，答案是 JS-SDK。

测试结果：由于一个月只有3次修改机会，这次先测二级域名，有效；再测顶级域名，有效；删除所有，仍有效。所以应该是缓存作用。过几天再试，然后下个月先测顶级域名，来确定直接填写顶级域名是否对所有二级域名有效。

第②种 JS接口安全域名：是配置所配置的域名下的网页可调用 JS-SDK。可配置 5 个一级或一级以上域名（个人理解是“任何级域名”，即填写了 b.a.com 对 c.b.a.com 也有效，但对 c.z.a.com 无效，待测。如果我们拥有顶级域名对应网站的控制权（上传验证文件到网站根目录），直接填写顶级域名即可）。
使用 JS-SDK 的每个网页都必须注入配置信息（wx.config），而之前必须获取 jsapi_ticket，jsapi_ticket api 的调用次数非常有限，必须全局缓存。而获取 jsapi_ticket 之前必须先获取 access_token，同样需要全局缓存。所以，我们专门做个接口，功能是传入需要使用 JS-SDK 的网页的 url，输出 wx.config 需要用到的配置信息，来实现在不同网页（网站）使用 JS-SDK。

第③种 网页授权域名：这是已认证的服务号才能享有的特权，主要作用是获取用户在该服务号中的 openid 和 unionid。可配置 1 个 2 个回调域名（可填写任意级别的域名，但仅对该域名的网页（网站）有效，若填写了 a.com 对 b.a.com 是无效的）。

因此，如果我们需要在不同二级域名甚至不同顶级域名下的网页（以下称之为活动页面）实现用户授权，需要做一个统一的代理授权页面（回调域名当然是填写这个页面所在的域名），引导用户依次打开：微信授权页面 - 代理授权页面 - 活动页面，根据开发说明文档，具体实现如下：

当用户第一次打开活动页面时，引导打开微信授权页面（https://open.weixin.qq.com/connect/oauth2/authorize），其中参数 redirect_uri 指定回调地址，即代理授权页面地址，参数 state 指定活动页面地址。微信授权页面返回 code 和 state，code 作为换取网页授权 access_token 的票据。到这一步，本来可以由代理授权页面直接拿这个 code 去换取 access_token、openid 和 unionid 了，但是由于当前用户还在 302 重定向过程中，将这些信息带入到活动页面时势必导致信息泄露，所以这里将 code 追加到 state 指定的网址上后重定向到活动页面，活动页面拿到 code 再通过服务器端向代理授权页面所在服务器请求 openid 和 unionid，并将它们保存于 Session 中视为用户登录。这样，服务号的 appid 和 secret 也能得到保护。代理授权页面请求的微信服务器接口地址是 https://api.weixin.qq.com/sns/oauth2/access_token。

注：网页授权 access_token 不同于 JS-SDK 中使用的全局唯一接口调用凭据 access_token，没有请求次数限制。 

流程既然通了，实现逻辑可以这样设定：

活动页面首先判断 Session 中是否有 openid 或 unionid，若有表示已授权登录；没有再判断地址栏是否有 code 参数，若有则调用代理授权页面所在服务器的接口，用 code 换 openid 和 unionid；没有则直接重定向到代理授权页面，带上 state。用 code 换 openid 和 unionid 时若成功则保存至 Session，若失败则仍然重定向到代理授权页面，带上 state，特别注意 state 中的活动页面地址确保没有 code 参数。

第④种 JSAPI支付授权目录：涉及到微信支付时用到，顾名思义是固定某一个网站内的某个目录，以“/”结尾。最多可添加 5 个。如果支付页面在目录 https://www.a.com/b/ 下，那么可以填写 https://www.a.com/b/ 或 https://www.a.com/（建议后者），暂未测试填写 https://a.com/ 会不会起作用。涉及支付安全，建议设置支付页面的最深一层不可写的目录，以防目录内被上传后门文件带来的安全隐患。

第⑤种 小程序业务域名：任何需要在小程序的 web-view 组件中打开的网页，都必须配置小程序业务域名，限制 20 个。该域名要求必须 https，可填入“任何级域名”（建议填顶级域名，即填写了 a.com 对 b.a.com 也有效。如果我们拥有顶级域名对应网站的控制权（上传验证文件到网站根目录），直接填写顶级域名即可）。

第⑥种 IP白名单：仅填写管理全局 access_token 的中控服务器的 IP。

总结：在上述自定义接口部署完成后，如果微信中的网页想获取用户的 unionid，则不需要配置域名，直接使用统一的代理授权即可；如果需要使用 JS-SDK 功能，如分享、上传等等，则需要配置 JS 接口安全域名；如果有表单，最好配置一下业务域名。

本文系个人经验总结，部分结果未经证实，欢迎指正！QQ：940534113

推荐：参考此文：如何升级 ASP.NET 项目 MySql.Data 和 Connector/NET 至 8.0.x

-------------------------------------------------------------------------------------------------------

这是 MySQL 官方提供的，用来帮助 .NET 开发者使用 LINQ 来方便操作 MySQL 数据库的解决方案。

我们所需要的软件全部被封装在 MySQL Installer 套件当中，非常方便。

下载后选择“Custom”自定义选择需要安装的产品和功能：

• MySQL Server - 在本机安装 MySQL 数据库，如果我们直接连接远程数据库则不需要安装

• MySQL for Visual Studio - 是一款 Visual Studio 插件，用于连接和管理 MySQL 数据库

• Connector/NET - ADO.NET 托管提供程序

使用也非常方便：

1. 在“服务资源管理器”中添加连接，更改数据源为“MySQL”。（如果没有该项，重启计算机试试；仍然没有，重新运行 MySQL Installer，选择“Modify ...”，勾选对应 VS 版本的“Visual Studio Integration”和“Entity Framework Designer Integration”）

2. 项目中“添加新项”，在“数据”中选择“ADO.NET 实体数据模型”，即 Entity Framework，而非“LINQ to SQL 类”，根据需要选择表、视图和存储过程

Windows Server 服务器上安装 MySQL Server 过程中（或安装完成后再次运行 MySQL Installer）可配置端口（同时配置防火墙）。

建议勾选安装 MySQL Workbench 来管理 MySQL 数据库。

新建用户时，主机填“%”即该用户允许远程连接。

如果报以下错误：

不支持直接到存储查询(DbSet、DbQuery、DbSqlQuery)的数据绑定。应使用数据填充 DbSet (例如通过对 DbSet 调用 Load)，然后绑定到本地数据。对于 WPF，绑定到 DbSet.Local。对于 WinForms，绑定到 DbSet.Local.ToBindingList()。

记得在绑定时加一个 .ToList() 即可。

如果发布后报以下错误：

找不到请求的 .Net Framework Data Provider。可能没有安装。

那么在服务器上安装 Connector/NET 即可。

如果在 VS 中连接此 EF 时如果遇到：

您的项目引用了最新版的实体框架；但是，找不到进行数据连接所需的与此版本兼容的实体框架数据库提供程序。请退出向导，安装兼容提供程序，重新生成您的项目，然后再执行此操作。

或

指定的架构无效。错误 0152: 未找到具有固定名称“MySql.Data.MySqlClient”的 ADO.NET 提供程序的实体框架提供程序。请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序。有关详细信息，请参阅 http://go.microsoft.com/fwlink/?LinkId=260882。

那么，只需在 NuGet 中搜索并重新安装 MySql.Data.Entity ，重新生成项目。如果仍然提示，请检查 Connector/NET 是否有更新。 

6.10.4 版本相关的问题参：MySQL Connector/Net 6.10.4 不支持 VS

在 vs2015 以前的版本中，我们想要在停止调试后继续能够浏览网页，只要在项目右键属性 -> Web -> 调试器，把“启用编辑并继续”前的勾去掉就可以了。但是 vs2015 中没有了这个选项，这一度让我非常困惑。（vs2017 上又有了。2018.8.4 注）

百度无果，后来在还是在 Google 的帮助下找到了解决方案。

微软说，为了整合相关的功能，我们已经把这个选项移到了菜单栏 -> 工具 -> 选项 -> 调试 -> 常规，滚动到最底，但是我试了，没效果呀！

不过 stackoverflow 提供了一种很好的办法：我们先开始调试，在菜单栏中找到“停止调试”按钮所在的工具栏右下角的小三角，点击选择“添加或移除按钮”，“自定义”，“添加命令”，“调试”，“全部分离”，确定，你可以将“全部分离”下移或下移到你喜欢的位置，一般是“停止调试”旁边，当然你也可以干脆把“停止调试”删除掉。

好了，下次启动调试后，点击这个全部分离按钮就可以停止调试而不关闭 IIS Express 继续查看网页啦！

本文适用于 IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 等 Web 服务器，IIS 6（Windows Server 2003）用户请查阅 ISAPI_Rewrite。

在 IIS 中要实现 URL 重写，需要下载并安装 URL Rewrite 组件，http://www.iis.net/downloads/microsoft/url-rewrite

在 IIS 管理器中选中任意网站，主窗口可见“URL 重写”，双击打开。（如果你想配置这台服务器的所有网站有效，直接选中左侧菜单中的服务器名，打开“URL 重写”即可。）

右侧“添加规则...”，选择“入站规则”中的“空白规则”，确定。

填写规则名称，在“匹配 URL”框中选择“与模式匹配”，根据自己的需求选择“正则表达式”、“通配符”或“完全匹配”，“模式”中填写要防盗链的文件路径规则，例如正则表达式 ^.*\.(jpg|png)$ 将匹配所有目录下的 .jpg 和 .png 文件。

接下来将设置图片在允许的域名下显示。

在“条件”框中选择“全部匹配”，点击“添加”，“条件输入”中填写“{HTTP_REFERER}”（不含引号，含花括号），表示判断 HTTP 请求中 Header 的 Referer。选择“与模式不匹配”，模式中填写匹配规则，如 ^$ 表示允许 Referer 为空（如直接从浏览器打开的情况），再加一个规则 ^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$ 表示允许在 xoyozo.net 和 himiao.com 这两个域名下显示图片。当然如果你有很多域名或需要设置不同的规则，可以继续添加，但最好把访问量大的规则移到前面，从而减少系统匹配次数，提高访问效率。

最后，在“操作”框中设置你想要的处理方式，可以是“重定向”到一张防盗链提醒的图片上（推荐类型临时 307），也可以自定义响应，例如，状态代码（403），子代码（0），原因（Forbidden: Access is denied.），描述（You do not have permission to view this directory or page using the credentials that you supplied.），查看 HTTP 状态代码。

如果你是配置某个网站的“URL 重写”，那么在网站根目录下的 web.config 文件中，<system.webServer /> 节点下可以看到刚刚配置的规则，例如：

<rewrite>
  <rules>
    <rule name="RequestBlockingRule1" stopProcessing="true">
      <match url="^.*\.(jpg|png)$" />
      <conditions>
        <add input="{HTTP_REFERER}" pattern="^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$" negate="true" />
        <add input="{HTTP_REFERER}" pattern="^$" negate="true" />
      </conditions>
      <action type="Redirect" url="http://42.96.165.253/logo2013.png" redirectType="Temporary" />
    </rule>
  </rules>
</rewrite>

编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。

十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；

十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；

八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；

六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；

四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；

二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；

如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？

没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。

目录：

一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼？ – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API

一、让音乐随心而动 – 音频处理 Web audio API

简介：

Audio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。

系统要求：

ios6+、android chrome、android firefox

实例：

http://sy.qq.com/brucewan/device-api/web-audio.html

核心代码：

var context = new webkitAudioContext();
var source = context.createBufferSource();   // 创建一个声音源
source.buffer = buffer;   // 告诉该源播放何物 
createBufferSourcesource.connect(context.destination);   // 将该源与硬件相连
source.start(0); //播放

技术分析：

当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如

1、源节点（source node）

我们可以使用两种方式加载音频数据：
<1>、audio标签

var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
 sound = context.createMediaElementSource(audio);
 sound.connect(context.destination);
});
audio.src = '/audio.mp3';

<2>、XMLHttpRequest

var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer'; 
xhr.onload = function() {
 context.decodeAudioData(request.response, function (buffer) {
 source = context.createBufferSource();
 source.buffer = buffer;
 source.connect(context.destination);
 }
}
xhr.send();

2、分析节点（analyser node）

我们可以使用AnalyserNode来对音谱进行分析，例如：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

function draw() {
 drawVisual = requestAnimationFrame(draw);
 analyser.getByteTimeDomainData(dataArray);
 // 将dataArray数据以canvas方式渲染出来
};

draw();

3、处理节点（gain node、panner node、wave shaper node、delay node、convolver node等）

不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。

需要了解更多的音频节点可能参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

4、目的节点（destination node）

所有被渲染音频流到达的最终地点

思维发散：

1、可以让CSS3动画跟随背景音乐舞动，可以为我们的网页增色不少；
2、可以尝试制作H5酷酷的变声应用，增加与用户的互动；
3、甚至可以尝试H5音乐创作。

看看google的创意：http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html

二、捕捉用户摄像头 – 媒体流 Media Capture

简介：

通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。

系统要求：

android chrome、android firefox

实例：

捕获用户摄像头 捕获用户麦克风

http://sy.qq.com/brucewan/device-api/camera.html

http://sy.qq.com/brucewan/device-api/microphone-usermedia.html

核心代码：

1、摄像头捕捉

navigator.webkitGetUserMedia ({video: true}, function(stream) {
 video.src = window.URL.createObjectURL(stream);
 localMediaStream = stream;
}, function(e){

})

2、从视频流中拍照

btnCapture.addEventListener('touchend', function(){
	if (localMediaStream) {
		canvas.setAttribute('width', video.videoWidth);
		canvas.setAttribute('height', video.videoHeight);
		ctx.drawImage(video, 0, 0);
	}
}, false);

3、用户声音录制

navigator.getUserMedia({audio:true}, function(e) {
	context = new audioContext();
	audioInput = context.createMediaStreamSource(e);	
	volume = context.createGain();
	recorder = context.createScriptProcessor(2048, 2, 2);
	recorder.onaudioprocess = function(e){
		recordingLength += 2048;
		recorder.connect (context.destination); 
	}	
}, function(error){});

4、保存用户录制的声音

var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;

思维发散：

1、从视频拍照自定义头像；
2、H5视频聊天；
3、结合canvas完成好玩的照片合成及处理；
4、结合Web Audio制作有意思变声应用。

三、你是逗逼？ – 语音识别 Web Speech API简介：

1、将文本转换成语音；
2、将语音识别为文本。

系统要求：
ios7+，android chrome，android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/microphone-webspeech.html

核心代码：

1、文本转换成语音，使用SpeechSynthesisUtterance对象；

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);

2、语音转换为文本，使用SpeechRecognition对象。

var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
	var interim_transcript = ''; 
	for (var i = event.resultIndex; i < event.results.length; ++i) {
		final_transcript += event.results[i][0].transcript;
	}
};

测试结论：

1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。

思维发散：

1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；
2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。

 四、让我尽情呵护你 – 设备电量 Battery API简介：

查询用户设备电量及是否正在充电。

系统要求：

android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/battery.html

核心代码：

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
 str += '<p>你的浏览器支持HTML5 Battery API</p>';
 if(battery.charging) {
 str += '<p>你的设备正在充电</p>';
} else {
 str += '<p>你的设备未处于充电状态</p>';
}
 str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
 str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}

测试结论：

1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；
2、caniuse显示android chrome42支持该接口，实测不支持。

思维发散：

相对而言，我觉得这个接口有些鸡肋。
很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。

 五、获取用户位置 – 地理位置 Geolocation简介：

Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。

系统要求：

ios6+、android2.3+

测试实例：

http://sy.qq.com/brucewan/device-api/geolocation.html

核心代码：

var domInfo = $("#info");

// 获取位置坐标
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
	domInfo.innerHTML="抱歉，你的浏览器不支持地理定位！";
}

// 使用腾讯地图显示位置
function showPosition(position) {
	var lat=position.coords.latitude;
	var lon=position.coords.longitude;

	mapholder = $('#mapholder')
	mapholder.style.height='250px';
	mapholder.style.width = document.documentElement.clientWidth + 'px';

	var center = new soso.maps.LatLng(lat, lon);
	var map = new soso.maps.Map(mapholder,{
		center: center,
		zoomLevel: 13
	});

	var geolocation = new soso.maps.Geolocation();
	var marker = null;
	geolocation.position({}, function(results, status) {
		console.log(results);
		var city = $("#info");
		if (status == soso.maps.GeolocationStatus.OK) {
			map.setCenter(results.latLng);
			domInfo.innerHTML = '你当前所在城市: ' + results.name;
		if (marker != null) {
			marker.setMap(null);
		}
		// 设置标记
		marker = new soso.maps.Marker({
			map: map,
			position:results.latLng
		});
		} else {
			alert("检索没有结果，原因: " + status);
		}
	});
}

测试结论：

1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确；
3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。

六、把用户捧在手心 – 环境光 Ambient Light简介：

Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。

系统要求：

android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/ambient-light.html

核心代码：

这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。

var domInfo = $('#info');
if (!('ondevicelight' in window)) {
	domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
	var lightValue = document.getElementById('dl-value');
	window.addEventListener('devicelight', function(event) {
		domInfo.innerHTML = '当前环境光线强度为：' + Math.round(event.value) + 'lux';
		var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
		document.body.style.backgroundColor = backgroundColor;
		if(event.value < 50) {
			document.body.style.color = '#fff'
		} else {
			document.body.style.color = '#000'
		}
	});
}

思维发散：

该接口适合的范围很窄，却能做出很贴心的用户体验。

1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；

2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；

3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。

参考文献：
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/