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

capture表示，可以捕獲到系統預設的裝置，比如：camera--照相機；camcorder--攝像機；microphone--錄音。
accept表示，直接開啟系統檔案目錄。

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

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

限制只能選擇圖片

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

限制只能選擇視訊

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

限制只能選擇音訊

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

直接開啟攝像頭拍照

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

直接開啟攝像頭錄影

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

圖片壓縮

document.getElementById('file').addEventListener('change', function() {
var reader = new FileReader();
reader.onload = function (e) {
compress(this.result);
};
reader.readAsDataURL(this.files[0]);
}, false
 
);

不管檔案域是用何種方式開啟的，都可以在 change 事件中獲取到選擇的檔案或拍攝的照片。

建立一個FileReader物件，我們需要呼叫readAsDataURL把檔案轉換為base64影象編碼，如data:image/jpeg;base64……這種格式。
onload是一個非同步回撥，當檔案讀取完執行該方法內程式碼。this.result記錄讀取結果，如果讀取失敗，該值為null。在這裡進行圖片壓縮的具體操作。

var compress = function (res) {
var img = new Image(),
maxH = 160;
img.onload = function () {
var cvs = document.createElement('canvas'),
ctx = cvs.getContext('2d');
if(img.height > maxH) {
img.width *= maxH / img.height;
img.height = maxH;
}
cvs.width = img.width;
cvs.height = img.height;
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataUrl = cvs.toDataURL('image/jpeg', 0.6);
// 上傳略
}
img.src = res;
}

建立一個Image物件，給src屬性賦值為讀取結果，同樣在onload非同步回撥中編寫處理圖片的程式碼。
這裡就要開始使用canvas進行圖片壓縮了。

首先是尺寸按比例縮放，然後把圖片繪到畫布上，最後呼叫toDataURL方法壓縮影象質量。

context.toDataURL('MIME型別', 影象質量0-1); // 該方法返回base64影象編碼

程式碼裡省略了一些校監操作，如檔案型別約束和檔案大小判斷（小於一定值可以不壓縮）。
最後就是把資料傳送到後端的操作，這裡就不說了。

Html5呼叫攝像頭

通過以上的程式碼已經可以實現呼叫手機相機拍照、壓縮、上傳這一整套流程了。
不過在折騰的過程中也發現了一種呼叫攝像頭的方法。注意，是攝像頭！使用input呼叫的是相機。其中的差別就是攝像頭是隻捕獲畫面，相機還包括原生的一些拍照、設定等控制元件。

通過對攝像頭的呼叫可以做很多有趣的事，比如拍照美化、濾鏡等。可以說實現一個第三方相機是沒問題的。
之前下載過一款安卓相機APP，不到100K的大小，可以實現拍照的一些風格化，也許就是Html5實現的呢。

需要用到的是 getUserMedia API，具體的實現這裡就不貼了。