HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 GetUserMedia Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" /><br />
<video height="120px" autoplay="autoplay"></video><hr />
<input type="button" title="拍照" value="拍照" onclick="getPhoto()" /><br />
<canvas id="canvas1" height="120px" ></canvas><hr />
<input type="button" title="视频" value="视频" onclick="getVedio()" /><br />
<canvas id="canvas2" height="120px"></canvas>
<script type="text/javascript">
var video = document.querySelector('video')
var audio, audioType
var canvas1 = document.getElementById('canvas1')
var context1 = canvas1.getContext('2d')
var canvas2 = document.getElementById('canvas2')
var context2 = canvas2.getContext('2d')
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL
var exArray = [] //存储设备源ID
MediaStreamTrack.getSources(function (sourceInfos) {
for (var i = 0 i != sourceInfos.length ++i) {
var sourceInfo = sourceInfos[i]
//这里会遍历audio,video，所以要加以区分
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id)
}
}
})
function getMedia() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[1] //0为前置摄像头，1为后置
}]
},
'audio':true
}, successFunc, errorFunc) //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.')
}
}
function successFunc(stream) {
//alert('Succeed to get media!')
if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
video.mozSrcObject = stream
}
else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream
}
//video.play()
// 音频
audio = new Audio()
audioType = getAudioType(audio)
if (audioType) {
audio.src = 'polaroid.' + audioType
audio.play()
}
}
function errorFunc(e) {
alert('Error！'+e)
}
// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
function drawVideoAtCanvas(video,context) {
window.setInterval(function () {
context.drawImage(video, 0, 0,90,120)
}, 60)
}
//获取音频格式
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4 codecs="mp4a.40.5"') !== '') {
return ('aac')
} else if (element.canPlayType('audio/ogg codecs="vorbis"') !== '') {
return ("ogg")
}
}
return false
}
// vedio播放时触发，绘制vedio帧图像到canvas
// video.addEventListener('play', function () {
// drawVideoAtCanvas(video, context2)
// }, false)
//拍照
function getPhoto() {
context1.drawImage(video, 0, 0,90,120) //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
}
//视频
function getVedio() {
drawVideoAtCanvas(video, context2)
}
</script>
</body>
</html>
性能&集成
web workers
Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。
一般情况下，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
History API
window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。
概览
可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。
要在历史记录中前进和后退，只需要这样做：
window.history.back()//后退window.history.forword()//前进12
而利用go（）方法，通过指定一个相对于当前页面位置的数值，可以从当前会话的历史记录中加载页面（当前页面索引值为0，上一页为-1，下一页为1）
window.history.go(-1)//后退一页，相当于back（）window.history.go(1) //向前移动一页（相当于调用forward()）12
你可以查看length属性值，了解历史记录栈中一共有多少页：
var numberOfEntries = window.history.length1
添加和修改历史记录条目
HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。
例子：
假设 hfoo.html 将执行如下JavaScript代码：
var stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")12
这将让浏览器的地址栏显示tml，但不会加载bar.html页面也不会检查bar.html是否存在。
假设现在用户导航到了com，然后点击了后退按钮，此时，地址栏将会显示har.html，并且页面会触发popstate事件，该事件中的状态对象（state object）包含stateObj的一个拷贝。该页面看起来像foo.html，尽管页面内容可能在popstate事件中被修改。
如果我们再次点击后退按钮，URL将变回hoo.html，文档将触发另一个popstate事件，这次的状态对象为null。回退同样不会改变文档内容。
pushState（）方法
此方法有三个参数：
状态对象（state object）：一个js对象，与用pushState()方法创建的新历史记录条目关联。
标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
地址（URL）：新的历史记录条目的地址。
浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。
新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；
传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。
该参数是可选的；不指定的话则为文档当前URL。
replaceState（）方法
history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
popstate事件
每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
contenteditable属性
在HTML5中,通过设置contenteditable属性，任何元素都是可编辑的.，可以瞬间把你的网站变成wiki！
<!DOCTYPE html><html><body>
<div contenteditable="true">
This text can be edited by the user. </div>
</body></html>12345678
拖放
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
拖放会触发一系列拖放事件：dragstart、dragenter、dragover、dragleave等。
焦点管理
支持新的 HTML5 activeElement 属性和 hasFocus 方法。
activeElement
document.activeElement：返回当前页面中获得焦点的元素，只读。
很多情况下,该属性会返回一个<input>或者<textarea>元素,于此同时,如果用户在文本输入框中选中了一些文本,还可以使用该元素的selectionStart和selectionEnd属性获得准确的选中文本内容.
该属性的值还可能是一个<select>元素(下拉菜单)或者type属性为button,checkbox或radio的<input>元素.
通常,用户可以通过Tab键来在页面中可以获得焦点的那些元素中切换,然后按下空格键激活这个元素
如果没有某个元素获得焦点,则该属性的值为当前页面中的<body>元素.
截至目前只有firefox3.6支持。
hasFocus（）
document.hasFocus() 方法返回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。
设备访问
使用camera API
可以参考什么是HTML5（二）中相关部分。
触摸事件
略
使用地理位置定位
地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。
地理位置 API 通过 navigator.geolocation 提供。
获取当前定位
可以调用 getCurrentPosition() 函数获取用户当前定位位置。
这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。
navigator.geolocation.getCurrentPosition(function(position) {do_something(position.coords.latitude, position.coords.longitude)})123
检测设备方向
越来越多支持web功能的设备拥有检测自身方向的能力了；也就是说，这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。
有两种js事件负责处理方向信息。
DeviceOrientationEvent：会在加速度传感器检测到设备在方向上发生变化时触发。
DeviceMotionEvent：会在加速度发生改变时触发。
步骤一：在Citrix StoreFront里启用 Receiver for HTML5请跟随如下步骤在XenDesktop7环境中启用Receiver for HTML5。您需要登录您的Delivery Controller并使用Citrix StoreFront management console，当然你也可以从Citrix Studio或者Citrix StoreFront console里进行。打开Citrix Studio management console，点击Receiver for Web。
在中间窗格里，确保选择了您想要的Store。
在右边的窗格中，在Actions >Store Web Receiver >点击Deploy Citrix Receiver。
开启Receiver for HTML5有三个选项：
Install locally
Use Receiver for HTML5 if local install fails
Always use Receiver for HTML5
选择Use Receiver for HTML5 if local install fails。
步骤二：在Citrix Studio里启用ICA WebSockets 连接策略。
在Citrix Studio配置完成后，在Citrix Studio management console里按照如下步骤开启WebSockets策略。这里，您可以查看相eDocs：Modify an existing (default) policy。
在Citrix Studio里打开Policies。
在中间的窗格里，在Policies下修改现有的策略或者新建一个策略。
在右边的窗格点击Actions >Edit Policy…。
在Edit Unfiltered窗口中输入“WebSockets”并轻击回车。您可以找到3条与WebSockets相关的策略设置。点击每一条后面的Select。
