如何利用html5呼叫手機攝像頭程式碼例項

admin發表於2017-02-19
原文網址 : https://www.softwhy.com/article-1359-1.html
HTML
本章節介紹一下如何利用html5實現呼叫手機攝像頭功能。HTML5 The Media Capture API提供了對攝像頭的可程式設計訪問，使用者可以直接用getUserMedia獲得攝像頭提供的視訊流。但實際上用html5呼叫手機攝像頭存在很多問題： 

1）.谷歌的釋出的Chrome到了21版本後，才新增了一個用於高質量視訊音訊通訊的getUserMedia API，該API允許Web應用程式訪問攝像頭和麥克風,其他手機瀏覽器只有opera支援html5呼叫本地拍照功能 

2）.兩個瀏覽器均不支援訪問多個攝像頭：chrome不支援訪問後置攝像頭，pera支援訪問後置攝像頭的android手機，瀏覽器chrome32版本下實現了瀏覽器呼叫裝置攝像頭進行拍照。主要分3個步驟來完成: 

一.獲取視訊流:

新增一個HTML5的Video標籤，並將從攝像頭獲得視訊作為這個標籤的輸入來源:

[JavaScript] 純文字檢視 複製程式碼
var video = document.getElementByIdx_x_x("video"); 
navigator.getUserMedia({video:true}, function (stream){ 
  video.src = window.webkitURL.createObjectURL(stream); 
}, function (error){ 
  alert(error); 
});

二.拍照:

關於拍照功能，採用HTML5的Canvas實時捕獲Video標籤的內容，Video元素能作為Canvas影像的輸入:

[JavaScript] 純文字檢視 複製程式碼
function scamera(){ 
  var videoElement = document.getElementByIdx_x_x('video'); 
  var canvasObj = document.getElementByIdx_x_x('canvas1'); 
  var context1 = canvasObj.getContext('2d'); 
  context1.fillStyle = "#ffffff"; 
  context1.fillRect(0, 0, 320, 240); 
  context1.drawImage(videoElement, 0, 0, 320, 240); 
}

三.圖片獲取:

要從Canvas獲取圖片資料，其核心思路是用canvas的toDataURL將Canvas的資料轉換為base64位編碼的PNG影像:

[JavaScript] 純文字檢視 複製程式碼
var imgData=canvas.toDataURL(“image/png”);

imgData格式如下：”data:image/png;base64,xxxxx“ 

真正影像資料是base64編碼逗號之後的部分

相關文章