Skip to content

Instantly share code, notes, and snippets.

@deguchi deguchi/index.html
Last active Nov 22, 2017

Embed
What would you like to do?
QuaggaJS LiveStream(getUserMedia) demo
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>サービス名</title>
<style>
html, body {
padding: 0;
margin: 0;
background: #000000;
}
#camera canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="camera"></div>
<!-- <script src="https://serratus.github.io/quaggaJS/examples/js/quagga.min.js" type="text/javascript"></script> -->
<script src="/static/quagga.min.js" type="text/javascript"></script>
<script>
Quagga.init({
numOfWorkers: 4,
frequency: 10,
locate: true,
inputStream : {
name : "Live",
type : "LiveStream",
target: document.querySelector('#camera'),
constraints: {
width: { min: 640, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 720, max: 1080 },
facingMode: "environment", // or user
frameRate: 10,
}
},
decoder : {
readers: [
'ean_reader'
]
},
locator: {
patchSize: "medium", // x-small, small, medium, large, x-large
}
}, function(err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
Quagga.onProcessed(function(result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
}
}
});
Quagga.onDetected(function(result) {
var isbn = result.codeResult.code;
if (isbn.match(/^97[8|9]/)) {
var style = window.innerHeight > window.innerWidth ? 'width: ' + window.innerWidth + 'px;' : 'height: ' + window.innerHeight + 'px;';
document.getElementById('camera').innerHTML = '<img src="https://cover.openbd.jp/' + isbn + '.jpg" alt="" style="' + style + '">';
var params = getQueryString();
if (params) {
var url = params.url + '?' + params.param + '=' + isbn;
setTimeout(function() {
location.href = url;
}, 300);
} else {
alert(isbn);
}
}
});
function getQueryString() {
if (location.search==='') return null;
var params = {}
location.search.substr(1).split('&').map(function(param) {
var pairs = param.split('=');
params[pairs[0]] = decodeURIComponent(pairs[1]);
});
return params;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.