如何實現HTML 5在線攝像頭應用，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

最近在搞一個考試系統，系統要求要有隨機拍照的功能，并且攝像頭能夠收到js的控制。在線攝像頭嘛，就那兩種實現的方式：cab或者flash。

暫且不論本人從沒學過的flash（事實上我已經做了一個flash調用攝像頭的demo，雖然是調用成功了，但是對于拍照部分我實在是無力了，況且還有js控制flash部分的代碼更是令人頭痛。）。

本來之前本人已經開發了一個攝像頭的cab，但是activeX嘛，只能給IE用用，兼容性和穩定性都不是很好。于是現在開始研究基于HTML5的在線攝像頭。

首先看效果

Html5大家也漸漸的不那么陌生了，至少也得知道只有少數瀏覽器能很好的兼容HTML5吧。所以測試環境是Chrome 18以上版本，并且在測試前應開啟瀏覽器的MediaStream：在地址欄輸入about:flags，啟用MediaStream。

然后就可以開始敲代碼了。

不過值得注意的是，HTML5的測試不能再本地直接打開html網頁，而是需要在http上訪問html頁面。直接搭建IIS，apache或者直接通過VS來查看html5頁面。

1、 視頻流添加一個Video標簽，并調用getUserMedia獲得用戶的攝像頭視頻流。

<videoid="video"autoplay=""width="320px"height="240px"></video><scripttype="text/javascript">varvideo=document.getElementById("video");navigatornavigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia;if(navigator.getUserMedia){if(navigator.webkitURL){navigator.getUserMedia("video",function(stream){video.src=window.webkitURL.createObjectURL(stream);},function(error){alert(error);});}else{navigator.getUserMedia("video",function(stream){video.src=window.webkitURL.createObjectURL(stream);},function(error){alert(error);});}}else{alert("navigator.getUserMediaError");}</script>

這樣，運行以后便可以直接在網頁中調用攝像頭了。運行后會提示

2、 拍照

用Canvas捕獲Video標簽的內容并顯示，就做到了拍照的效果。

同樣先添加一個canvas標簽和一個button按鈕

<canvasid="canvas1"width="320"height="240"></canvas>

button點擊后調用JS，把Video標簽中當前的圖像顯示到canvas中，效果就不做演示了

functionscamera(){varvideoElement=document.getElementById('video');varcanvasObj=document.getElementById('canvas1');varcontext1=canvasObj.getContext('2d');context1.fillStyle="#ffffff";context1.fillRect(0,0,320,240);context1.drawImage(videoElement,0,0,320,240);//alert("PaiZhaoSuccess");}

3.上傳到服務器

上傳到服務器還是用的老辦法，把圖片轉為base64，通過ajax，毫無新意的保存到了服務器上。（需要注意的是，HTML5中toDataURL方法是轉為的PNG格式，發送到服務端后會很大一張：320*240的照片要190kb，所以需要在服務器端轉格式為jpg，變為10kb一張。詳情見demo）

functionuploadPhoto()//上傳拍照的圖片{showImgCode();request=createRequest();if(request==null){alert("Unabletocreaterequest");}else{//alert("request.OK");varbase64Data=document.getElementById('textB64').value.replace(/\+/g,"%2B");//對參數中的+號編碼，防止丟失varurl="AJAX/UploadPic.aspx";request.open("POST",url,true);request.setRequestHeader("Content-type","application/x-www-form-urlencoded");request.onreadystatechange=responses;request.send("&img="+base64Data);//alert("send.OK");}}functionresponses(){if(request.readyState==4)//服務器處理結束{if(request.status==200)//一切正常{if(request.responseText=="OK"){alert("上傳成功！");}else{alert("上傳失敗！");alert(request.responseText);}}}}

事實上，通過Html5的其他一些方法，甚至可以做出在線PS的功能，不過這些不在我的需求之內，現在也就不深入研究了。

總結

以上是生活随笔為你收集整理的如何实现HTML 5在线摄像头应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。