移動設備和桌面電腦上的客戶端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

?

轉載于:https://www.cnblogs.com/luludehuhuan/p/7644728.html

總結

以上是生活随笔為你收集整理的使用HTML5技术控制电脑或手机上的摄像头的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。