站長(zhǎng)資訊網(wǎng)技術(shù)時(shí)刻都在前進(jìn)著。我們的需求也是時(shí)刻在改變著。最近在開(kāi)發(fā)中遇到了用戶(hù)進(jìn)行賬號(hào)注冊(cè)時(shí)需要個(gè)人圖像，網(wǎng)站提供自動(dòng)拍照功能。還有在登錄了電腦之后，手機(jī)端進(jìn)行登錄時(shí)只需要掃描一下電腦上的二維碼就可以登錄。這對(duì)一個(gè)網(wǎng)絡(luò)來(lái)說(shuō)難度是極大的。技術(shù)的進(jìn)步使我們遇到了HTML5下面這個(gè)簡(jiǎn)單粗暴的演示就是來(lái)完成這些功能的直接看代碼：
<！DOCTYPE html> <HTML> <HEAD> <TITLE> HTML5調(diào)用攝像頭實(shí)現(xiàn)拍照</ TITLE> <meta charset =“utf-8”> <meta name =“viewport”content =“width = device-width，initial-scale = 1”> </ HEAD> <BODY> <video id =“video”autoplay =“”style ='width：640px; height：480px'> </ video> <button id =“paizhao”>拍照</ button> <canvas id =“canvas”width =“640”height =“480”> </ canvas> <script type =“text / javascript”> var video = document.getElementById（“video”）; var context = canvas.getContext（“2d”）; var errocb = function（）{ console.log（“sth srong”）; } 如果（navigator.getUserMedia）{ navigator.getUserMedia（{ “視頻”：真}，函數(shù)（流）{ video.src =流; video.play（）; }，errocb）; } else if（navigator.webkitGetUserMedia）{ navigator.webkitGetUserMedia（{ “視頻”：真}，函數(shù)（流）{ video.src = window.webkitURL.createObjectURL（流）; video.play（）; }，errocb）; } 的document.getElementById（ “paizhao”）的addEventListener（ “點(diǎn)擊”，函數(shù)（）{ context.drawImage（視頻，0,0,640,480）; }）; </ SCRIPT> </ BODY> </ HTML>
