<!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=" 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>