JSFiddle - React, Tailwind, and code Playground

by Raj Shekhar

HTML

<input type=text size=16 placeholder="Tracking Code" class=qrcode-text>
<label class=qrcode-text-btn>
<input type=file accept="image/*" capture=environment onchange="openQRCamera(this);" tabindex=-1></label> 
<input type=button value="Go" disabled>

SCSS

body, input {font-size:14pt}
input, label {vertical-align:middle}
.qrcode-text {padding-right:1.7em; margin-right:0}
.qrcode-text-btn {display:inline-block; background:url(//dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg) 50% 50% no-repeat; height:1em; width:1.7em; margin-left:-1.7em; cursor:pointer}
.qrcode-text-btn > input[type=file] {position:absolute; overflow:hidden; width:1px; height:1px; opacity:0}

JavaScript

function openQRCamera(node) {
  var reader = new FileReader();
  reader.onload = function() {
    node.value = "";
    qrcode.callback = function(res) {
      if(res instanceof Error) {
        alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
      } else {
        node.parentNode.previousElementSibling.value = res;
      }
    };
    qrcode.decode(reader.result);
  };
  reader.readAsDataURL(node.files[0]);
}
openQRCamera()







/* Packed with Google Closure
*
* Ported to JavaScript by Lazar Laszlo 2011 
* [email protected], www.lazarsoft.info
*
* Copyright 2007 ZXing authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var qrcode = function() {
    "use strict";
    function a(h, b) {
        this.count = h;
        this.dataCodewords = b;
        this.__defineGetter__("Count", function() {
            return this.count
        });
        this.__defineGetter__("DataCodewords", function() {
            return this.dataCodewords
        })
    }
    function f(h, b, e) {
        this.ecCodewordsPerBlock = h;
        this.ecBlocks = e ? [b, e] : Array(b);
        this.__defineGetter__("ECCodewordsPerBlock", function() {
            return this.ecCodewordsPerBlock
        });
        this.__defineGetter__("TotalECCodewords", function() {
            return this.ecCodewordsPerBlock * this.NumBlocks
        });
        this.__defineGetter__("NumBlocks", function() {
            for (var d = 0, c = 0; c <...