最近一個需求就是做一個二維碼掃描的功能，但是又不想使用安卓app的方式實作，百度了一下貌似html5可以實作。
項目使用環境以及工具：
eclipse，jdk1.7，struts2，html5，jquery,qrcode
引用
html5技術支援webapp在手機上拍照，顯示在頁面上并上傳到伺服器。這是手機微網誌應用中常見的功能，當然你也可以在其它類型應用中适當使用此技術。
這個功能不但手機端可以實作pc端也可以很好的實作，這個應用接口技術就是getusermedia api，它能讓應用開發者通路使用者的攝像頭或内置相機。下面就讓我展示一下如何通過浏覽器來通路你的攝像頭，并提取截屏圖形。
一、視訊流
html5 的 the media capture（媒體捕捉） api 提供了對攝像頭的可程式設計通路，使用者可以直接用 getusermedia （請注意目前僅chrome和opera支援）獲得攝像頭提供的視訊流。我們需要做的是添加一個html5 的 video 标簽，并将從攝像頭獲得的視訊作為這個标簽的輸入來源。
二、拍照
拍照是采用html5的canvas功能，實時捕獲video标簽的内容，因為video元素可以作為canvas圖像的輸入，是以這一點很好實作。
三、 擷取圖檔
從canvas擷取圖檔資料的核心思路是用canvas的todataurl将canvas的資料轉換為base64位編碼的png圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgdata=canvas.todataurl(“image/png”);
這樣，imgdata變量就存儲了一長串的字元資料内容，表示的就是一個png圖像的base64編碼。因為真正的圖像資料是base64編碼逗号之後的部分，是以要讓實際伺服器接收的圖像資料應該是這部分，我們可以用兩種辦法來擷取。
第一種：是在前端截取22位以後的字元串作為圖像資料，例如：
var data=imgdata.substr(22);
第二種：就是替換；前面的部分為"";
var image = canvas.todataurl("image/png").replace("data:image/png;base64,", "");
反正不管如何實作，能擷取到圖檔流即可、
四、上傳圖檔并解析
使用 setinterval定時上傳到項目背景使用開源qrcode.jar 解析圖檔擷取二維碼資訊。
前台部分代碼：
javascript code
<a target="_blank" href="http://bbs.csdn.net/topics/391982089#clipboardwindow">?</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<code><video id=</code><code>"video"</code><code>></code>
<code><script></code>
<code> </code><code>var</code> <code>flag = </code><code>true</code><code>;</code>
<code> </code><code>window.addeventlistener(</code><code>"domcontentloaded"</code><code>, </code><code>function</code> <code>() {</code>
<code> </code><code>var</code> <code>video = document.getelementbyid(</code><code>"video"</code><code>), canvas, context;</code>
<code> </code><code>try</code> <code>{</code>
<code> </code><code>canvas = document.createelement(</code><code>"canvas"</code><code>);</code>
<code> </code><code>canvas.width = 600;</code>
<code> </code><code>canvas.height = 600;</code>
<code> </code><code>context = canvas.getcontext(</code><code>"2d"</code><code>);</code>
<code> </code><code>} </code><code>catch</code> <code>(e) { alert(</code><code>"not support canvas!"</code><code>); </code><code>return</code><code>; }</code>
<code> </code><code>navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia;</code>
<code> </code><code>if</code> <code>(navigator.getusermedia)</code>
<code> </code><code>navigator.getusermedia(</code>
<code> </code><code>{ </code><code>"video"</code><code>: </code><code>true</code> <code>},</code>
<code> </code><code>function</code> <code>(stream) {</code>
<code> </code><code>if</code> <code>(video.mozsrcobject !== undefined)video.mozsrcobject = stream;</code>
<code> </code><code>else</code> <code>video.src = ((window.url || window.webkiturl || window.mozurl || window.msurl) && window.url.createobjecturl(stream)) || stream; </code>
<code> </code><code>video.play();</code>
<code> </code><code>},</code>
<code> </code><code>function</code> <code>(error) {</code>
<code> </code><code>alert(</code><code>"請檢查是否開啟攝像頭"</code><code>);</code>
<code> </code><code>flag = </code><code>false</code><code>;</code>
<code> </code><code>}</code>
<code> </code><code>);</code>
<code> </code><code>else</code> <code>alert(</code><code>"native device media streaming (getusermedia) not supported in this browser"</code><code>);</code>
<code> </code>
<code> </code><code>setinterval(</code><code>function</code> <code>() {</code>
<code> </code><code>if</code><code>(!flag){</code>
<code> </code><code>return</code><code>;</code>
<code> </code><code>context.drawimage(video, 0, 0, canvas.width = video.videowidth, canvas.height = video.videoheight);</code>
<code> </code><code>var</code> <code>image = canvas.todataurl(</code><code>"image/png"</code><code>).replace(</code><code>"data:image/png;base64,"</code><code>, </code><code>""</code><code>); </code>
<code> </code><code>$.ajax({</code>
<code> </code><code>url : </code><code>'qrcodeaction_decoderqrcode.action'</code><code>,</code>
<code> </code><code>async : </code><code>false</code><code>,</code>
<code> </code><code>type : </code><code>'post'</code><code>,</code>
<code> </code><code>data : {</code>
<code> </code><code>'time'</code> <code>: (</code><code>new</code> <code>date()).tostring(),</code>
<code> </code><code>'img'</code> <code>: image</code>
<code> </code><code>},</code>
<code> </code><code>success : </code><code>function</code><code>(result) {</code>
<code> </code>
<code> </code><code>});</code>
<code> </code><code>}, 5000);</code>
<code> </code><code>}, </code><code>false</code><code>);</code>
<code> </code><code></script> </code>
背景部分代碼：
java code
<code>/**</code>
<code> </code><code>* 解析二維碼</code>
<code> </code><code>*/</code>
<code> </code><code>public</code> <code>string decoderqrcode(){</code>
<code> </code><code>try</code> <code>{</code>
<code> </code><code>string realpath = servletactioncontext.getservletcontext().getrealpath(</code><code>"/file"</code><code>);</code>
<code> </code><code>simpledateformat sdf = </code><code>new</code> <code>simpledateformat(</code><code>"yyyymmddhhmmss"</code><code>);</code>
<code> </code><code>string imgname = sdf.format(</code><code>new</code> <code>date()) + </code><code>".png"</code><code>;</code>
<code> </code><code>string filepath = realpath+constants.sf_file_separator+imgname;</code>
<code> </code><code>outputstream out = </code><code>new</code> <code>fileoutputstream(filepath);</code>
<code> </code><code>qrcode.generateimage(img,out);</code><code>//生成圖檔</code>
<code> </code><code>message = qrcode.decoderqrcode(filepath);</code>
<code> </code><code>} </code><code>catch</code> <code>(exception e) {</code>
<code> </code><code>e.printstacktrace();</code>
<code> </code><code>return</code> <code>action.success;</code>
<code> </code><code>}</code>
調用電腦拍攝一定要允許操作。現在隻需要html5的畫布技術和javascript，我們就能簡單快速的操作使用者的攝像頭。手機不僅可以調用攝像頭掃描，pc不僅僅能通路攝像頭，而且利用html5強大的畫布技術，我們可以給圖檔上加入各種迷人的濾鏡效果。現在，在浏覽器裡用自己的攝像頭給自己拍張照片吧！
有些手機可能無法調出攝像頭，那就趕緊換手機吧，别out了。