JS调用安卓手机摄像头扫描二维码并用JS解析二维码

项目要求：

使用H5模仿微信扫一扫付款功能

经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片，经过QrCode直接再本地识别。

优点：

兼容大多数浏览器

本地识别不占用服务端资源

代码比较简单只有一个页面

<html lang="ZH-CN">
<head>
  <meta charset="utf-8">
  <title>Web QrCode Test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jsqrcode/src/grid.js"></script>
<script type="text/javascript" src="jsqrcode/src/version.js"></script>
<script type="text/javascript" src="jsqrcode/src/detector.js"></script>
<script type="text/javascript" src="jsqrcode/src/formatinf.js"></script>
<script type="text/javascript" src="jsqrcode/src/errorlevel.js"></script>
<script type="text/javascript" src="jsqrcode/src/bitmat.js"></script>
<script type="text/javascript" src="jsqrcode/src/datablock.js"></script>
<script type="text/javascript" src="jsqrcode/src/bmparser.js"></script>
<script type="text/javascript" src="jsqrcode/src/datamask.js"></script>
<script type="text/javascript" src="jsqrcode/src/rsdecoder.js"></script>
<script type="text/javascript" src="jsqrcode/src/gf256poly.js"></script>
<script type="text/javascript" src="jsqrcode/src/gf256.js"></script>
<script type="text/javascript" src="jsqrcode/src/decoder.js"></script>
<script type="text/javascript" src="jsqrcode/src/qrcode.js"></script>
<script type="text/javascript" src="jsqrcode/src/findpat.js"></script>
<script type="text/javascript" src="jsqrcode/src/alignpat.js"></script>
<script type="text/javascript" src="jsqrcode/src/databr.js"></script>
</head>
<body>
  <div class="booth">
    <video id="video" width="400" height="400"></video>
    <canvas id='canvas' width='400' height='400'></canvas>
    <img id='img' src=''>
  </div>
  
  <div id="mmm"></div>
  
  <canvas id="qr-canvas" width="640" height="480"></canvas>
<script>
    
    
    //初始化媒体对象
  	var c=0;
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        img = document.getElementById('img'),
        vendorUrl = window.URL || window.webkitURL;
        
    //媒体对象
    navigator.getMedia = navigator.getUserMedia ||
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false  //不适用音频
    }, function(strem){
        console.log(strem);
        video.src = vendorUrl.createObjectURL(strem);
        video.play();
    }, function(error) {
        //error.code
        console.log(error);
    });
    
    //启动定时器
    setTimeout("actionP(null)","1000");
    
    //定时器
    function actionP(data){
    	if(data==null){
    		Screenshot()
        	
    	}else{
    		if(data!=null & data!="error decoding QR Code"){//识别出数据
        		if(data.indexOf("http")!=-1){
        			window.location.href=data;
        		}else alert(data);
        		
        	}else{//没有数据循环十次
           		c++;
               	if(c<10){
               		setTimeout("actionP(null)","1000");
               	}
            	
            }
    	}
    	
   	}
    
    
    function Screenshot(){//截取图像
 		 canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);
 		 var imgData = canvas.toDataURL("image/png");
 		 load(imgData);
 		 img.src=imgData;
    	
    }
   ////////////////////////////////////////识别二维码////////////////////////////////////////////
   
	function dragenter(e) {
	  e.stopPropagation();
	  e.preventDefault();
	}
	
	function dragover(e) {
	  e.stopPropagation();
	  e.preventDefault();
	}
	function drop(e) {
	  e.stopPropagation();
	  e.preventDefault();
	
	  var dt = e.dataTransfer;
	  var files = dt.files;
	
	
	}
	
		
	function load(name)
	{
		initCanvas(640,480);
		//识别二维码并回调方法
		qrcode.callback = actionP;
		qrcode.decode(name);
	}
	
	function initCanvas(ww,hh)//创建画板
		{
		gCanvas = document.getElementById("qr-canvas");
		gCanvas.addEventListener("dragenter", dragenter, false);  
		gCanvas.addEventListener("dragover", dragover, false);  
		gCanvas.addEventListener("drop", drop, false);
		var w = ww;
		var h = hh;
		gCanvas.style.width = w + "px";
		gCanvas.style.height = h + "px";
		gCanvas.width = w;
		gCanvas.height = h;
		gCtx = gCanvas.getContext("2d");
		gCtx.clearRect(0, 0, w, h);
		imageData = gCtx.getImageData( 0,0,320,240);
	}


  </script>
</body>
</html>

JS调用安卓手机摄像头扫描二维码并用JS解析二维码

猜你喜欢