decodeOnceFromVideoDevice vs decodeFromVideoDevice

[dvodvo]

According to the readMe, the decode action is launched via codeReader.decodeOnceFromVideoDevice.

However the library example uses codeReader.decodeFromVideoDevice(.

Having attempted to implement the library example (with both library and browser libraries), the above library example does run and scan. However if the decodeOnceFromVideoDevice action is invoked, nothing occurs in the browser. The browser console reports a NotFoundException: undefined and follows are the reference lines and the snippet from the source.

the package versions are
"@zxing/browser": "^0.0.7", "@zxing/library": "^0.18.3",

What is a proper way to get the decode once to function per design?

follows the inline javascript of the page

    CustomError http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:39224
              var _this = _super.call(this, message) || this;
    _createSuperInternal http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:39153
             function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
    Exception http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:39258
                _this2 = _super2.call(this, message);
    _createSuperInternal http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:39153
    NotFoundException http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:42145
                 return _super10.apply(this, arguments);
    decodeRow2pairs http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:53396
       while (!done) {
          try {
            this.pairs.push(this.retrieveNextPair(row, this.pairs, rowNumber));
          } catch (error) {
            if (error instanceof NotFoundException) {
              if (!this.pairs.length) {
                throw new NotFoundException();

    decodeRow http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:53368
    decodeRow http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:54825
    doDecode http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:48603
    decode http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:48487
    decodeInternal http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:67215
    decodeWithState http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:67102
    decodeBitmap http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:67260
    decode http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:44414
    loop http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:44348
    decodeOnce http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:44366
    decodeOnce http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:44365
    _callee7$ http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:43661
    tryCatch http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:95497
    invoke http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:95727
    defineIteratorMethods http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:95552
    fulfilled http://localhost:3000/packs/js/application-3199dfaeb0497a193f69.js:43215
    application-3199dfaeb0497a193f69.js:53371:19

inline javascript, adapted section are hanging hard left

<script type="text/javascript">
  window.addEventListener('load', function () {
    let selectedDeviceId;
    const codeReader = new ZXing.BrowserMultiFormatReader()
    console.log('ZXing code reader initialized')
    codeReader.listVideoInputDevices()
      .then((videoInputDevices) => {
        const sourceSelect = document.getElementById('sourceSelect')
        selectedDeviceId = videoInputDevices[0].deviceId
        if (videoInputDevices.length >= 1) {
          videoInputDevices.forEach((element) => {
            const sourceOption = document.createElement('option')
            sourceOption.text = element.label
            sourceOption.value = element.deviceId
            sourceSelect.appendChild(sourceOption)
          })

          sourceSelect.onchange = () => {
            selectedDeviceId = sourceSelect.value;
          };

          const sourceSelectPanel = document.getElementById('sourceSelectPanel')
          sourceSelectPanel.style.display = 'block'
        }

        document.getElementById('startButton').addEventListener('click', () => {
          codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
            if (result) {
              console.log(result)
              document.getElementById('result').textContent = result.text
let formData = new FormData();
let CodeParams = {
code_data: result.text,
shopkeeper_id:  <%= current_user.id %>
};
formData.append("code_json_data", JSON.stringify(CodeParams));
$.ajax({
url: 'new_user',
type: "post",
data: formData,
   processData: false,
  contentType: false,
 });
            }
            if (err && !(err instanceof ZXing.NotFoundException)) {
              console.error(err)
              document.getElementById('result').textContent = err
            }
          })
          console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
        })

        document.getElementById('resetButton').addEventListener('click', () => {
          codeReader.reset()
          document.getElementById('result').textContent = '';
          console.log('Reset.')
        })

      })
      .catch((err) => {
        console.error(err)
      })
  })
</script>

[odahcam]

codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'video', (result, err) => {

Is there any element in your page with the video id?

[dvodvo]

Yes, <video id="video" width="320" height="180" style="border: 1px solid gray"></video>

I have resolved via resetting the codeReader as per below. Still would be nice ot get a handle on decodeOnceFromVideoDevice verb.

As per the above example, after the ajax call which terminates the process of requireg a scan:

$.ajax({
url: 'new_user',
type: "post",
data: formData,
   processData: false,
  contentType: false,
 });


    codeReader.reset();

[odahcam]

Sorry I did not understand quite well your issue, but I'm glad you solved it.