移動設備和桌面電腦上的客戶端API起初並不是同步的。最初總是移動設備上先擁有某些功能和相應的API，但慢慢的，這些API會出現在桌面電腦上。其中一個應用接口技術就是getUserMedia API，它能讓應用開發者訪問用戶的攝像頭或內置相機。下面就讓我展示一下如何通過瀏覽器來訪問你的攝像頭，並提取截屏圖形。
下面的代碼裏寫了一部分註釋，請閱讀：
1. <!--
2. 理想情況下我們應該先判斷你的設備上是否
3. 有攝像頭或相機，但簡單起見，我們在這裏直接
4. 寫出了HTML標記，而不是用JavaScript先判斷
5. 然後動態生成這些標記
6. -->
7. <video id="video" width="640" height="480" autoplay></video>
8. <button id="snap">Snap Photo</button>
9. <canvas id="canvas" width="640" height="480"></canvas>
在寫出上面這些標記前應該判斷用戶的客戶端是否有攝像頭支持，但這裏爲了不那麼麻煩，這裏直接寫出了這些HTML標記，需要注意的是我們這裏使用的長寬是640×480。
JavaScript代碼
因爲是手工寫出的HTML，所以下面的js代碼會比你想象的要簡單了很多。
1. // Put event listeners into place
2.
3. window.addEventListener("DOMContentLoaded", function() {
4.
5. // Grab elements, create settings, etc.
6.
7. var canvas = document.getElementById("canvas"),
8.
9. context = canvas.getContext("2d"),
10.
11. video = document.getElementById("video"),
12.
13. videoObj = { "video": true },
14.
15. errBack = function(error) {
16.
17. console.log("Video capture error: ", error.code);
18.
19. };
20.
21. // Put video listeners into place
22.
23. if(navigator.getUserMedia) { // Standard
24.
25. navigator.getUserMedia(videoObj, function(stream) {
26.
27. video.src = stream;
28.
29. video.play();
30.
31. }, errBack);
32.
33. } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
34.
35. navigator.webkitGetUserMedia(videoObj, function(stream){
36.
37. video.src = window.webkitURL.createObjectURL(stream);
38.
39. video.play();
40.
41. }, errBack);
42.
43. }
44.
45. else if(navigator.mozGetUserMedia) { // Firefox-prefixed
46.
47. navigator.mozGetUserMedia(videoObj, function(stream){
48.
49. video.src = window.URL.createObjectURL(stream);
50.
51. video.play();
52.
53. }, errBack);
54.
55. }
56.
57. }, false);
一旦判斷出用戶瀏覽器支持getUserMedia，下面就非常簡單了，只需要將那個video元素的src設置爲用戶的攝像頭視頻直播連接。這就是用瀏覽器訪問攝像頭需要做的所有的事情!
拍照的功能只能說是稍微複雜一點點。我們在按鈕上加入一個監聽器，將視頻畫面畫到畫布上。
1. // 觸發拍照動作
2.
3. document.getElementById("snap")
4.
5. .addEventListener("click", function() {
6.
7. context.drawImage(video, 0, 0, 640, 480);
8.
9. });
當然，你還可以在圖片上加一些濾鏡效果….我還是把這些技術放到以後的文章裏再說吧。但至少你可以將這個畫布圖像轉換成一張圖片。
以前我們需要使用第三方的插件才能從瀏覽器裏訪問用戶的攝像頭，這不免有些複雜。現在只需要HTML5的畫布技術和javaScript，我們就能簡單快速的操作用戶的攝像頭。不僅僅還是訪問攝像頭，而且是因爲HTML5的畫布技術及其強大，我們可以給圖片上加入各種迷人的濾鏡效果。現在，在瀏覽器裏用自己的攝像頭給自己拍張照片吧!
WEB前端學習交流羣21 598399936