Javascript代码在Codesandbox上运行正常,但在本地或Web服务器上运行不正常。

huangapple go评论66阅读模式
英文:

Javascript code runs fine on Codesandbox but not on localy or on a webserver

问题

我尝试使用在这个教程中找到的JavaScript代码来读取QR码。

这个教程提供的代码在教程中链接的codesandbox中有效,但是当我在我的笔记本电脑或远程Web服务器上尝试完全相同的代码时,它不起作用。我确实完全复制并粘贴了代码,文件配置和文件名都相同,但是我的浏览器上出现了以下JS错误:

SyntaxError: 标识符 'qrcode' 已经声明(在 qrCodeScanner.js:1:1 处)

由于我运行的是完全相同的代码,我不明白发生了什么。是否需要在服务器端执行某些操作以使代码正常工作,而教程中未提到?

如果您想查看使用的代码并查看它的运行情况,可以在这里测试codesandbox实例链接

编辑

以下是我使用的代码:

(HTML)

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Scanner</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="./src/style.css" />
    <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
  </head>

  <body>

    <div id="container">
      <h1>QR Code Scanner</h1>

      <a id="btn-scan-qr">
        <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg">
      <a/>

      <canvas hidden="" id="qr-canvas"></canvas>

      <div id="qr-result" hidden="">
        <b>Data:</b> <span id="outputData"></span>
      </div>
    </div>
    <script src="./src/qrCodeScanner.js"></script>

  </body>
</html>

(Javascript)

const qrcode = window.qrcode;

const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");

const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");

let scanning = false;

qrcode.callback = res => {
  if (res) {
    outputData.innerText = res;
    scanning = false;

    video.srcObject.getTracks().forEach(track => {
      track.stop();
    });

    qrResult.hidden = false;
    canvasElement.hidden = true;
    btnScanQR.hidden = false;
  }
};

btnScanQR.onclick = () => {
  navigator.mediaDevices
    .getUserMedia({ video: { facingMode: "environment" } })
    .then(function(stream) {
      scanning = true;
      qrResult hidden = true;
      btnScanQR.hidden = true;
      canvasElement.hidden = false;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.srcObject = stream;
      video.play();
      tick();
      scan();
    });
};

function tick() {
  canvasElement.height = video.videoHeight;
  canvasElement width = video.videoWidth;
  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);

  scanning && requestAnimationFrame(tick);
}

function scan() {
  try {
    qrcode.decode();
  } catch (e) {
    setTimeout(scan, 300);
  }
}

希望这能帮助您解决问题。如果您有任何其他问题或需要进一步的帮助,请随时告诉我。

英文:

I tried to read read QR code thanks to javascript code found in this tutorial

The code provided by this tutorial works inside the codesandbox linked in the tutorial, however it doesn't work when I tired the same exact code on my laptop or on my remote webserver. I've litteraly copy and paste the code with the same file configuration, filenames ect... but I'm getting the following JS error on my browser :

> SyntaxError: Identifier 'qrcode' has already been declared (at qrCodeScanner.js:1:1)

Since I run the exact same code I d'ont understand what is going on there. Is there something needed on the server side in order to make the code works that is not mentioned in the tutorial ?

If you want to see the code used and see it in action, you can teste the codesandbox instance there.

EDIT

Here's the code I use :
(HMTL)

   &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;QR Code Scanner&lt;/title&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0, maximum-scale=1.0; user-scalable=0;&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;./src/style.css&quot; /&gt;
&lt;script src=&quot;https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;container&quot;&gt;
&lt;h1&gt;QR Code Scanner&lt;/h1&gt;
&lt;a id=&quot;btn-scan-qr&quot;&gt;
&lt;img src=&quot;https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg&quot;&gt;
&lt;a/&gt;
&lt;canvas hidden=&quot;&quot; id=&quot;qr-canvas&quot;&gt;&lt;/canvas&gt;
&lt;div id=&quot;qr-result&quot; hidden=&quot;&quot;&gt;
&lt;b&gt;Data:&lt;/b&gt; &lt;span id=&quot;outputData&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;./src/qrCodeScanner.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

(Javascript)

const qrcode = window.qrcode;
const video = document.createElement(&quot;video&quot;);
const canvasElement = document.getElementById(&quot;qr-canvas&quot;);
const canvas = canvasElement.getContext(&quot;2d&quot;);
const qrResult = document.getElementById(&quot;qr-result&quot;);
const outputData = document.getElementById(&quot;outputData&quot;);
const btnScanQR = document.getElementById(&quot;btn-scan-qr&quot;);
let scanning = false;
qrcode.callback = res =&gt; {
if (res) {
outputData.innerText = res;
scanning = false;
video.srcObject.getTracks().forEach(track =&gt; {
track.stop();
});
qrResult.hidden = false;
canvasElement.hidden = true;
btnScanQR.hidden = false;
}
};
btnScanQR.onclick = () =&gt; {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: &quot;environment&quot; } })
.then(function(stream) {
scanning = true;
qrResult.hidden = true;
btnScanQR.hidden = true;
canvasElement.hidden = false;
video.setAttribute(&quot;playsinline&quot;, true); // required to tell iOS safari we don&#39;t want fullscreen
video.srcObject = stream;
video.play();
tick();
scan();
});
};
function tick() {
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
scanning &amp;&amp; requestAnimationFrame(tick);
}
function scan() {
try {
qrcode.decode();
} catch (e) {
setTimeout(scan, 300);
}
}

答案1

得分: 1

问题

问题是您可能正在使用实时服务器或仅打开HTML文件,但在沙箱中使用了parcel-bundler。库中的var qrcode与您的const qrcode冲突。

解决方法

类型模块

&lt;script src=&quot;./src/qrCodeScanner.js&quot;&gt;&lt;/script&gt;

替换为

&lt;script type=&quot;module&quot; src=&quot;./src/qrCodeScanner.js&quot;&gt;&lt;/script&gt;

重命名

将您的变量更改为其他名称,如const myQrcode

使用打包工具

您可以使用沙箱中的parcel-bundler或任何其他可以为您解决变量冲突的打包工具。

英文:

Problem

The problem is that you are probably using a live server or just opening the html file, but in the sandbox parcel-bundler is used. var qrcode from the library collides with your const qrcode.

Solutions

Type module

Replace

&lt;script src=&quot;./src/qrCodeScanner.js&quot;&gt;&lt;/script&gt;

with

&lt;script type=&quot;module&quot; src=&quot;./src/qrCodeScanner.js&quot;&gt;&lt;/script&gt;

Rename

Change your variable to something else like const myQrcode

Use a bundler

You can use parcel-bundler as in the sandbox or any other that will resolve variable collision for you

huangapple
  • 本文由 发表于 2023年2月19日 21:41:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/75500529.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定