用js调用摄像头实现拍照功能兼容到ie8
最近公司要求做个项目刷脸登陆要求既能兼容高版本浏览器，又要能兼容到ie8及ie以上，欧米噶，虽然ie让我脑壳疼，但是还是得解决，在网上看了很多资料，最终选用jquery.webcam来实现ie的拍照
所以针对不同浏览器用来2种不同的方式
- ie上使用的是jquery.webcam,
- 非ie上使用h5的navigator.mediaDevices.getUserMedia
注意点不同页面引用不同js
function isIE() {
if(window.ActiveXObject || "ActiveXObject" in window) {
scriptNode.setAttribute("src", "JS/ie.js");
$('#notIE').hide()
$('#IE').show()
} else {
scriptNode.setAttribute("src", "JS/noie.js");
$('#IE').hide()
$('#notIE').show()
}
document.getElementsByTagName('head')[0].appendChild(scriptNode);
}
isIE()
navigator.mediaDevices.getUserMedia实现方案
const constraints = {
video: true,
'video': {
'facingMode': "user"
}
};
const captureVideoButton = document.querySelector('#screenshotcapture-button');
const screenshotButton = document.querySelector('#screenshot-button');
const btngroups = document.querySelector('#btngroups');
const img = document.querySelector('#photos img');
const video = document.querySelector('#screenshot video');
const canvas = document.createElement('canvas');
const auth = document.querySelector('#authbtn-button');
const authloading = document.querySelector('#loading_animation');
const suimg = document.querySelector("#suimg");
const failimg = document.querySelector("#failimg");
//打开摄像头
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch();
//点击立即拍照
screenshotButton.onclick = video.onclick = function() {
img.style.cssText = "display:block";
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
// Other browsers will fall back to image/png
img.src = canvas.toDataURL('image/webp');
//video.style.cssText = "display:none";
this.style.cssText = "display:none";
auth.style.cssText = "display:block";
};
//点击人脸认证
auth.onclick=function(){
authloading.style.cssText = "display:inline-block";
this.disabled=true;
var that=this
//模拟一秒钟之后,人脸认证失败还是成功
setTimeout(function(){
//成功
/*authloading.style.cssText = "display:none";
that.disabled=false;
that.style.cssText = "display:none";
suimg.style.cssText = "display:inline-block";*/
//失败
authloading.style.cssText = "display:none";
that.disabled=false;
that.style.cssText = "display:none";
failimg.style.cssText = "display:inline-block";
},1000)
}
//认证失败操作
failimg.onclick=function(){
screenshotButton.style.cssText = "display:block";
this.style.cssText = "display:none";
}
function handleSuccess(stream) {
video.srcObject = stream;
let mediaRecorder=new MediaRecorder(stream);
console.log(mediaRecorder)
}jquery.webcam的实现方案
var pos = 0,
ctx = null,
image = [];
var w = 300;
var h = 418;
$(document).ready(function() {
jQuery("#webcam").webcam({
width: 300,
height: 418,
mode: "callback",
swffile: "jscam.swf", // 这里引入swf文件，注意路径
onTick: function(remain) {},
onSave: function(data) {
var col = data.split(";");
var img = image;
var reader = new FileReader();
for(var i = 0; i < 300; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos += 4;
}
if(pos >= 4 * 300 * 418) {
// 将图片显示到canvas中
ctx.putImageData(img, 0, 0);
// 取得图片的base64码
var base64 = canvas.toDataURL("image/png");
// 将图片base64码设置给img
var base64image = document.getElementById('base64image');
base64image.setAttribute('src', base64);
pos = 0;
}
},
onCapture: function() {
webcam.save();
// Show a flash for example
},
debug: function(type, string) {
// console.log('type:' + type + ',string:' + string);
// Write debug information to console.log() or a div
},
onLoad: function() {
// Page load
}
});
var Event = {};
Event.addEvents = function(target, eventType, handle) {
if(document.addEventListener) {
Event.addEvents = function(target, eventType, handle) {
target.addEventListener(eventType, handle, false);
};
} else {
Event.addEvents = function(target, eventType, handle) {
target.attachEvent('on' + eventType, function() {
handle.call(target, arguments);
});
};
}
Event.addEvents(target, eventType, handle);
}
Event.addEvents(window, "load", function() {
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 300, 418);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 129, 89);
}
image = ctx.getImageData(0, 0, 300, 418);
}
}, false);
//点击拍照
$('#snapBtn').on('click', function() {
webcam.capture();
$(this).hide();
$("#authbtn-button2").show()
});
$("#authbtn-button2").on('click',function(){
$(this).children().removeClass('none');
$(this).attr('disabled','disabled');
var that = $(this);
setTimeout(function(){
//成功
/* $(this).children().addClass('none');
$(this).removeAttr('disabled')
$(this).hide();
$('#suimg2').removeClass('none')*/
//失败
that.children().addClass('none');
that.removeAttr('disabled')
that.hide();
$('#failimg2').removeClass('none')
},1000)
})
//
//认证失败之后的操作
$('#failimg2').on('click',function(){
$(this).hide();
$('#snapBtn').show()
})
});注意ie8时没办法直接转化成图片，因此需要后台协助转化数据
ie上的效果图
其他版本浏览器的效果图
