title: Open Rear camera in QR Code Reader for Mobile Website
body: <p>Hi got following code from <a href="https://www.sitepoint.com/create-qr-code-reader-mobile-website/" rel="nofollow noreferrer">sitepoint</a>:</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              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 &gt; input[type=file] {position:absolute; overflow:hidden; width:1px; height:1px; opacity:0}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type=text size=16 placeholder="Tracking Code" class=qrcode-text&gt;
          &lt;label class=qrcode-text-btn&gt;&lt;input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1&gt;&lt;/label&gt; 
          &lt;input type=button value="Go" disabled&gt;
          &lt;script src="qr_packed.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              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]);
              }
  
              function showQRIntro() {
                return confirm("Use your camera to take a picture of a QR code.");
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In this code on click of QR icon Mobile camera is opened. But I want to open camera on page lode in specified area of web page. My screen design is below:
  <a href="https://i.stack.imgur.com/EpFX3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EpFX3.png" alt="enter image description here"></a></p>
  
  <p>My requirement is below:</p>
  
  <ul>
  <li>By default mobile camera or webcam in PC/laptop should open and start scanning. After scanning the code should display in input box.</li>
  <li>On click of QR icon file upload opens, after QR image upload, the code appears in input box</li>
  <li>OR user can type/copy paste QR code received in the input box.</li>
  </ul>
  
  <p>I've create one code after modifying <a href="https://webqr.com/" rel="nofollow noreferrer">webqr.com</a> which is working fine on desktop/ laptop and android device but camera is not opening in ios device and macbook.</p>
  
  <p>Hence I searched and found above code which is able to open camera in iphone and ipad. But have no idea how to achieve my above mentioned requirement.</p>