使用网络摄像头扫描二维码，从网络摄像头获取图像

Question

I have this code that scans and decode qr image with the help of this source code https://github.com/khanamiryan/php-qrcode-detector-decoder, it scans the image file from your documents..but I want to scan the qr using my webcam.

the qr code scanner script is this

  <?php
if ($_SERVER['REQUEST_METHOD'] != "POST"){
    header("location:take-attendance.php");
    die();
}

require "vendor/autoload.php";

$qrcode = new Zxing\QrReader($_FILES['qrimage']['tmp_name']);
$text = $qrcode->text();

var_dump($text);

?>

then my webcam that take snapshot goes like this

 <form action="decode.php" method="post" enctype="multipart/form-data">
<script src="webcam.js"></script> <!--source code script from github for webcam config-->

    <div id="my_camera" style="width:320px; height:240px;"></div>
    <div id="my_result"></div>

    <script type=text/javascript>
        Webcam.attach( '#my_camera' );

        function take_snapshot() {
            Webcam.snap( function(data_uri) {
                document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
            } );
        }
    </script>

    <a href="javascript:void(take_snapshot())">Take Snapshot</a>

so I click the take snapshot the image will appear as an img src and I want that image to be fetch if I click scan so that means I need to replace this code

$qrcode = new Zxing\QrReader($_FILES['qrimage']['tmp_name']);

with the file name that is been generated when I click that snapshot which is this

<img src="'+data_uri+'"/>

but the thing is I don't know the format on how to write the code, this is my idea but it doesn't work though

$qrcode = new Zxing\QrReader($_FILES['data_uri']);

thanks in advance

Answer 1

You don't send anything in your form.

Snapshot generated in base64 format, so you can only send it as string to server and decode to image.

But much simpler is use JS QR Decoder like this https://github.com/colcodev/qrcode-decoder-js

qrcode.decode(data_uri)

And then if you need send result to server via simple input

Webcam.attach( '#my_camera' );

function take_snapshot() {
    Webcam.snap(function(data_uri) {
        document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/> - '+qrcode.decode(data_uri);
    });
}