页面调用手机摄像头解析二维码
<!doctype html> <html lang="en"> <head> <title>扫码</title> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, width=device-width"> <script src="__JS__/jquery-1.8.3.min.js"></script> <link href="__PUBLIC__/js/layer_mobile/need/layer.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="__PUBLIC__/js/layer_mobile/layer.js"></script>
<!--载入llqrcode.js-->
<script src="__JS__/llqrcode.js"></script> <script src="__JS__/analyticCode.js"></script> </head> <body> <!--<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />--> <video id="video" autoplay="autoplay" style="width: 100%;height: 100%;"></video> <canvas id="canvas" width="500px" height="500px" style="display: none"></canvas> <img src="" id="showImg" width="500px" height="500px" style="display: none"> <!--<p class="url-box" id="urlBox"></p>--> <!--<button id="snap" onclick="takePhoto()">拍照</button>--> <!--<button id="snap" onclick="getUrl()">识别二维码</button>--> <script> var f = ''; var timer = null;
//获取设备中所有摄像头的对象(主要是多摄像头的情况) navigator.mediaDevices.enumerateDevices() .then(function(devices) { // devices is an array of accessible audio and video inputs. deviceId is the property I used to switch cameras
//摄像头对象的个数最后一个是默认default 想获取后置摄像头需要减2作为对象的键
var totalCameras = devices.length; f = devices[totalCameras-2]; //获得后置摄像头的对象后调用摄像头 getMedia() }) .catch(function(err) { console.log(err.name + ": " + error.message); }); //开启摄像头 function getMedia() { //获得video摄像头区域 let video = document.getElementById("video"); //这里介绍新的方法,返回一个 Promise对象 // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数 // then()是Promise对象里的方法 // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序 // 避免数据没有获取到 var dId = f;
//调用摄像头前配置文件 let constraints = { audio: true, //开启声音 video: { deviceId: {exact: dId.deviceId}//后置摄像头的对象中deviceId进行约束 } }; let promise = navigator.mediaDevices.getUserMedia(constraints);
//MediaStream 为创建对象后获得的数据流, promise.then(function (MediaStream) { video.srcObject = MediaStream; video.play(); timer = setInterval("takePhoto()", 2000); }); } function takePhoto() { //获得Canvas对象 let video = document.getElementById("video"); let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 500, 500); var base64_img = canvas.toDataURL('image/jpeg'); $('#showImg').attr('src',base64_img); getUrl() }
//读取二维码 function getUrl(){ var url = $('#showImg').attr('src'); console.log(url); //解析二维码 qrcode.decode(url);
//解析后回调,无论是否成功都会返回需要判断 qrcode.callback=function(imgMsg){ if (imgMsg.indexOf('hb-mss') >= 0 ) { if (imgMsg.indexOf('nahuo') >= 0) { // alert(imgMsg+"1"); clearInterval(timer); ajaxJiedan(imgMsg) }else{ alert('请扫描取货专用二维码'); } } } } function ajaxJiedan(url) { $.get(url,null,function (res) { // alert(JSON.stringify(res)+"3") if (res.status == 1) { // alert(res.msg) layer.open({ content: res.msg+'!请再次确认货物种类' ,skin: 'msg' ,time: 2 }); setTimeout(function(){ location.href = "{:U('Order/orderInfo')}"+"?id="+res.id; },2000); }else{ alert(res.msg) layer.open({ content: res.msg ,skin: 'msg' ,time: 2 }); setTimeout(function(){ location.href = "{:U('Index/index')}"; },2000); } }) } // ajaxJiedan('http://m.hb-mss.com/sender.php/Order/nahuo.html?id=223'); </script> </body> </html>