WebApp調用手機相冊或攝像頭、撥打電話

一、總結

一句話總結：input标簽，指定type為file，選擇好對應的accept即可。camera——相機，相應的accept為image ； camcoder——錄影機，相應的accept為video；microphone——錄音，相應的accept為audio；

<input type="file" accept="image/*" capture="camera">
    <input type="file" accept="video/*" capture="camcorder">
    <input type="file" accept="audio/*" capture="microphone">

二、WebApp調用手機相冊或攝像頭、撥打電話

最近在做一個項目，需到用到打開手機相冊、拍照和撥打電話功能

打開相冊：

<input type="file" accept="image/*">

#accept 屬性隻能與 <input type="file"> 配合使用

它規定能夠通過檔案上傳進行送出的檔案類型

accept="image/jpg,image/gif"

可以接受 GIF 和 JPEG 兩種圖像

如果不限制圖像的格式，可以寫為：accept="image/*"

打開相機：

<input type="file" accept="image/*" capture="camera"/>

#capture 屬性表示需要使用的系統功能

camera——相機，相應的accept為image

camcoder——錄影機，相應的accept為video

microphone——錄音，相應的accept為audio

打開相冊或相機：

<input type="file" accept="image/*" multiple="multiple"/>

#multiple 屬性規定輸入的字段可以選擇多個值。專門用來支援多選的，若有這個屬性，capture屬性無效

撥打電話：

正在嘗試

三、html5怎樣調用手機攝像頭或者相冊?

HTML5技術支援WebApp在手機上拍照，顯示在頁面上并上傳到伺服器。這是手機微網誌應用中常見的功能，當然你也可以在其它類型應用中适當使用此技術。
　　1、 視訊流
　　HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可程式設計通路，使用者可以直接用 getUserMedia（請注意目前僅Chrome和Opera支援）獲得攝像頭提供的視訊流。我們需要做的是添加一個HTML5 的 Video 标簽，并将從攝像頭獲得的視訊作為這個标簽的輸入來源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 标簽内将顯示動态的攝像視訊流。下面需要進行拍照了。
　　2、 拍照
　　拍照是采用HTML5的Canvas功能，實時捕獲Video标簽的内容，因為Video元素可以作為Canvas圖像的輸入，是以這一點很好實作。主要代碼如下：

var canvas=document.createElement(‘canvas’); //動态建立畫布對象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video對象内指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);

　　3、 圖檔擷取
　　從Canvas擷取圖檔資料的核心思路是用canvas的toDataURL将Canvas的資料轉換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);

這樣，imgData變量就存儲了一長串的字元資料内容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像資料是base64編碼逗号之後的部分，是以要讓實際伺服器接收的圖像資料應該是這部分，我們可以用兩種辦法來擷取。
　　第一種：是在前端截取22位以後的字元串作為圖像資料，例如：
var data=imgData.substr(22);

　　如果要在上傳前擷取圖檔的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

　　第二種：是在後端擷取傳輸的資料後用背景語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP裡：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

　　4、 圖檔上傳
　　在前端可以使用Ajax将上面獲得的圖檔資料上傳到背景腳本。例如使用jQuery時可以用：
$.post(‘upload.php’,{‘data’:data});

在背景我們用PHP腳本接收資料并存儲為圖檔。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w\');
fwrite($fp,$image);
fclose($fp);
}

　　以上的解決方案不僅能用于Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖檔編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把使用者編輯完的圖檔上傳儲存到伺服器上。
　　在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離将越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必将會遷移到WEB應用上來。
相關規範：
The MediaCapture API：http://www.w3.org/TR/media-capture-api/
Canvas：http://dev.w3.org/html5/2dcontext/

1 需要加載cordova.js
 2 方法：
 3 document.addEventListener("deviceready"， onDeviceReady， false);
 4 function onDeviceReady() {
 5 pictureSource = navigator.camera.PictureSourceType;
 6 destinationType = navigator.camera.DestinationType;
 7 }
 8 //相冊
 9 function fromCamera()
10 {
11 var source = pictureSource.PHOTOLIBRARY;
12 navigator.camera.getPicture(function (imageData) {
13 setimg(imageData);
14 }， function (message) {
15 if (source == pictureSource.CAMERA)
16 alert(\'加載照相機出錯!\' + message);
17 else
18 alert(\'加載相冊出錯!\' + message);
19 }， {
20 quality: 50，
21 destinationType: destinationType.FILE_URI，
22 sourceType: source
23 });
24 }
25 //拍照
26 function EditImgPz()
27 {
28 navigator.camera.getPicture(function (imageData) {
29 setimg(imageData);
30 }， function (message) {
31 alert(message);
32 }， {
33 quality: 50，
34 destinationType: navigator.camera.DestinationType.FILE_URI，
35 sourceType: Camera.PictureSourceType.CAMERA，
36 allowEdit: true，
37 encodingType: Camera.EncodingType.JPEG，
38 popoverOptions: CameraPopoverOptions，
39 saveToPhotoAlbum: true
40 });
41 }

四、HTML5調用手機錄影機、相冊功能 <input>方法

最近用MUI架構做webapp項目，在有PLUS環境的基礎上能直接調用手機底層的API來使用拍照或從相冊選擇上傳功能！

在查資料的時候，想起了另一種用input調用攝像和相冊功能的方法，之前沒有深入了解過，現在整理一下：

不需要特殊環境，使用input标簽 type值為file，可以調用系統預設的照相機、相冊、錄影機、錄音功能。先上代碼：

accept表示打開的系統檔案目錄

capture表示的是系統所捕獲的預設裝置，camera：照相機；camcorder：錄影機；microphone：錄音；

其中還有一個屬性multiple，支援多選，當支援多選時，multiple優先級高于capture，是以隻用寫成：<input type="file" accept="image/*" multiple>就可以，可以在手機上測試一下。那麼選中的圖檔怎樣擷取并顯示呢？

html：（css）

<div>

</div>

</form>

js：

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$(\'#blah\').attr(\'src\', e.target.result);

}

reader.readAsDataURL(input.files[0]);

}

$("#imgInp").change(function(){

readURL(this);

});

樣式自己調整，這樣就能顯示剛拍下的照片或者從相冊中選中的圖檔了。

五、（親測可用）html5 file調用手機攝像頭

在切圖網一個客戶的webapp項目中需要用到 html5調用手機攝像頭，找了很多資料，大都是 js調用api 然後怎樣怎樣，做了幾個demo測試發現根本不行，後來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到js ，就可以實作。代碼如下：

（親測可用）html5調用手機攝像頭

html 代碼效果預覽

capture表示，可以捕獲到系統預設的裝置，比如：camera--照相機；camcorder--錄影機；microphone--錄音。

accept表示，直接打開系統檔案目錄。

其實html5的input:file标簽還支援一個multiple屬性，表示可以支援多選，如：

html 代碼效果預覽

加上這個multiple後，capture就沒啥用了，因為multiple是專門yong用來支援多選的。

限制隻能選擇圖檔

<input type="file" accept="image/*">

限制隻能選擇視訊

<input type="file" accept="video/*">

限制隻能選擇音頻

<input type="file" accept="audio/*">

直接打開攝像頭錄像

<input type="file" accept="video/*" capture="camera">