scottdriscoll/quagga.html

## quagga.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="quagga.min.js"></script>

        <style>
            #interactive.viewport {
              width: 640px;
            }

            #interactive.viewport canvas, video {
              float: left;
              width: 640px;
            }

            #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
              margin-left: -640px;
            }
        </style>
    </head>
    <body>
        <input type="submit" value="stop" onclick="Quagga.stop(); return false;"/>
        <div id="interactive" class="viewport"></div>
        <div id="results"></div>

        <script>
            $(function() {
                var App = {
                    init: function() {
                        Quagga.init(this.state, function() {
                            Quagga.start();
                        });
                    },
                    state: {
                        inputStream: {
                            type : "LiveStream",
                            constraints: {
                                width: 640,
                                height: 480,
                                facing: "environment"
                            }
                        },
                        locator: {
                            patchSize: "medium",
                            halfSample: true
                        },
                        numOfWorkers: 4,
                        decoder: {
                            readers: ["code_128_reader", "code_39_reader", "upc_reader", "upc_e_reader", "ean_reader", "ean_8_reader", "codabar_reader"]
                        },
                        locate: true
                    }
                };

                App.init();

                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 code = result.codeResult.code;

                    if (App.lastResult !== code) {
                        $('#results').append('<div>' + code + '</div>');
                        App.lastResult = code;
                   }
                });
            });
        </script>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="quagga.min.js"></script>

	<style>
	#interactive.viewport {
	width: 640px;
	}

	#interactive.viewport canvas, video {
	float: left;
	width: 640px;
	}

	#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
	margin-left: -640px;
	}
	</style>
	</head>
	<body>
	<input type="submit" value="stop" onclick="Quagga.stop(); return false;"/>
	<div id="interactive" class="viewport"></div>
	<div id="results"></div>

	<script>
	$(function() {
	var App = {
	init: function() {
	Quagga.init(this.state, function() {
	Quagga.start();
	});
	},
	state: {
	inputStream: {
	type : "LiveStream",
	constraints: {
	width: 640,
	height: 480,
	facing: "environment"
	}
	},
	locator: {
	patchSize: "medium",
	halfSample: true
	},
	numOfWorkers: 4,
	decoder: {
	readers: ["code_128_reader", "code_39_reader", "upc_reader", "upc_e_reader", "ean_reader", "ean_8_reader", "codabar_reader"]
	},
	locate: true
	}
	};

	App.init();

	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 code = result.codeResult.code;

	if (App.lastResult !== code) {
	$('#results').append('<div>' + code + '</div>');
	App.lastResult = code;
	}
	});
	});
	</script>
	</body>
	</html>