1. 程式人生 > >使用html5繪圖技術事項調用攝像頭拍照;

使用html5繪圖技術事項調用攝像頭拍照;

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繪圖技術事項調用攝像頭拍照;