關於瀏覽器調用USB攝像頭以及攝像頭拍攝照片轉換爲base64的具體實現方式

1、非IE瀏覽器如何調用本地攝像頭

1.非IE下的USB攝像頭
非IE下調用USB攝像頭，目前主要使用HTML5的getUserMedia()，使用以前先判斷瀏覽器是否支持該方法，注：使用getUSerMedia()調用USB攝像頭必須有後臺的支持，我用的是nodejs，源碼見文章底部

navigator.myGetUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;    
   if(navigator.myGetUserMedia){
       //後續處理
       ...
   }

2.getUserMedia()方法傳參

getUserMedia(constraints,successcallback,errorcallback);
參數說明     a:constraints是一個對象{"video":true,"audio":false}表示是否調用攝像頭和麥克風
            b:successcall 成功以後的回掉函數，瀏覽器會傳遞一個stream對象給函數，能夠經過這個對象進行後續操做，此對象是一個blob對象，須要經過URL.createObjectURL()方法將其轉換
            c:errorback 失敗以後的回掉函數，瀏覽器會傳遞一個error對象

3.具體實現代碼

HTML部分：
    <!--這裏的autoplay必須設置，否則只會獲取到第一幀-->
    <video id="video" width="680" height="480" autoplay> </video>
    <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
    <canvas style="" id="canvas" width="680" height="480"></canvas>
    
   JavaScript部分:
   document.createElement("canvas").getContext("2d");
   navigator.myGetUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;

   var video = document.getElementById('video'),
       videoObj = {'video':true},
       errorcallback = function(){
           console.log('error');
       }

       if(navigator.myGetUserMedia){
           navigator.myGetUserMedia(videoObj,function(stream){
           //stream是得到的URL blob，經過URL.createObjectURL()靜態方法會建立一個 DOMString，其中的URL對象表示指定的File對象或Blob對象。
            video.src = window.URL.createObjectURL(stream);
            video.play();
             },errorcallback)
       }

2、IE瀏覽器如何調用本地攝像頭

1.IE下如何調用USB攝像頭
因爲IE不支持getUserMedia()方法，因此H5調用攝像頭的方法在IE不支持，可是天無絕人之路，flash剛好能夠解決這個問題，原理我也不是很清楚，在這裏我只把源碼分享給你們。總體源碼地址見文章底部

HTML部分：
<div id="FalshDiv"  style="text-align:center;">
        <object style="z-index: 100" id="My_Cam" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" viewastext="在線拍照" width="680">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="javascripts/MyCamera.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="wmode" value="transparent" />
            <embed style="z-index: 100" align="middle" allowscriptaccess="sameDomain" bgcolor="#ffffff" height="480" name="My_Cam" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high"  wmode="transparent" src="javascripts/MyCamera.swf" type="application/x-shockwave-flash" width="680"></embed>
        </object>
</div>

JavaScript部分:
//獲取Flash對象
    function thisMovie(movieName) {
        if (navigator.appName.indexOf("Microsoft") != -1){
            return document[movieName];
        }
        else {
            return document[movieName];
        }
    }
    thisMovie("My_Cam");

3、拍照轉換爲base64

1.非IE下將拍攝的圖片轉換爲base64
可使用H5的canvas在視頻流中的截取一張圖片，以後經過自帶的toDataURL()將其轉換爲base64

HTML部分 ： 
<video id="video" width="680" height="480" autoplay> </video>
<input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
<canvas style="" id="canvas" width="680" height="480"></canvas>

JavaScript部分 ： 
var video =  document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
document.getElementById('btn').onclick=function(){
    context.drawImage(video,0,0,680,480);
    //轉換爲base64字符串
    var base64 = canvas.toDataURL('image/png');    
    console.log(base64);
}

2.IE下轉爲base64，直接調用內部的GetBase64Code()方法

var MyCan= thisMovie("My_Cam");
setTimeout(function(){
    var base64Data = MyCan.GetBase64Code();
    console.log(base64Data);
},2000)

4、資源連接

1.本次分享主要是爲了解決瀏覽器內打開USB攝像頭問題，若是有小夥伴對canvas不太瞭解的話，能夠看canvas基礎教程，總體源碼地址源碼連接