蒋宇捷
调查：现场有谁用过HTML5 Device API？
我最近在百度开发者大会做过一个分享，当时主题是用HTML5开发移动App，主要介绍了HTML5 Device API和CSS3相关特性。今天我们只讲Device API。
Device API其实是HTML5里面很重要的一个API，而且内容庞大，也有很多难点，我们会在下面展开梳理，进行详细的介绍。
*
可能大家都做过Web App的开发，那Web App与HTML5之间有什么联系呢？
在HTML5的驱动下，Web App表现出下面的特点：
更多的功能：Webworker、Websocket、Geolocation等新的API能让我们的应用实现更多更有趣的功能特性。
更好的体验：CSS3 Region、CSS3 Paged Media带来更好的阅读体验、Ruby带来人性化的支持、LocalStorage让应用变得更加智能。
更美的界面：CSS3、Canvas驱动下，能实现多种美轮美奂的界面和动画效果。
最后一点，访问本地硬件的能力：这是HTML5支持下Web App区别于普通Web App很重要的特点，Web App可以媲美Native App，主要就是通过Device API来实现的。
*
Web App
CSS
HTML
JS
Browser
OS
Device
HTML4
HTML5
我们再来直观的看看Web App与Device API的联系。
web应用的结构从上到下可以分为四层，xxxx。在HTML4的时代，Web App是无法访问系统硬件或者文件系统的，但是在HTML5时代，Web有了访问系统硬件的能力，打通了四层之间的连接，这是一个巨大的进步，现代Web能实现的功能和应用比起传统Web来说有了极大的提高。
Device API能在PC上使用，但是针对移动应用来说，意义和价值更大。
*
通讯录、日历、GPS、传感器（重力感应、运动传感器、环境传感器）、震动、摄像头
其中通讯录、日历、摄像头在PC上也有。
通过HTML5 Device API，我们能为这些重要特性提供支持。
*
Battery Status API
Network Information API
Device api的整体结构如下，包括xxx。而System info API又包括xxx。这其实和HTML5被划分为多个模块的意义一致，这样一个大的模块不会因为其他部分内容的拖延造成整体进度的延迟，同时浏览器可以有针对性的实现各个部分的新特性。
目前有一个专门的工作组来制定Device API的规范，我们把它称作DAP，也就是Device APIs and Policy Working Group。
需要注意的一点是，像HTML5一样，Device API还是草案，很有可能调整。W3c标准制定的五个阶段：草案、最后修订、候选推荐、提案、推荐。从起草到推荐花了十年的时间。
*
手机上永远最重要的功能是电话和通讯录。
这里展示了多种手机，多种通讯录。当你买到一部新手机的时候，你需要做的第一件事是什么？是倒通讯录，如果此时你又遇到两件事情，你就悲催了，1是你得手机非智能机，第二你手机得通讯录格式与其他手机不兼容。(前几天我遇到一件事 iPhone 中兴 iPhoneAndroid<=>中兴)
所以访问通讯录存在的问题是什么
1、许多用户需要维护通讯录数据的多份拷贝，而一个用户跨通讯录服务提供商存储数据时经常会产生混乱和不一致的信息。
2、用户并不完全信任第三方来分享他们所有的数据，实际上，用户很可能只想或者只需要分享他们通讯录里面的一部分数据，所以需要一个应用来达到这个目的
*
Contact API
什么叫做通用通讯录和通用日历？就是和硬件平台无关，应用只需要调用统一的HTML5接口，而不需要关心浏览器和系统底层的实现。
经过明确的用户许可和筛选后，第三方应用程序通过这个接口可以访问用户的通用通讯录。
*
Read/Find
Update/Add(vCard)
Delete?
// 执行一个通讯录搜索。获取“name”和“emails”属性。
// 同时初始化过滤列表到包含“yujie”的联系人记录
(['name', 'emails'], success, error, {filter: ‘yujie'});
function success(contacts) { // 获取联系人对象后进行处理
for(var i in contacts) { // 遍历所有的联系人
alert(contacts[i].name); // 弹出联系人的姓名
}
}
function error(err) { // 获取数据错误时进行处理
alert(); // 弹出错误号
}
<a id=“vcard”>保存联系人</a>
<script type="text/javascript">
// 创建vcard对象
var vcard = 'BEGIN:VCARD\r\n' +
'VERSION:\r\n' +
'N:Yujie;John\r\n' +
'FN:Jiang \r\n' +
'TEL;WORK;VOICE:123456\r\n' +
'END:VCARD';
('vcard').href = "data:text/x-vcard;charset=utf-8," + encodeURIComponent( vcard );
</script>
什么是vCard？vCard，电子名片的一种格式。Outlook发送邮件时经常接收到vcf格式的附件，这就是vCard。未来它很可能成为通讯录的统一规范。
*
// 执行一次日历搜索：搜索UTC时间2012年1月1日下午5点之前的事件。
(success, error, {filter: {startBefore: '2011-04-10T05:00:00+12:00'}});
function success (events) {
for (var i in events) {
alert(events[i].id);
}
}
function error (err) {
alert(); // 对错误结果进行处理
}
日历其实和联系人非常类似，都是通过一条条记录组成，都可以进行增删改查。
HTML5也提供了类似于Contact API的Calendar API来访问系统的日历。
*
mailto:
sms:
mms:
if () {
picture = ('attachment').files[0];
("mms:+8613910779120?body=测试彩信短消息发送功能", [picture], successCB, errorCB);
}
function successCB() {
alert("短消息发送成功！");
}
function errorCB(error) {
alert("短消息发送失败，失败特征是：" + );
}
HTML提供了发送电子邮件的支持，大家还记得是什么样的方式吗？对是mailto:的形式。现在html5扩展了这种形式，提供了对短信和彩信的支持，通过sms和mms的uri模式。
运营商
*
话筒
摄像头
HTML Media Capture API
The Media Capture API
<Device>
in
HTML5
getUserMedia()
in
WebRTC
<video id="video" autoplay=""></video>
<script type="text/javascript">
var video_element = ('video');
if (){
('video', success, error);
} else {
not_supported();
}
function success(stream){
= stream;
}
</script>
HTML5 Media Capture API是非常重要的API，因为它都提供了对于移动设备上非常重要的功能：摄像头、麦克风的访问。
它有几个相关API，第一个是HTML Media Capture API。
HTML Media Capture API只能通过表单在捕获后获取到图像和音视频，它是一个简单的，很容易实现的，能在大多数情况下方便使用的API。
因为HTML Media Capture的不足和限制，所以诞生了The Media Capture API，也称为getUserMedia。
它最开始以HTML5 <device> 元素的形式出现, 随后被W3C放到了webRTC（real time Communication）规范里，因为它可以实时的捕捉音视频，所以它其实并不是真正HTML5规范的一部分。
The Media Capture API也提供了通过Javascript访问用户摄像头和话筒的方式，Opera和Chrome提供了对它的支持。它更为强大和好玩，不过它更复杂，并且有一些安全问题。
这儿有一个关于它的演示。
*
([2000, 1000, 1000]);
手机上重要的提醒功能是什么？
*
Device
Network
Sensor
("Power",success,null,{lowThreshold:});
function success(power) {
("OutputDevices",
function(devices) {
for(var i=0; i<; i++)
("Display",{id: [i].id, brightness: });
});
}
*
DeviceOrientation Event
VS
System Information API
VS
Sensor API
*
特性
Network Information
API
Battery Information API
HTML Media Capture
API
The Media Capture
API
我们来看看浏览器对Device API的支持情况
各浏览器支持情况还不一样，例如
现代浏览器会逐步提供对Device API的支持，这一点是确信无疑的。因为各家浏览器都显式的支持HTML5规范，同时这本身也是浏览器的一场平台之战，只有谁更好、更快的提供新特性，吸引更多开发者和应用的加入，谁才能更好的施展自己的影响力和构建生态系统。
但是因为它的重要性，现在你就应该了解Device API的相关内容，以便你能在Web APP的创意和实现上占有先机
*
调查：现场有谁用过HTML5 Device API？
我最近在百度开发者大会做过一个分享，当时主题是用HTML5开发移动App，主要介绍了HTML5 Device API和CSS3相关特性。今天我们只讲Device API。
Device API其实是HTML5里面很重要的一个API，而且内容庞大，也有很多难点，我们会在下面展开梳理，进行详细的介绍。
*
可能大家都做过Web App的开发，那Web App与HTML5之间有什么联系呢？
在HTML5的驱动下，Web App表现出下面的特点：
更多的功能：Webworker、Websocket、Geolocation等新的API能让我们的应用实现更多更有趣的功能特性。
更好的体验：CSS3 Region、CSS3 Paged Media带来更好的阅读体验、Ruby带来人性化的支持、LocalStorage让应用变得更加智能。
更美的界面：CSS3、Canvas驱动下，能实现多种美轮美奂的界面和动画效果。
最后一点，访问本地硬件的能力：这是HTML5支持下Web App区别于普通Web App很重要的特点，Web App可以媲美Native App，主要就是通过Device API来实现的。
*
我们再来直观的看看Web App与Device API的联系。
web应用的结构从上到下可以分为四层，xxxx。在HTML4的时代，Web App是无法访问系统硬件或者文件系统的，但是在HTML5时代，Web有了访问系统硬件的能力，打通了四层之间的连接，这是一个巨大的进步，现代Web能实现的功能和应用比起传统Web来说有了极大的提高。
Device API能在PC上使用，但是针对移动应用来说，意义和价值更大。
*
通讯录、日历、GPS、传感器（重力感应、运动传感器、环境传感器）、震动、摄像头
其中通讯录、日历、摄像头在PC上也有。
通过HTML5 Device API，我们能为这些重要特性提供支持。
*
Device api的整体结构如下，包括xxx。而System info API又包括xxx。这其实和HTML5被划分为多个模块的意义一致，这样一个大的模块不会因为其他部分内容的拖延造成整体进度的延迟，同时浏览器可以有针对性的实现各个部分的新特性。
目前有一个专门的工作组来制定Device API的规范，我们把它称作DAP，也就是Device APIs and Policy Working Group。
需要注意的一点是，像HTML5一样，Device API还是草案，很有可能调整。W3c标准制定的五个阶段：草案、最后修订、候选推荐、提案、推荐。从起草到推荐花了十年的时间。
*
手机上永远最重要的功能是电话和通讯录。
这里展示了多种手机，多种通讯录。当你买到一部新手机的时候，你需要做的第一件事是什么？是倒通讯录，如果此时你又遇到两件事情，你就悲催了，1是你得手机非智能机，第二你手机得通讯录格式与其他手机不兼容。(前几天我遇到一件事 iPhone 中兴 iPhoneAndroid<=>中兴)
所以访问通讯录存在的问题是什么
1、许多用户需要维护通讯录数据的多份拷贝，而一个用户跨通讯录服务提供商存储数据时经常会产生混乱和不一致的信息。
2、用户并不完全信任第三方来分享他们所有的数据，实际上，用户很可能只想或者只需要分享他们通讯录里面的一部分数据，所以需要一个应用来达到这个目的
*
什么叫做通用通讯录和通用日历？就是和硬件平台无关，应用只需要调用统一的HTML5接口，而不需要关心浏览器和系统底层的实现。
经过明确的用户许可和筛选后，第三方应用程序通过这个接口可以访问用户的通用通讯录。
*
什么是vCard？vCard，电子名片的一种格式。Outlook发送邮件时经常接收到vcf格式的附件，这就是vCard。未来它很可能成为通讯录的统一规范。
*
日历其实和联系人非常类似，都是通过一条条记录组成，都可以进行增删改查。
HTML5也提供了类似于Contact API的Calendar API来访问系统的日历。
*
HTML提供了发送电子邮件的支持，大家还记得是什么样的方式吗？对是mailto:的形式。现在html5扩展了这种形式，提供了对短信和彩信的支持，通过sms和mms的uri模式。
运营商
*
HTML5 Media Capture API是非常重要的API，因为它都提供了对于移动设备上非常重要的功能：摄像头、麦克风的访问。
它有几个相关API，第一个是HTML Media Capture API。
HTML Media Capture API只能通过表单在捕获后获取到图像和音视频，它是一个简单的，很容易实现的，能在大多数情况下方便使用的API。
因为HTML Media Capture的不足和限制，所以诞生了The Media Capture API，也称为getUserMedia。
它最开始以HTML5 <device> 元素的形式出现, 随后被W3C放到了webRTC（real time Communication）规范里，因为它可以实时的捕捉音视频，所以它其实并不是真正HTML5规范的一部分。
The Media Capture API也提供了通过Javascript访问用户摄像头和话筒的方式，Opera和Chrome提供了对它的支持。它更为强大和好玩，不过它更复杂，并且有一些安全问题。
这儿有一个关于它的演示。
*
手机上重要的提醒功能是什么？
*
*
*
我们来看看浏览器对Device API的支持情况
各浏览器支持情况还不一样，例如
现代浏览器会逐步提供对Device API的支持，这一点是确信无疑的。因为各家浏览器都显式的支持HTML5规范，同时这本身也是浏览器的一场平台之战，只有谁更好、更快的提供新特性，吸引更多开发者和应用的加入，谁才能更好的施展自己的影响力和构建生态系统。
但是因为它的重要性，现在你就应该了解Device API的相关内容，以便你能在Web APP的创意和实现上占有先机
*
