Comments (6)
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 solidjs/solid-start#520
from barcode-detector-polyfill.
Hey, @wesbos did you find a fix for this? Also:
- are you working on this within Next.js, Remix or something else
and
- 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/[email protected]"
)?
from barcode-detector-polyfill.
Hi @ScottAgirs , I am also getting the same error in NEXT.js 11.
from barcode-detector-polyfill.
$ node -v
v18.7.0
$ yarn list --pattern next
[email protected]
@undecaf/[email protected]
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/[email protected]/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.
from barcode-detector-polyfill.
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.
from barcode-detector-polyfill.
Closing this as there has not been any activity for some time.
Feel free to re-open if necessary.
from barcode-detector-polyfill.
Related Issues (12)
- Issues loading @undecaf/zbar-wasm HOT 3
- Scanner goes infinitely / doesn't stop after reading a barcode HOT 4
- [email protected] error HOT 9
- [BUG] Source map not found
- Update README bundling for zbar-wasm v0.10.0 HOT 4
- Barcode detector polyfill can not detect code_128 format on Safari. HOT 4
- About avoids the LGPL license issue? HOT 7
- Error when using the polyfill HOT 2
- License confusion HOT 2
- Chrome: Failed to execute 'getImageData' on 'OffscreenCanvasRenderingContext2D' HOT 3
- Use offline HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from barcode-detector-polyfill.