关于浏览器调用USB摄像头以及摄像头拍摄照片转换为base64的具体实现方式

一、非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)
       }

二、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");

三、拍照转换为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)

四、资源链接

1.本次分享主要是为了解决浏览器内打开USB摄像头问题，如果有小伙伴对canvas不太了解的话，可以看canvas基础教程，整体源码地址源码链接