摘要：二瀏覽器如何調(diào)用本地?cái)z像頭下如何調(diào)用攝像頭由于不支持方法，所以調(diào)用攝像頭的方法在不支持，但是天無絕人之路，恰好可以解決這個(gè)問題，原理我也不是很清楚，在這里我只把源碼分享給大家。

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

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

2.getUserMedia()方法傳參

getUserMedia(constraints,successcallback,errorcallback);
參數(shù)說明     a:constraints是一個(gè)對(duì)象{"video":true,"audio":false}表示是否調(diào)用攝像頭和麥克風(fēng)
            b:successcall 成功之后的回掉函數(shù)，瀏覽器會(huì)傳遞一個(gè)stream對(duì)象給函數(shù)，可以通過這個(gè)對(duì)象進(jìn)行后續(xù)操作，此對(duì)象是一個(gè)blob對(duì)象，需要通過URL.createObjectURL()方法將其轉(zhuǎn)換
            c:errorback 失敗之后的回掉函數(shù)，瀏覽器會(huì)傳遞一個(gè)error對(duì)象

3.具體實(shí)現(xiàn)代碼

    HTML部分：
    
    
    
    
    
   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()靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString，其中的URL對(duì)象表示指定的File對(duì)象或Blob對(duì)象。
            video.src = window.URL.createObjectURL(stream);
            video.play();
             },errorcallback)
       }

1.IE下如何調(diào)用USB攝像頭
由于IE不支持getUserMedia()方法，所以H5調(diào)用攝像頭的方法在IE不支持，但是天無絕人之路，flash恰好可以解決這個(gè)問題，原理我也不是很清楚，在這里我只把源碼分享給大家。整體源碼地址見文章底部

HTML部分：

        


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

1.非IE下將拍攝的圖片轉(zhuǎn)換為base64
可以使用H5的canvas在視頻流中的截取一張圖片，之后通過自帶的toDataURL()將其轉(zhuǎn)換為base64

HTML部分 ： 




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);
    //轉(zhuǎn)換為base64字符串
    var base64 = canvas.toDataURL("image/png");    
    console.log(base64);
}

2.IE下轉(zhuǎn)為base64，直接調(diào)用內(nèi)部的GetBase64Code()方法

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

1.本次分享主要是為了解決瀏覽器內(nèi)打開USB攝像頭問題，如果有小伙伴對(duì)canvas不太了解的話，可以看canvas基礎(chǔ)教程，整體源碼地址源碼鏈接