用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上的效果图

其他版本浏览器的效果图