日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5在線攝像頭應(yīng)用

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

10年的汝陽網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整汝陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“汝陽網(wǎng)站設(shè)計(jì)”,“汝陽網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

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

首先看效果

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

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

#p#

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

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

 
 
 
 
    
  
  
  
  
  1.         
    2. 
  
  
  
  
  2.         
    3.

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

2、  拍照

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

 
 
 
 
    
  
  
  
  
  1. function scamera() { 
    2. 
  
  
  
  
  2.                 var videoElement = document.getElementById('video'); 
    3. 
  
  
  
  
  3.                 var canvasObj = document.getElementById('canvas1'); 
    4. 
  
  
  
  
  4.                 var context1 = canvasObj.getContext('2d'); 
    5. 
  
  
  
  
  5.                 context1.fillStyle = "#ffffff"; 
    6. 
  
  
  
  
  6.                 context1.fillRect(0, 0, 320, 240); 
    7. 
  
  
  
  
  7.                 context1.drawImage(videoElement, 0, 0, 320, 240); 
    8. 
  
  
  
  
  8.                 //alert("PaiZhaoSuccess"); 
    9. 
  
  
  
  
  9.             }
    10.

3.上傳到服務(wù)器

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

 
 
 
 
    
  
  
  
  
  1. function uploadPhoto()//上傳拍照的圖片 
    2. 
  
  
  
  
  2.             { 
    3. 
  
  
  
  
  3.                 showImgCode(); 
    4. 
  
  
  
  
  4.                 request = createRequest(); 
    5. 
  
  
  
  
  5.                 if (request == null) { 
    6. 
  
  
  
  
  6.                     alert("Unable to create request"); 
    7. 
  
  
  
  
  7.                 } 
    8. 
  
  
  
  
  8.                 else { 
    9. 
  
  
  
  
  9.                     //alert("request.OK"); 
    10. 
  
  
  
  
  10.                     var base64Data = document.getElementById('textB64').value.replace(/\+/g, "%2B"); //對參數(shù)中的+號編碼，防止丟失 
    11. 
  
  
  
  
  11.                     var url = "AJAX/UploadPic.aspx"; 
    12. 
  
  
  
  
  12.                     request.open("POST", url, true); 
    13. 
  
  
  
  
  13.                     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    14. 
  
  
  
  
  14.                     request.onreadystatechange = responses; 
    15. 
  
  
  
  
  15.                     request.send("&img=" + base64Data); 
    16. 
  
  
  
  
  16.                     //alert("send.OK"); 
    17. 
  
  
  
  
  17.                 } 
    18. 
  
  
  
  
  18.             } 
    19. 
  
  
  
  
  19.             function responses() { 
    20. 
  
  
  
  
  20.                 if (request.readyState == 4)//服務(wù)器處理結(jié)束 
    21. 
  
  
  
  
  21.                 { 
    22. 
  
  
  
  
  22.                     if (request.status == 200)//一切正常 
    23. 
  
  
  
  
  23.                     { 
    24. 
  
  
  
  
  24.                         if (request.responseText == "OK") { 
    25. 
  
  
  
  
  25.                             alert("上傳成功！"); 
    26. 
  
  
  
  
  26.                         } 
    27. 
  
  
  
  
  27.                         else { 
    28. 
  
  
  
  
  28.                             alert("上傳失??！"); 
    29. 
  
  
  
  
  29.                             alert(request.responseText); 
    30. 
  
  
  
  
  30.                         } 
    31. 
  
  
  
  
  31.                     } 
    32. 
  
  
  
  
  32.                 } 
    33. 
  
  
  
  
  33.             }
    34.

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

好了，就這么多，更詳細(xì)的內(nèi)容見DEMO中代碼：Download


名稱欄目：HTML5在線攝像頭應(yīng)用
文章路徑：http://www.5511xx.com/article/ccecjph.html