如何利用html5呼叫手機攝像頭程式碼例項
本章節介紹一下如何利用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編碼逗號之後的部分
相關文章
- html5呼叫手機攝像頭HTML
- 教你如何利用python呼叫攝像頭Python
- html5呼叫攝像頭功能HTML
- html5呼叫攝像頭截圖HTML
- html5呼叫攝像頭實現拍照HTML
- Android如何呼叫攝像頭Android
- HTML5通過navigator.mediaDevices.getUserMedia呼叫手機攝像頭問題HTMLdev
- HTML5透過navigator.mediaDevices.getUserMedia呼叫手機攝像頭問題HTMLdev
- 如何使用HTML5實現利用攝像頭拍照上傳功能HTML
- 安卓呼叫攝像頭拍照安卓
- Android呼叫攝像頭Android
- canvas繪製機器貓頭像程式碼例項Canvas
- Android呼叫攝像頭拍照Android
- jQuery webcam plugin呼叫攝像頭jQueryWebPlugin
- Android 呼叫攝像頭拍照Android
- canvas繪製熊貓頭像程式碼例項Canvas
- 瀏覽器呼叫攝像頭進行拍照程式瀏覽器
- 安卓開發之呼叫攝像頭安卓
- C#實現攝像頭呼叫、拍照C#
- 搭建一個攝像頭應用程式 應用程式內部攝像頭
- HTML5利用canvas繪製矩形程式碼例項HTMLCanvas
- Omdia:智慧手機攝像頭晶片趨勢預測晶片
- 照片系列之android呼叫攝像頭拍照Android
- Android開發之呼叫攝像頭拍照Android
- android studio呼叫攝像頭拍照及具體步驟演示程式碼Android
- AngularJS中使用HTML5攝像頭拍照AngularJSHTML
- [譯] 充分利用多攝像頭 APIAPI
- Win10攝像頭如何開啟_WIN10攝像頭在哪裡Win10
- 美聯社:智慧手機攝像頭挺進高階
- Android呼叫攝像頭拍照並顯示照片Android
- Android 呼叫攝像頭功能【拍照與視訊】Android
- 如何使用PYTHON操作攝像頭Python
- html5中呼叫攝像頭拍照並上傳(附繞過https的想法)HTMLHTTP
- 利用html5實現的飛雪效果程式碼例項HTML
- 兩步實現安卓手機秒變網路攝像頭安卓
- css3實現的動物頭像效果程式碼例項CSSS3
- Jetson AGX Xavier ROS下呼叫USB單目攝像頭ROS
- C# 使用AForge呼叫筆記本攝像頭拍照C#筆記