HTML5呼叫手機攝像頭拍照
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
http://blog.sina.com.cn/s/blog_4ad7c2540101lnak.html
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編碼逗號之後的部分
程式碼請到我的csdn空間下載。http://download.csdn.net/detail/mfcai_blog/7130083
本文歡迎轉載，轉載請註明作者與出處
作者：流星
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> 閱讀(738) | 評論(0) | 轉發(0) | 給主人留下些什麼吧！~~ 評論熱議