0

嗨，从sitepoint得到以下代码：

    <!DOCTYPE HTML>
<html>
    <head>
        <style>
            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}
        </style>
    </head>
    <body>
        <input type=text size=16 placeholder="Tracking Code" class=qrcode-text>
        <label class=qrcode-text-btn><input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1></label> 
        <input type=button value="Go" disabled>
        <script src="qr_packed.js"></script>
        <script>
            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.");
            }
        </script>
    </body>
</html>

在此代码中，单击 QR 图标会打开移动相机。但我想在网页指定区域的页面上打开相机。我的屏幕设计如下： 在此处输入图像描述

我的要求如下：

  • 默认情况下，PC/笔记本电脑中的移动摄像头或网络摄像头应打开并开始扫描。扫描代码后应显示在输入框中。
  • 点击二维码图标文件上传打开，二维码上传后，代码出现在输入框中
  • 或者用户可以在输入框中输入/复制粘贴收到的二维码。

我在修改webqr.com后创建了一个代码，该代码在台式机/笔记本电脑和 android 设备上运行良好，但相机未在 ios 设备和 macbook 中打开。

因此，我搜索并找到了上面能够在 iphone 和 ipad 中打开相机的代码。但不知道如何实现我上面提到的要求。

4

0 回答 0