java调用usb摄像头 ie,关于浏览器调用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部分：

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

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

JavaScript部分 ：

var video = document.getElementById('video');

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

document.getElementById('btn').οnclick=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基础教程，整体源码地址源码链接