如何實(shí)現(xiàn)HTML 5在線攝像頭應(yīng)用，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

在網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)過(guò)程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)公司還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

最近在搞一個(gè)考試系統(tǒng)，系統(tǒng)要求要有隨機(jī)拍照的功能，并且攝像頭能夠收到j(luò)s的控制。在線攝像頭嘛，就那兩種實(shí)現(xiàn)的方式：cab或者flash。

暫且不論本人從沒學(xué)過(guò)的flash（事實(shí)上我已經(jīng)做了一個(gè)flash調(diào)用攝像頭的demo，雖然是調(diào)用成功了，但是對(duì)于拍照部分我實(shí)在是無(wú)力了，況且還有js控制flash部分的代碼更是令人頭痛。）。

本來(lái)之前本人已經(jīng)開發(fā)了一個(gè)攝像頭的cab，但是activeX嘛，只能給IE用用，兼容性和穩(wěn)定性都不是很好。于是現(xiàn)在開始研究基于HTML5的在線攝像頭。

首先看效果

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

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

不過(guò)值得注意的是，HTML5的測(cè)試不能再本地直接打開html網(wǎng)頁(yè)，而是需要在http上訪問(wèn)html頁(yè)面。直接搭建IIS，apache或者直接通過(guò)VS來(lái)查看html5頁(yè)面。

1、  視頻流添加一個(gè)Video標(biāo)簽，并調(diào)用getUserMedia獲得用戶的攝像頭視頻流。

                              var video = 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.getUserMedia  Error");              }          

這樣，運(yùn)行以后便可以直接在網(wǎng)頁(yè)中調(diào)用攝像頭了。運(yùn)行后會(huì)提示

2、  拍照

用Canvas捕獲Video標(biāo)簽的內(nèi)容并顯示，就做到了拍照的效果。

同樣先添加一個(gè)canvas標(biāo)簽和一個(gè)button按鈕

button點(diǎn)擊后調(diào)用JS，把Video標(biāo)簽中當(dāng)前的圖像顯示到canvas中，效果就不做演示了

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

3.上傳到

事實(shí)上，通過(guò)Html5的其他一些方法，甚至可以做出在線PS的功能，不過(guò)這些不在我的需求之內(nèi)，現(xiàn)在也就不深入研究了。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。