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