Error when Loading

[wesbos]

This lib seems to work great, but I get:

Uncaught (in promise) TypeError: URL constructor: zbar.wasm is not a valid URL.

when loading it.

The same error happens when using your port of zbar.wasm directly

[ScottAgirs]

Hey, @wesbos did you find a fix for this? Also: 1) are you working on this within Next.js, Remix or something else

and

2) are did you install (import { BarcodeDetectorPolyfill } from "@undecaf/barcode-detector-polyfill") or imported the package from URL (import { BarcodeDetectorPolyfill } from "https://cdn.skypack.dev/@undecaf/barcode-detector-polyfill@0.9.9")?

[bipinrajbhar]

Hi @ScottAgirs , I am also getting the same error in NEXT.js 11.

[github0013]

$ node -v
v18.7.0

$ yarn list --pattern next
next@12.1.5

@undecaf/barcode-detector-polyfill@0.9.11

I struggled the same in this morning under this environment. I managed to get this package working in Next.js somehow. I am sure there are many other good ways to do this, but here's how.

import Script from "next/script"
import React from "react"
interface Props {}

const YourNextJsPage: React.FC<Props> = (props) => {
  return (
    <>
      <video
        id="video"
        muted
        autoPlay
        playsInline
        style={{ width: "100%", height: 300 }}
      />
      <button
        id="result"
        onClick={(event) => {
          const button = event.target as HTMLButtonElement
          console.log(button.innerText)
        }}
      >
        put a barcode against the camera
      </button>
      <pre id="results" />
      <Script type="module" src="/js/barcode-scanner.js" />
    </>
  )
}
export default YourNextJsPage

/js/barcode-scanner.js

import { BarcodeDetectorPolyfill } from "https://cdn.jsdelivr.net/npm/@undecaf/barcode-detector-polyfill@0.9.11/dist/main.js"

const REFRESH_RATE = 1000
const videoElement = document.querySelector("#video")
const resultsElement = document.querySelector("#results")
const resultElement = document.querySelector("#result")

navigator.mediaDevices
  .getUserMedia({
    audio: false,
    video: {
      facingMode: "environment",
    },
  })
  .then((stream) => {
    videoElement.srcObject = stream

    const detector = new BarcodeDetectorPolyfill({
      formats: ["code_39", "code_128", "ean_13"],
    })

    setInterval(async () => {
      const results = await detector.detect(videoElement)
      const bestQualityFirst = results.sort(({ quality: a }, { quality: b }) =>
        a < b ? 1 : -1
      )
      const result = bestQualityFirst.find((result) => Boolean(result?.rawValue))

      resultsElement.innerHTML = JSON.stringify(result, null, 2)
      if (result) {
        resultElement.innerHTML = result.rawValue
      }
    }, REFRESH_RATE)
  })

Things to note

<Script type="module" src="/js/barcode-scanner.js" /> the type has to be there.

try {
    window['BarcodeDetector'].getSupportedFormats()
} catch {
    window['BarcodeDetector'] = BarcodeDetectorPolyfill
}
const detector = new BarcodeDetector({ formats: ['code_39', 'code_128', 'ean_13'] })

I initially tried this but I got InvalidStateError: Failed to execute 'detect' on 'BarcodeDetector': Invalid element or state. error.

[undecaf]

Please take a look at this issue of @undecaf/zbar-wasm.

Since barcode-detector-polyfill relies on zbar-wasm, those hints might be useful also for barcode-detector-polyfill in Next.js.

[stereobooster]

If this fails to load in node (for SSR case) you can try

export NODE_OPTIONS="--experimental-network-imports"

see here https://nodejs.org/api/esm.html#https-and-http-imports

or

export NODE_OPTIONS="--experimental-loader ./https-loader.mjs"

see here https://nodejs.org/api/esm.html#esm_https_loader

But make sure, that tool passes down NODE_OPTIONS, if it uses spawn, which is not the case, for example, with solid-start https://github.com/solidjs/solid-start/pull/520

[undecaf]

Closing this as there has not been any activity for some time.

Feel free to re-open if necessary.