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

摘要：二浏览器如何调用本地摄像头下如何调用摄像头由于不支持方法，所以调用摄像头的方法在不支持，但是天无绝人之路，恰好可以解决这个问题，原理我也不是很清楚，在这里我只把源码分享给大家。

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部分：
    
    
    
    
    
   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)
       }

1.IE下如何调用USB摄像头
由于IE不支持getUserMedia()方法，所以H5调用摄像头的方法在IE不支持，但是天无绝人之路，flash恰好可以解决这个问题，原理我也不是很清楚，在这里我只把源码分享给大家。整体源码地址见文章底部

HTML部分：

        


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

1.非IE下将拍摄的图片转换为base64
可以使用H5的canvas在视频流中的截取一张图片，之后通过自带的toDataURL()将其转换为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);
    //转换为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基础教程，整体源码地址源码链接