Skip to content

Instantly share code, notes, and snippets.

@CharlesOkwuagwu

CharlesOkwuagwu/index.html

Forked from jazzido/index.html
Created April 7, 2018 16:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CharlesOkwuagwu/c196b2418e8825c286479ea9a1a5b86c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CharlesOkwuagwu/c196b2418e8825c286479ea9a1a5b86c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @jazzido jazzido revised this gist Mar 8, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,6 +27,8 @@
    </style>
    </head>
    <body>
    <h1>Barcode scanner</h1>
    <p>Based on <a href="https://github.com/yurydelendik/zbarjs">zbarjs</a> - Code: <a href="https://gist.github.com/jazzido/9435670">https://gist.github.com/jazzido/9435670</a></p>
    <div>
    <video autoplay></video>
    <div id="inner"></div>
  2. @jazzido jazzido revised this gist Mar 8, 2014. 1 changed file with 4726 additions and 0 deletions.
    4,726 changes: 4,726 additions & 0 deletions zbar-processor.js
    View file
    4,726 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  3. @jazzido jazzido created this gist Mar 8, 2014.
    92 changes: 92 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>JS in-browser barcode reader</title>
    <style type="text/css">
    body > div {
    position: relative;
    width: 320px; height: 240px;
    }
    video { position: absolute; top: 0; left: 0; width: 320px; height: 240px; }
    div#inner {
    position: absolute;
    margin: 0 auto;
    top: 0; left: 0;
    width: 260px; height: 180px;
    border: 30px solid rgba(64,64,64, 0.5);
    zindex: 1000;
    }
    div#redline {
    position: absolute;
    top: 120px;
    width: 320px;
    height: 2px;
    background-color: rgba(255, 0, 0, 0.3);
    zindex: 1001;
    }
    </style>
    </head>
    <body>
    <div>
    <video autoplay></video>
    <div id="inner"></div>
    <div id="redline">
    </div>
    </div>
    <ul id="decoded">
    </ul>
    <canvas style="display:none;"></canvas>

    <script type="text/javascript">
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;
    var list = document.querySelector('ul#decoded');

    var worker = new Worker('zbar-processor.js');
    worker.onmessage = function(event) {
    if (event.data.length == 0) return;
    var d = event.data[0];
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(d[2] + ' (' + d[0] + ')'));
    list.appendChild(entry);
    };

    function snapshot() {
    if (localMediaStream === null) return;
    var k = (320 + 240) / (video.videoWidth + video.videoHeight);
    canvas.width = Math.ceil(video.videoWidth * k);
    canvas.height = Math.ceil(video.videoHeight * k);
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
    0, 0, canvas.width, canvas.height);

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
    worker.postMessage(data);
    }

    setInterval(snapshot, 500);

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

    if (navigator.getUserMedia) {
    navigator.getUserMedia({video: true},
    function(stream) { // success callback
    if (video.mozSrcObject !== undefined) {
    video.mozSrcObject = stream;
    } else {
    video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
    }
    localMediaStream = true;
    },
    function(error) {
    console.error(error);
    });
    }
    else {
    }
    </script>
    </body>
    </html>