無意間發現HTML5 可以輕易的開啟Webcam，手癢來Try一下，順手做個筆記。

程式碼來源

首先要加body中加入一個Video Element

  <video id="video" width="640" height="480" autoplay></video>

在head中新增一個JavaScript ，並新增一個事件監聽

  <script type="text/javascript">  
       // 建立一個監聽事件 （事件名稱 ，要執行的function, useCapture)  
       window.addEventListener("DOMContentLoaded", function () {  
         // Grab elements, create settings, etc.  
         var video = document.getElementById("video"),  
              //使用影像: true ，取用聲音 true  
             videoObj = {video: true ,audio: true},  
         errBack = function (error) {  
           console.log("Video capture error: ", error.code);  
         };  
         // 依據Browser不同使用不同的API          
         if (navigator.getUserMedia) { // Standard  
           navigator.getUserMedia(videoObj, function (stream) {  
             video.src = stream;  
             video.play();  
           }, errBack);  
         } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed  
           navigator.webkitGetUserMedia(videoObj, function (stream) {  
             video.src = window.webkitURL.createObjectURL(stream);  
             video.play();  
           }, errBack);  
         }  
         else if (navigator.mozGetUserMedia) { // Firefox-prefixed  
           navigator.mozGetUserMedia(videoObj, function (stream) {  
             video.src = window.URL.createObjectURL(stream);  
             video.play();  
           }, errBack);  
         }  
         else if (navigator.msGetUserMedia){  
          navigator.msGetUserMedia(videoObj, function (stream) {  
             video.src = window.URL.createObjectURL(stream);  
             video.play();  
           }, errBack);  
         }  
       }, false);  
     </script>

這裡補充一下onload 與 DOMContentLoaded 差異：

當onload事件觸發時，頁面上所有的DOM，樣式表，Script，圖片，flash都已經加載完成了。

當DOMContentLoaded事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。

我們需要給一些元素(element)的事件綁定處理函數。但問題是，如果那個元素(element)還沒有加載到頁面上，但是綁定事件已經執行完了，是沒有效果的。
這時候DOMContentLoaded事件就是一個很好的選擇，當DOMContentLoaded觸發時，所有的元素(element)己加載完成。

資料來源

http://www.cnblogs.com/hh54188/archive/2013/03/01/2939426.html

接下來說明一下JavaScript整個架構

window.addEventListener 整個函式的架構為

 element.addEventListener(event, function, useCapture);

event指的事件名稱，在這裡指的是DOMContentLoaded事件。

function 則是發生DOMContentLoaded事件後要執行的事情。

在此則是執行取得WebCam影像以及Mic的動作並顯示在video element中

useCapture則是指是否使用bubbling propagation，

此參數是可選擇性的，預設為false。

當為false時，為bubbling propagation，為true時為capturing propagation。

這二個的差異可以參考這一篇，寫的挺清楚。

JavaScript 天書 -- 什麼是event bubbling

或是

w3schools

videoObj = {video: true ,audio: true}

vide:true 表示取用WebCam , audio :true則表示取用Mic 。

如果這二個值都為true則啟用時如下圖

video: true , audio :false 則如下圖

video: false ,audio: true 則如下圖

  navigator.getUserMedia(videoObj, function (stream) {  
             video.src = stream;  
             video.play();  
           }, errBack);

getUserMedia() 它提供了存取camera以及麥克風的串流方法。並將取得的串流
當作是video element的資料來源，並啟動video element為播放模式。

完整程式碼如下

 <!DOCTYPE html>  
 <html>  
   <head>   
     <title>Demo HTML5 WebCam</title>  
     <meta charset="UTF-8">  
     <script type="text/javascript">  
       // 建立一個監聽事件 （事件名稱 ，要執行的function, useCapture)  
       window.addEventListener("DOMContentLoaded", function () {  
         // Grab elements, create settings, etc.  
         var video = document.getElementById("video"),  
              //使用影像: true ，取用聲音 true  
             videoObj = {video: true ,audio: true},  
         errBack = function (error) {  
           console.log("Video capture error: ", error.code);  
         };  
         // 依據Browser不同使用不同的API          
         if (navigator.getUserMedia) { // Standard  
           navigator.getUserMedia(videoObj, function (stream) {  
             video.src = stream;  
             video.play();  
           }, errBack);  
         } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed  
           navigator.webkitGetUserMedia(videoObj, function (stream) {  
             video.src = window.webkitURL.createObjectURL(stream);  
             video.play();  
           }, errBack);  
         }  
         else if (navigator.mozGetUserMedia) { // Firefox-prefixed  
           navigator.mozGetUserMedia(videoObj, function (stream) {  
             video.src = window.URL.createObjectURL(stream);  
             video.play();  
           }, errBack);  
         }  
         else if (navigator.msGetUserMedia){  
          navigator.msGetUserMedia(videoObj, function (stream) {  
             video.src = window.URL.createObjectURL(stream);  
             video.play();  
           }, errBack);  
         }  
       }, false);  
     </script>  
   </head>  
   <body>  
     <!-- 放一個Video element 上去 指定大小為640*480 並且自動播放 -->  
     <video id="video" width="640" height="480" autoplay></video>      
   </body>  
 </html>

*執行時記得允許存取相機／麥克風 。

(Chrome)