使用html5繪圖技術事項調用攝像頭拍照;
阿新 • • 發佈:2017-06-26
err 媒體對象 object list on() 手機 tlist 用戶 height
在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繪圖技術事項調用攝像頭拍照;