An npm module that use rqrr
compiled to wasm to use easily in your webpack project.
- Install the module with its peer dependencies
yarn add rqrr-wasm memory-fs fs-extra
- Add the webpack plugin to your webpack configuration
import RqrrWasmPlugin from 'rqrr-wasm/dist/webpack-plugins';
// webpack configuration file
webpackConfig = {
plugins: [
// other plugins
new RqrrWasmPlugin(), // put this last
],
}
- Import the module in your code
import wasmModule from 'rqrr-wasm';
- Call
init()
to load the .wasm file, then you candecode
a QR code by passing anUint8Array
of the image data
wasmModule.init().then(() => {
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(blob => {
const reader = new FileReader();
reader.addEventListener('loadend', () => {
const arrayBuffer = reader.result;
const output = wasmModule.decode(new Uint8Array(arrayBuffer));
console.log("DECODED QR: ", output); // the string output here!
});
reader.readAsArrayBuffer(blob);
});
});
An example of how to use this can be seen in this repo https://github.com/jackyef/react-rqrr-wasm