使用html5繪圖技術事項調用網路攝影機拍照；

標籤：UI   對象   data   class   top   document   資訊   loaded   技術   

　在mui架構中調用手機網路攝影機進行拍照可以直接使用原聲的HTML5；

　　以下是HTML代碼

<video id="video" width="640" height="480" autoplay></video>   <!--這一行是調用網路攝影機之後呈現的畫面--><button id="snap">Snap Photo</button>   <!--拍照按鈕--><canvas id="canvas" width="640" height="480"></canvas><!--這一行是拍照之後呈現在網頁上的畫面-->

　　以下是JavaScript代碼

var aVideo=document.getElementById(‘video‘);var aCanvas=document.getElementById(‘canvas‘);var ctx=aCanvas.getContext(‘2d‘);navigator.getUserMedia  = navigator.getUserMedia ||                          navigator.webkitGetUserMedia ||                          navigator.mozGetUserMedia ||                          navigator.msGetUserMedia;//擷取媒體對象（這裡指網路攝影機）      navigator.getUserMedia({video:true}, gotStream, noStream);//參數1擷取使用者開啟許可權；參數二成功開啟後調用，並傳一個視頻流對象，參數三開啟失敗後調用，傳錯誤資訊function gotStream(stream) {video.src = URL.createObjectURL(stream);video.onerror = function () {  stream.stop();};stream.onended = noStream;video.onloadedmetadata = function () {  alert(‘網路攝影機成功開啟！‘);};}function noStream(err) {        alert(err);      }//按鈕類比拍照，就是通過繪圖將捕捉到的畫面呈現在畫布上document.getElementById("snap").addEventListener("click", function() {ctx.drawImage(aVideo, 0, 0, 640, 480);//將擷取視頻繪製在畫布上});

　　

使用html5繪圖技術事項調用網路攝影機拍照；