DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> 如何讓HTML5調用手機攝像頭拍照——實踐就是一切
如何讓HTML5調用手機攝像頭拍照——實踐就是一切
編輯:關於HTML     

原文:如何讓HTML5調用手機攝像頭拍照——實踐就是一切

NanShan 小編將思路提供給了大家,學編程最重要的是實踐,我這雖然有完善的代碼,但是希望大家都可以自己寫出屬於自己的代碼

HTML5 The Media Capture API提供了對攝像頭的可編程訪問,用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。但實際上用html5調用手機攝像頭存在很多問題:

1)谷歌的發布的Chrome到了21版本後,才新增了一個用於高質量視頻音頻通訊的getUserMedia API,該API允許Web應用程序訪問攝像頭和麥克風,其他手機浏覽器只有opera支持html5調用本地拍照功能

2)兩個浏覽器均不支持訪問多個攝像頭:chrome不支持訪問後置攝像頭,pera支持訪問後置攝像頭的

 

android手機,浏覽器chrome32版本下實現了浏覽器調用設備攝像頭進行拍照。主要分3個步驟來完成:

1)獲取視頻流

添加一個HTML5的Video標簽,並將從攝像頭獲得視頻作為這個標簽的輸入來源

var video = document.getElementByIdx_x_x("video");

navigator.getUserMedia({video:true}, function (stream) {

video.src = window.webkitURL.createObjectURL(stream);

}, function (error) { alert(error); });

2)拍照

關於拍照功能,采用HTML5的Canvas實時捕獲Video標簽的內容,Video元素能作為Canvas圖像的輸入

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);

}

3)圖片獲取

要從Canvas獲取圖片數據,其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像

var imgData=canvas.toDataURL(“image/png”);

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

真正圖像數據是base64編碼逗號之後的部分

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved