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

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

2. <input type="file" accept="video/*" capture="camcorder">

3. <input type="file" accept="audio/*" capture="microphone">

capture表示，可以捕獲到系統默認的設備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。

accept表示，直接打開系統文件目錄。

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

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

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

切圖社區（qietu.cn）原創。

目中需要用到 html5調用手機攝像頭，找了很多資料，大都是 js調用api ，做了幾個demo測試發現根本不行， 后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到js ，就可以實現。

代碼如下：

capture表示，可以捕獲到系統默認的設備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。

accept表示，直接打開系統文件目錄。

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

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

動設備和桌面電腦上的客戶端API起初并不是同步的。最初總是移動設備上先擁有某些功能和相應的API，但慢慢的，這些API會出現在桌面電腦上。其中一個應用接口技術就是getUserMedia API，它能讓應用開發者訪問用戶的攝像頭或內置相機。下面就讓我展示一下如何通過瀏覽器來訪問你的攝像頭，并提取截屏圖形。下面的代碼里我寫了一部分注釋，請閱讀：

1. <!--

2. 理想情況下我們應該先判斷你的設備上是否

3. 有攝像頭或相機，但簡單起見，我們在這里直接

4. 寫出了HTML標記，而不是用JavaScript先判斷

5. 然后動態生成這些標記

6. -->

7. <videoid="video"width="640"height="480" autoplay></video>

8. <buttonid="snap">Snap Photo</button>

9. <canvasid="canvas"width="640"height="480"></canvas>

在寫出上面這些標記前應該判斷用戶的客戶端是否有攝像頭支持，但這里為了不那么麻煩，這里直接寫出了這些HTML標記，需要注意的是我們這里使用的長寬是640×480。

JavaScript代碼

因為我們是手工寫出的HTML，所以下面的js代碼會比你想象的要簡單了很多。

1. // Put event listeners into place

3. window.addEventListener("DOMContentLoaded", function() {

5. // Grab elements, create settings, etc.

7. var canvas = document.getElementById("canvas"),

9. context = canvas.getContext("2d"),

11. video = document.getElementById("video"),

13. videoObj = { "video": true },

15. errBack = function(error) {

17. console.log("Video capture error: ", error.code);

19. };

21. // Put video listeners into place

23. if(navigator.getUserMedia) { // Standard

25. navigator.getUserMedia(videoObj, function(stream) {

27. video.src = stream;

29. video.play();

31. }, errBack);

33. } elseif(navigator.webkitGetUserMedia) { // WebKit-prefixed

35. navigator.webkitGetUserMedia(videoObj, function(stream){

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

39. video.play();

41. }, errBack);

43. }

45. elseif(navigator.mozGetUserMedia) { // Firefox-prefixed

47. navigator.mozGetUserMedia(videoObj, function(stream){

49. video.src = window.URL.createObjectURL(stream);

51. video.play();

53. }, errBack);

55. }

57. }, false);

一旦判斷出用戶瀏覽器支持getUserMedia ，下面就非常簡單了，只需要將那個video元素的src設置為用戶的攝像頭視頻直播連接。這就是用瀏覽器訪問攝像頭需要做的所有的事情!

拍照的功能只能說是稍微復雜一點點。我們在按鈕上加入一個監聽器，將視頻畫面畫到畫布上。

1. // 觸發拍照動作

3. document.getElementById("snap")

5. .addEventListener("click", function() {

7. context.drawImage(video, 0, 0, 640, 480);

9. });

當然，你還可以在圖片上加一些濾鏡效果….我還是把這些技術放到以后里再說吧。但至少你可以將這個畫布圖像轉換成一張圖片。

以前我們需要使用第三方的插件才能從瀏覽器里訪問用戶的攝像頭，這不免有些復雜。現在只需要HTML5的畫布技術和javaScript，我們就能簡單快速的操作用戶的攝像頭。不僅僅還是訪問攝像頭，而且是因為HTML5的畫布技術及其強大，我們可以給圖片上加入各種迷人的濾鏡效果。現在，在瀏覽器里用自己的攝像頭給自己拍張照片吧!