技術(shù)時(shí)刻都在前進(jìn)著。我們的需求也是時(shí)刻在改變著。最近在開發(fā)中遇到了用戶進(jìn)行賬號注冊時(shí)需要個(gè)人圖像,網(wǎng)站提供自動拍照功能。還有在登錄了電腦之后,手機(jī)端進(jìn)行登錄時(shí)只需要掃描一下電腦上的二維碼就可以登錄。這對一個(gè)網(wǎng)絡(luò)來說難度是極大的。技術(shù)的進(jìn)步使我們遇到了HTML5下面這個(gè)簡單粗暴的演示就是來完成這些功能的直接看代碼:
<!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>