How to read QR code using iPad camera on website?

Question

I am using the following code to access the camera but aim is to read QR codes using camera. Using the following code I can only take the picture and save it then using my backend read the QR code from the saved file.

How can I modify the code to process the picture while the camera is reading. Or something like sending the streams to the back-end and once the QR code is detected it notifies the user.

I need to work with a tablet.

I can use the following to record videos as well but how to send the streams to back-end

 <input type="file" capture="camera" accept="video/*">

My code to take pictures

<!DOCTYPE HTML>
<html>
    <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>ColorThief Demo</title>

    <script type="text/javascript" charset="utf-8" src="jquery-2.0.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="quantize.js"></script>
    <script type="text/javascript" charset="utf-8" src="color-thief.js"></script>

    <style>
    #yourimage {
        width:100%; 
    }

    #swatches {
        width: 100%;
        height: 50px;   
    }

    .swatch {
        width:18%;
        height: 50px;
        border-style:solid;
        border-width:thin;  
        float: left;
        margin-right: 3px;  
    }
    </style>
    </head>

    <body>

        <input type="file" capture="camera" accept="image/*" id="takePictureField">
        <img id="yourimage">

        <div id="swatches">
            <div id="swatch0" class="swatch"></div>
            <div id="swatch1" class="swatch"></div>
            <div id="swatch2" class="swatch"></div>
            <div id="swatch3" class="swatch"></div>
            <div id="swatch4" class="swatch"></div>
        </div>

    <script>
    var desiredWidth;

    $(document).ready(function() {
        console.log('onReady');
        $("#takePictureField").on("change",gotPic);
        $("#yourimage").load(getSwatches);
        desiredWidth = window.innerWidth;

        if(!("url" in window) && ("webkitURL" in window)) {
            window.URL = window.webkitURL;   
        }

    });

    function getSwatches(){
        var colorArr = createPalette($("#yourimage"), 5);
        for (var i = 0; i < Math.min(5, colorArr.length); i++) {
            $("#swatch"+i).css("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")");
            console.log($("#swatch"+i).css("background-color"));
        }
    }   

    //Credit: https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player
    function gotPic(event) {
        if(event.target.files.length == 1 && 
           event.target.files[0].type.indexOf("image/") == 0) {
            $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
        }
    }



    </script>    
    </body>

</html>

May I ask why do you need to send video to the backend server to decode qrcodes? It can be done directly from the phone using javascript without even sending anything to the server. It might be complicated for some phones but I'm pretty sure the ipad should have enough horse power to convert a qrcode to something else without video streaming back and forth to a server. — Loïc Faure-Lacroix, Jun 16 '13 at 23:51
@LoïcFaure-Lacroix do you know of any sample code for that? — J888, Jun 17 '13 at 02:06
@JackRamzi for code doing exactly that, see my answer below. — mb21, Jun 17 '13 at 06:41

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

Capturing the video and sending it to the server will be prohibitively bandwidth-intensive on a mobile device. I would give jsqrcode a try and do it all client-side in JavaScript. Also, see this answer.

edited May 23 '17 at 10:29

Community

1
1

answered Jun 14 '13 at 18:46

mb21

34,845
8
116
142

1

These techniques (using getUserMedia) are not yet supported in iOS / Safari (OP's questrion) – Philip Feb 28 '16 at 18:34

score 0 · Accepted Answer · answered Jun 07 '13 at 11:27

0

You need to have a look at the Stream API. There are some demos at the bottom of Eric Bidelman's blog post.

answered Jun 07 '13 at 11:27

tbsalling

4,477
4
30
51

1

These techniques (using getUserMedia) are not yet supported in iOS / Safari (OP's questrion) – Philip Feb 28 '16 at 18:34

How to read QR code using iPad camera on website?

2 Answers2