webApp调用mediaDevices.getUserMedia扫描二维码获取内容后携带参数跳转
梁宪
qrcode.js
var video = document.createElement('video');
video.height = window.innerHeight;
video.width = window.innerWidth;
var canvasElement = document.getElementById('canvas');
var canvas = canvasElement.getContext('2d');
var loadingMessage = document.getElementById('loadingMessage');
qrcode();
function qrcode(){
// 头像相机
var self = this;
console.log(navigator.mediaDevices )
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
}
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}
var constraints = window.constraints = {
audio: false,
video: {
sourceId: 'default',
facingMode: { exact: 'environment' }
}
}
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
// var video = document.getElementById('video')
try {
window.stream = stream
video.srcObject = stream
} catch (error) {
video.src = window.URL.createObjectURL(stream)
}
self.localMediaStream = stream;
video.setAttribute('playsinline', true); // required to tell iOS safari we don't want fullscreen
video.play();
window.requestAnimationFrame(tick);
})
.catch(function (err) {
alert(err.name + ': ' + err.message)
})
}
drawLine = (begin, end, color) => {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 3;
canvas.strokeStyle = color;
canvas.stroke();
};
tick = () => {
loadingMessage.innerText = '⌛ Loading video...';
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
canvasElement.height = window.innerHeight;
canvasElement.width = window.innerWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert',
});
if (code && code.data) {
//取二维码内容里的参数 'positionId=1&positionName=一'
var a = code.data.split('=')[1];
var positionId = a.split("&")[0];
//二维码加蓝色边框
drawLine(code.location.topLeftCorner, code.location.topRightCorner, '#3EA1FE');
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, '#3EA1FE');
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, '#3EA1FE');
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, '#3EA1FE');
window.location.href='patrolForm.html?positionId='+positionId
} else {
}
}
window.requestAnimationFrame(tick);
};qrcode.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/app.css"/>
<script src="js/plugins/template.js"></script>
<title>扫码</title>
</head>
<body>
<div style="position: fixed;bottom: 0;">
<div id="loadingMessage">
</div>
<canvas id="canvas" hidden></canvas>
</div>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/plugins/jquery-2.1.4.js"></script>
<script src="js/plugins/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/plugins/swiper/swiper.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
<script src="js/config.js"></script>
<script src="js/plugins/jsQR.js"></script>
<script src="js/qrcode.js"></script>
</body>
</html>mediaDevices.getUserMedia 文档地址
jsQR 文档地址
类似资料：