Compatibility - globalThis preventing use in older browsers

[kejmUP]

Describe the bug

There is a globalThis call in html5-qrcode.min.js. Using globalThis dramatically raises the minimum required browser versions. Doing globalThis || global || self || window is not a workaround, because accessing the globalThis raises an exception. The proper workaround should be:

var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};

var globals = getGlobal();

or even only editing the code to self || window || global.

More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

Describe the browser (tested on):

• OS: Windows
• Browser: chrome
• Version: 49

[ROBERT-MCDOWELL]

Could you fork the project and make a pull request?

[ROBERT-MCDOWELL]

it seems that this issue concerns the included third party zxing-js
https://github.com/zxing-js/library

[ROBERT-MCDOWELL]

apparently there is a pollyfill
Install globalthis:
npm install globalthis
Add:
import 'globalthis/auto';
in polyfills.ts

but for sure it's easier to fix the code directly and just avoid old browsers interpreting it since it needs mediaDevices object anyhow which is not working on chrome 49 and firefox under 68

[ROBERT-MCDOWELL]

ok the best way to avoid globalThis undefined on browser older than chrome 72 and firefox 60 is to change
the order
global || self || globalThis || window || undefined
various other github project using zxing.
I don't know why xzing libs didn't change it.

[ROBERT-MCDOWELL]

The best solution I found is to put on top of the code
const globalThis = this["globalThis"] || this['global'] || this['self'] || this['window'] || null;
browser not recognizing globalThis now works.

[mebjas]

it's coming from https://github.com/mebjas/html5-qrcode/blob/master/third_party/zxing-js.umd.js (fork of Zxing library in this project).

I'll try to fix it as you mentioned.

[bo-rik]

@mebjas Any update on this? It should be fixed in the zxing-js library: https://github.com/zxing-js/browser/releases/tag/v0.0.6 (issue zxing-js/browser#18!

[bilal-elchami]

Hello @ROBERT-MCDOWELL. Any planned release to fix this issue?
This should be fixed in the zxing-js library as mentioned by @bo-rik
https://github.com/zxing-js/browser/releases/tag/v0.0.6

[ROBERT-MCDOWELL]

today it's better to avoid to use zxing-js and use the native browser library. Sinc I switched to it I have no problem anymore. now if you use special barcode supported only by zxing-js so maybe it's worth to update the zxing-js library here too. @mebjas can do it as he's the author.

[JL102]

Please see my comment in #700 - The changes in this PR break html5-qrcode in modern browsers. (Leaving a note in here since the PR has been closed, meaning my comment may not be seen, while this issue is still open.)

[ROBERT-MCDOWELL]

@JL102 could you try to recreate a PR?

[JL102]

@ROBERT-MCDOWELL Sorry, didn't see this ping till now. I'm not using html5-qrcode so I'll leave it up to mebjas or someone else to implement my suggestion at #700 (comment)

[khata-anshul]

Can anyone with this library setup do these changes please - #700 (comment)

v2.3.8 is still throwing globalThis is not defined error