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

最新推荐文章于 2024-07-26 16:14:32 发布

阿豆根

最新推荐文章于 2024-07-26 16:14:32 发布

阅读量2.2w

点赞数

分类专栏： JAVA相关技术文章标签： JS调用摄像头模拟微信扫一扫 JS识别二维码

本文链接：https://blog.csdn.net/qq_33768099/article/details/79743651

版权

JAVA相关技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目要求：

使用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>

阿豆根

关注

0
点赞
踩
29

收藏

觉得还不错? 一键收藏
35
评论
JS调用安卓手机摄像头扫描二维码并用JS解析二维码

项目要求：使用H5模仿微信扫一扫付款功能经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片，经过QrCode直接再本地识别。优点：兼容大多数浏览器本地识别不占用服务端资源代码比较简单只有一个页面&lt;html lang="ZH-CN"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &l...
复制链接

扫一扫

专栏目录