首页 / 安卓 / JS调用安卓手机摄像头扫描二维码
JS调用安卓手机摄像头扫描二维码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS调用安卓手机摄像头扫描二维码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3874字,纯文字阅读大概需要6分钟。
内容图文
项目要求:
使用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调用安卓手机摄像头扫描二维码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。