zxing-js / browser

ZXing for JS's browser layer with decoding implementations for browser.
MIT License
216 stars 43 forks source link

None of the library examples are working. #71

Open kaarleenzz opened 3 years ago

kaarleenzz commented 3 years ago

Hi, I'm trying to get a simple example running.

For me, none of the https://zxing-js.github.io/library/ examples are working, looks like the browser.js file is not working.

Fixing it locally gets me to the part of: "ZXing code reader initialized asdf.html:75 Uncaught TypeError: codeReader.listVideoInputDevices is not a function "

Is there a working example/code to start off on?

Currently I'm just trying to hack around multiple non-working examples and trying to figure out on my own...

<script type="text/javascript" src="/node_modules/@zxing/browser/umd/zxing-browser.js"></script>
</head>
<body>
<div style="border:1px solid red; width: 500px; height: 500px;" id="test-area-qr-code-webcam"></div>

<script type="module">

    // const codeReader = new BrowserQRCodeReader();
    // window.addEventListener('load', () => {
        const codeReader = new ZXingBrowser.BrowserMultiFormatReader();
        console.log(codeReader );
    // });

    const videoInputDevices = await ZXingBrowser.BrowserMultiFormatReader.listVideoInputDevices();

    // choose your media device (webcam, frontal camera, back camera, etc.)
    const selectedDeviceId = videoInputDevices[0].deviceId;

    console.log(`Started decode from camera with id ${selectedDeviceId}`);

    const previewElem = document.querySelector('#test-area-qr-code-webcam > video');

    // you can use the controls to stop() the scan or switchTorch() if available
    const controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) => {
      // use the result and error values to choose your actions
      // you can also use controls API in this scope like the controls
      // returned from the method.
    });

    // stops scanning after 20 seconds
    setTimeout(() => controls.stop(), 20000);
</script>

`