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