![](https://box.kancloud.cn/2016-08-09_57a9a2deb502a.png)
在HTML5中,Device API相关内容众多,而且结构比较复杂,内容有所重叠,大家在使用时可能会遇到许多问题,下面我针对这些问题谈一下个人的理解。
1、**The Media CaptureAPI VS System Information API,两者都可以访问摄像头和话筒,有什么区别?**
背景:[The Media Capture API](http://www.w3.org/TR/media-capture-api/)定义了一个高级别的API来访问设备的摄像头和话筒,SystemInformation API的[输入设备](http://www.w3.org/TR/2010/WD-system-info-api-20100202/#output-devices)展示了系统的输入设备,例如鼠标、键盘、摄像头和话筒。
**答案**:The Media CaptureAPI定义的API提供了对设备的音频、图像和视频的捕捉能力。注意,它是一个高级别的接口,实现了照相机和话筒的可编程访问。
System InformationAPI集中在关注设备状态(虽然它也有set方法)。例如可以读取摄像头以下属性:supportsVideo(是否支持视频录制)、hasFlash(是否支持闪光灯)、sensorPixels(图像传感器像素)、maxZoomFactor(最大支持多少变焦),另外还可以遍历所有摄像头。
所以,前者是高级别接口来实现对摄像头和话筒的可编程访问,后者关注摄像头和话筒的设备状态。
![](https://box.kancloud.cn/2016-08-09_57a9a2decf44f.jpg)
摄像头和话筒是手机的重要功能
2、**DeviceOrientationEvent VS System Information API VS Sensor API,三者都可以读取传感器信息,有何区别?**
背景:DeviceOrientationEvent提供了对于设备物理方向和运动信息的事件处理,常见的信息来源包括陀螺仪、罗盘等传感器。System Information API里专门有一部分是传感器结果。而Sensor API本身就是为传感器而定义的API。
**答案**:DeviceOrientationEvent主要关注运动和方位传感器,并且它并不提供对基本传感器数据的访问或者对传感器的控制,而是高层次的封装。
System InformationAPI目前主要关注环境传感器,包括环境亮度、环境温度、大气压力、临近距离(临近传感器,还记的面部贴到iPhone屏幕时屏幕自动关闭吗?),另外没有其他传感器支持。
Sensor API如其名,准备提供对所有已知传感器的访问,并且提供的是原始的传感器数据。
所以,前者是对运动和方位传感器高级别的封装,第二个主要关注环境传感器的信息,第三个会提供所有传感器的原始数据。
![](https://box.kancloud.cn/2016-08-09_57a9a2dee27fd.jpg)
传感器支持的重力感应游戏
3、**Speech InputAPI VS The Media Capture API,两者都和语音输入有关,有何异同?**
背景:Speech Input API支持语音输入和识别,The Media Capture API可以获取输入的音频。
**答案**:Speech Input API由Google提出,目前还只是文件草案,而且主要用于语音识别,旨在帮助Web开发者使用标准的语音识别软件。由于未来语音识别的重要性,可以想见这个API在Google、Apple和Microsoft之间将会有一番标准的剧烈争斗,不会轻易的成为工作组草案。
![](https://box.kancloud.cn/2016-08-09_57a9a2df0413e.jpg)
Google与Apple将会有一番龙争虎斗
The Media Capture API作为目前W3C认可的工作组草案,关注的主要是音频采集。
所以,前者主要是用于语音识别的文件草案,而后者是关注音频采集的工作组草案。
4、**The Media Capture VS HTML Media Capture,两者有何联系和区别?**
背景:两者命名类似,又都是[DeviceAPI的组成部分](http://www.w3.org/2009/dap/)。
**答案**:两者都关注摄像头和话筒。HTML Media Capture API如起名,只能通过表单在捕获后获取到图像和音视频,它是一个简单的,很容易实现的,能在大多数情况下方便使用的API。The Media Capture API(getUserMedia)来源于Device标签,是对摄像头和话筒的可编程访问,未来将成为webRTC的一个规范(有可能不属于HTML5),Opera Mobile和Chrome都提供了对它的支持。它非常强大和好玩,可以实时的捕捉视频,不过它更复杂,并且有一些安全问题。
![](https://box.kancloud.cn/2016-08-09_57a9a2df1df95.png)
使用HTML Media Capture来进行文件上传时的多媒体采集
5、**Device APIVS Device Characteristics,两者有何联系和区别?**
背景:Device API包含SystemInformation API,而System Information API包括Device Characteristics、Sensor Results和Network Characteristics,见[http://dev.w3.org/2009/dap/system-info/](http://dev.w3.org/2009/dap/system-info/)。
**答案**:Device API是设备整体所有相关的API,包括硬件、软件等多个方面,而Device Characteristics集中在设备硬件特性上。Device API整体结构如下:
![](https://box.kancloud.cn/2016-08-09_57a9a2df35bd8.png)
Device API结构
最后,你会注意到在大部分HTML5草案页面里“Statusof This Document”都会有如下文字“Publication as a Working Draft does not imply endorsement by the W3C Membership.This is a draft document and may be updated, replaced or obsoleted by otherdocuments at any time. It is inappropriate to cite this document as other thanwork in progress.”,这代表这些规范都还只是草案,并不是最终稳定状态,W3C随时有可能会进行调整。
附:API地址
The Media Capture API:[http://www.w3.org/TR/media-capture-api/](http://www.w3.org/TR/media-capture-api/)
HTML Media Capture API:[http://www.w3.org/TR/2011/WD-html-media-capture-20110414/](http://www.w3.org/TR/2011/WD-html-media-capture-20110414/)
System InformationAPI:[http://www.w3.org/TR/2010/WD-system-info-api-20100202/](http://www.w3.org/TR/2010/WD-system-info-api-20100202/)
OrientationEvent:[http://www.w3.org/TR/orientation-event/](http://www.w3.org/TR/orientation-event/)
Sensor API:[http://dev.w3.org/2009/dap/system-info/Sensors.html](http://dev.w3.org/2009/dap/system-info/Sensors.html)
Speech InputAPI:[http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html](http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html)
原创文章,转载请标明出处:[蒋宇捷的专栏](http://blog.csdn.net/hfahe)
- 前言
- AutoPager的简单实现
- 利用CSS3特性巧妙实现漂亮的DIV箭头
- IE9在Win7下任务栏新特性简介
- 浏览器九宫格的简单实现
- Raphael js库简介
- 使用CSS3构建Ajax加载动画
- 用CSS3创建动画价格表
- 用CSS3实现浏览器的缩放功能
- 用纯CSS3实现QQ LOGO
- 用CSS3创建旋转载入器
- 使用Javascript开发移动应用程序
- 用HTML5创建超酷图像灰度渐变效果
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
- 仅用CSS创建立体旋转幻灯片
- 如何创建跨浏览器的HTML5表单
- 用CSS3实现动画进度条
- HTML5 Guitar Tab Player
- 奇妙的HTML5 Canvas动画实例
- 谈HTML5和CSS3的国际化支持
- 实现跨浏览器的HTML5占位符
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- 使用HTML5和CSS3来创建幻灯片
- HTML5之美
- 如何使用HTML5创建在线精美简历
- 以小见大、由浅入深-谈如何面试Javascript工程师
- 快速入门:HTML5强大的Details元素
- 用CSS3实现图像风格
- HTML5视频字幕与WebVTT
- 用纯CSS3实现Path华丽动画
- 用3个步骤实现响应式网页设计
- 遇见CSS3滤镜
- 关于CSS3滤镜的碎念
- 用纯CSS3绘制萌系漫画人物动态头像
- CSS3新的鼠标样式介绍
- 用HTML5献上爱的3D玫瑰
- 对HTML5 Device API相关规范的解惑
- 如何使用HTML5实现拍照上传应用
- 2012第一季度国外HTML5移动开发趋势
- HTML5新特性:范围样式
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
- Chrome 19对于HTML5最新支持的动态:电池状态API,全屏API,震动API,语音API
- 遇见Javascript类型数组(Typed Array)
- 用HTML5 Audio API开发游戏音乐
- 用HTML5实现人脸识别
- 用Javascript实现人脸美容
- Chrome 20对于HTML5最新支持的动态:颜色输入,网络信息API,CSS着色器
- 用HTML5实现手机摇一摇的功能
- 用HTML5实现iPad应用无限平滑滚动
- 用非响应式设计构建跨端Web App
- 了解SVG
- HTML5图像适配介绍
- HTML5安全:内容安全策略(CSP)简介
- HTML5安全:CORS(跨域资源共享)简介
- 用CSS3 Region和3D变换实现书籍翻页效果
- 谈谈移动App的思维误区
- Chrome新特性:文件夹拖拽支持
- 《关注HTML5安全》
- HTML5安全风险详析之一:CORS攻击
- HTML5安全风险详析之二:Web Storage攻击
- HTML5图像适配最新进展:响应式图片规范草案
- HTML5移动Web App相关标准状态及路线图
- HTML5安全风险详析之三:WebSQL攻击
- Chrome引入WebRTC支持视频聊天App
- HTML5安全风险详析之四:Web Worker攻击
- HTML5安全风险详析之五:劫持攻击
- HTML5安全风险详析之六:API攻击
- HTML5安全攻防详析之七:新标签攻击
- 在iOS Safari中播放离线音频
- 使用WebRTC实现远程屏幕共享
- Firefox、Android、iOS遇见WebRTC
- HTML5光线传感器简介
- HTML5安全攻防详析之八:Web Socket攻击
- HTML5安全攻防详析之完结篇:HTML5对安全的改进
- 激动人心!在网页上通过语音输入文字 - HTML5 Web Speech API介绍
- Web滚动性能优化实战
- 用CSS3设计响应式导航菜单
- 用HTML5构建高性能视差网站
- 漫谈@supports与CSS3条件规则
- HTML5下载属性简介
- 如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(一)
- 如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(二)
- 趋势:Chrome为打包应用提供强大新特性
- 从HTML5移动应用现状谈发展趋势
- 基于HTML5的Web跨设备超声波通信方案