Skip to content

Commit 3c890a3

Browse files
ryanleecoderyanleecode
authored
fix: qr-code (#801)
* fix: qr-code * fix: linter warning
1 parent f08670b commit 3c890a3

File tree

3 files changed

+90
-77
lines changed

3 files changed

+90
-77
lines changed

‎packages/react-qr/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,12 @@
2424
"@polkadot/ui-settings": "3.8.2",
2525
"@polkadot/util": "^13.0.2",
2626
"@polkadot/util-crypto": "^13.0.2",
27+
"@zxing/browser": "^0.1.5",
28+
"@zxing/library": "^0.21.2",
2729
"qrcode-generator": "^1.4.4",
28-
"react-qr-reader": "^2.2.1",
2930
"styled-components": "^6.1.1",
3031
"tslib": "^2.6.2"
3132
},
32-
"devDependencies": {
33-
"@types/react-qr-reader": "^2.1.7"
34-
},
3533
"peerDependencies": {
3634
"@polkadot/util": "*",
3735
"@polkadot/util-crypto": "*",

‎packages/react-qr/src/Scan.tsx‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Copyright 2017-2024 @polkadot/react-qr authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import React, { useCallback, useMemo } from 'react';
5-
import Reader from 'react-qr-reader';
4+
import { BrowserQRCodeReader, type IScannerControls } from '@zxing/browser';
5+
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
66

77
import { styled } from './styled.js';
88
import { createImgSize } from './util.js';
@@ -23,6 +23,9 @@ const DEFAULT_ERROR = (error: Error): void => {
2323
};
2424

2525
function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }: Props): React.ReactElement<Props> {
26+
const videoRef = useRef<HTMLVideoElement>(null);
27+
const controlsRef = useRef<IScannerControls | null>(null);
28+
2629
const containerStyle = useMemo(
2730
() => createImgSize(size),
2831
[size]
@@ -33,21 +36,52 @@ function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR,
3336
[onError]
3437
);
3538

36-
const _onScan = useCallback(
37-
(data: string | null) => data && onScan(data),
38-
[onScan]
39-
);
39+
useEffect(() => {
40+
const codeReader = new BrowserQRCodeReader();
41+
42+
const startScanning = async () => {
43+
try {
44+
const videoInputDevices = await BrowserQRCodeReader.listVideoInputDevices();
45+
const selectedDeviceId = videoInputDevices[0].deviceId;
46+
47+
controlsRef.current = await codeReader.decodeFromVideoDevice(
48+
selectedDeviceId,
49+
videoRef.current ?? undefined,
50+
(result, error) => {
51+
if (result) {
52+
onScan(result.getText());
53+
}
54+
55+
if (error && !(error instanceof Error)) {
56+
_onError(new Error(error));
57+
}
58+
}
59+
);
60+
} catch (error) {
61+
_onError(error instanceof Error ? error : new Error('Unknown error occurred'));
62+
}
63+
};
64+
65+
// eslint-disable-next-line @typescript-eslint/no-misused-promises
66+
const timeoutId = setTimeout(startScanning, delay);
67+
68+
return () => {
69+
clearTimeout(timeoutId);
70+
71+
if (controlsRef.current) {
72+
controlsRef.current.stop();
73+
}
74+
};
75+
}, [onScan, _onError, delay]);
4076

4177
return (
4278
<StyledDiv
4379
className={className}
4480
style={containerStyle}
4581
>
46-
<Reader
82+
<video
4783
className='ui--qr-Scan'
48-
delay={delay}
49-
onError={_onError}
50-
onScan={_onScan}
84+
ref={videoRef}
5185
style={style}
5286
/>
5387
</StyledDiv>
@@ -60,10 +94,6 @@ const StyledDiv = styled.div`
6094
height: 100%;
6195
transform: matrix(-1, 0, 0, 1, 0, 0);
6296
width: 100%;
63-
64-
video {
65-
margin: 0;
66-
}
6797
}
6898
`;
6999

‎yarn.lock‎

Lines changed: 44 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1655,9 +1655,9 @@ __metadata:
16551655
"@polkadot/ui-settings": "npm:3.8.2"
16561656
"@polkadot/util": "npm:^13.0.2"
16571657
"@polkadot/util-crypto": "npm:^13.0.2"
1658-
"@types/react-qr-reader": "npm:^2.1.7"
1658+
"@zxing/browser": "npm:^0.1.5"
1659+
"@zxing/library": "npm:^0.21.2"
16591660
qrcode-generator: "npm:^1.4.4"
1660-
react-qr-reader: "npm:^2.2.1"
16611661
styled-components: "npm:^6.1.1"
16621662
tslib: "npm:^2.6.2"
16631663
peerDependencies:
@@ -2844,15 +2844,6 @@ __metadata:
28442844
languageName: node
28452845
linkType: hard
28462846

2847-
"@types/react-qr-reader@npm:^2.1.7":
2848-
version: 2.1.7
2849-
resolution: "@types/react-qr-reader@npm:2.1.7"
2850-
dependencies:
2851-
"@types/react": "npm:*"
2852-
checksum: 10/fd008caeb7b4349e396985598c556460d8c9a00b4ba4ab382b9c43ade6a28db837aef87b5dfc0bb2ce453e587edfd7011f404dbcdd7280afce73d9968b2224f9
2853-
languageName: node
2854-
linkType: hard
2855-
28562847
"@types/react@npm:*":
28572848
version: 17.0.0
28582849
resolution: "@types/react@npm:17.0.0"
@@ -3425,6 +3416,40 @@ __metadata:
34253416
languageName: node
34263417
linkType: hard
34273418

3419+
"@zxing/browser@npm:^0.1.5":
3420+
version: 0.1.5
3421+
resolution: "@zxing/browser@npm:0.1.5"
3422+
dependencies:
3423+
"@zxing/text-encoding": "npm:^0.9.0"
3424+
peerDependencies:
3425+
"@zxing/library": ^0.21.0
3426+
dependenciesMeta:
3427+
"@zxing/text-encoding":
3428+
optional: true
3429+
checksum: 10/13df1471dc93b1a54c11df00caebe529fb5e4435d5876e606da048697a039098f5650724710e92cef2db746dbf89b72d04791fd89c6b9a6cf1c1b841dc24cb32
3430+
languageName: node
3431+
linkType: hard
3432+
3433+
"@zxing/library@npm:^0.21.2":
3434+
version: 0.21.2
3435+
resolution: "@zxing/library@npm:0.21.2"
3436+
dependencies:
3437+
"@zxing/text-encoding": "npm:~0.9.0"
3438+
ts-custom-error: "npm:^3.2.1"
3439+
dependenciesMeta:
3440+
"@zxing/text-encoding":
3441+
optional: true
3442+
checksum: 10/29809998902511a34507c7e93b61b1de7be697ae9dbc9854a3371f3eebf95a479d15a050735b7e51045d11383834bbe21d78fec20d6923d85b737414d6f9d247
3443+
languageName: node
3444+
linkType: hard
3445+
3446+
"@zxing/text-encoding@npm:^0.9.0, @zxing/text-encoding@npm:~0.9.0":
3447+
version: 0.9.0
3448+
resolution: "@zxing/text-encoding@npm:0.9.0"
3449+
checksum: 10/268e4ef64b8eaa32b990240bdfd1f7b3e2b501a6ed866a565f7c9747f04ac884fbe0537fe12bb05d9241b98fb111270c0fd0023ef0a02d23a6619b4589e98f6b
3450+
languageName: node
3451+
linkType: hard
3452+
34283453
"abbrev@npm:1":
34293454
version: 1.1.1
34303455
resolution: "abbrev@npm:1.1.1"
@@ -8484,13 +8509,6 @@ __metadata:
84848509
languageName: node
84858510
linkType: hard
84868511

8487-
"jsqr@npm:^1.2.0":
8488-
version: 1.3.1
8489-
resolution: "jsqr@npm:1.3.1"
8490-
checksum: 10/aa87566a2d2928a447b529596292ee7e392eef70cf83258bb3029bb429db08953e54c2802e8f9c54daedf2bdba72f089a351b342f5796463c44be624aa8cd617
8491-
languageName: node
8492-
linkType: hard
8493-
84948512
"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
84958513
version: 3.2.0
84968514
resolution: "jsx-ast-utils@npm:3.2.0"
@@ -10266,7 +10284,7 @@ __metadata:
1026610284
languageName: node
1026710285
linkType: hard
1026810286

10269-
"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
10287+
"prop-types@npm:^15.8.1":
1027010288
version: 15.8.1
1027110289
resolution: "prop-types@npm:15.8.1"
1027210290
dependencies:
@@ -10536,20 +10554,6 @@ __metadata:
1053610554
languageName: node
1053710555
linkType: hard
1053810556

10539-
"react-qr-reader@npm:^2.2.1":
10540-
version: 2.2.1
10541-
resolution: "react-qr-reader@npm:2.2.1"
10542-
dependencies:
10543-
jsqr: "npm:^1.2.0"
10544-
prop-types: "npm:^15.7.2"
10545-
webrtc-adapter: "npm:^7.2.1"
10546-
peerDependencies:
10547-
react: ~16
10548-
react-dom: ~16
10549-
checksum: 10/c0825017c0c836936fed376c107c6d64e3a0795fd8e54bba5f14fa46f17d0b00c6f9cfd9a3c4216cd52509d2042860f3e4fea25687167e9585dbf87642c2cc2d
10550-
languageName: node
10551-
linkType: hard
10552-
1055310557
"react-refresh@npm:^0.14.0":
1055410558
version: 0.14.0
1055510559
resolution: "react-refresh@npm:0.14.0"
@@ -11079,15 +11083,6 @@ __metadata:
1107911083
languageName: node
1108011084
linkType: hard
1108111085

11082-
"rtcpeerconnection-shim@npm:^1.2.15":
11083-
version: 1.2.15
11084-
resolution: "rtcpeerconnection-shim@npm:1.2.15"
11085-
dependencies:
11086-
sdp: "npm:^2.6.0"
11087-
checksum: 10/cfd57301dc67dfe22a191c3809bfa0d6e5cf7fdab4632a9787743f2ab83c3a8f6870cfc7785fe132aca5df912a6193edb807217dc978fab2cf4919ba408e725b
11088-
languageName: node
11089-
linkType: hard
11090-
1109111086
"run-async@npm:^2.4.0":
1109211087
version: 2.4.1
1109311088
resolution: "run-async@npm:2.4.1"
@@ -11225,13 +11220,6 @@ __metadata:
1122511220
languageName: node
1122611221
linkType: hard
1122711222

11228-
"sdp@npm:^2.12.0, sdp@npm:^2.6.0":
11229-
version: 2.12.0
11230-
resolution: "sdp@npm:2.12.0"
11231-
checksum: 10/2433d52c018e762147800103fec4d45389953810a6fee616be9baf4d6cccad108aef69f6e8cefd4de97419059f6c0353b92e37ec677726d72928b7aba5b77476
11232-
languageName: node
11233-
linkType: hard
11234-
1123511223
"select-hose@npm:^2.0.0":
1123611224
version: 2.0.0
1123711225
resolution: "select-hose@npm:2.0.0"
@@ -12213,6 +12201,13 @@ __metadata:
1221312201
languageName: node
1221412202
linkType: hard
1221512203

12204+
"ts-custom-error@npm:^3.2.1":
12205+
version: 3.3.1
12206+
resolution: "ts-custom-error@npm:3.3.1"
12207+
checksum: 10/92e3a2c426bf6049579aeb889b6f9787e0cfb6bb715a1457e2571708be7fe739662ca9eb2a8c61b72a2d32189645f4fbcf1a370087e030d922e9e2a7b7c1c994
12208+
languageName: node
12209+
linkType: hard
12210+
1221612211
"ts-graphviz@npm:^1.5.0":
1221712212
version: 1.5.2
1221812213
resolution: "ts-graphviz@npm:1.5.2"
@@ -12887,16 +12882,6 @@ __metadata:
1288712882
languageName: node
1288812883
linkType: hard
1288912884

12890-
"webrtc-adapter@npm:^7.2.1":
12891-
version: 7.7.0
12892-
resolution: "webrtc-adapter@npm:7.7.0"
12893-
dependencies:
12894-
rtcpeerconnection-shim: "npm:^1.2.15"
12895-
sdp: "npm:^2.12.0"
12896-
checksum: 10/f20f69a10a6f8e4b9be7aaa9af8b3dfac1dbb89fbed1ccedbf2437975071d9d33f8f10ca61fbeb705e3b43ed950e455e0b972340214308b921fb965e5dbc5674
12897-
languageName: node
12898-
linkType: hard
12899-
1290012885
"websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
1290112886
version: 0.7.4
1290212887
resolution: "websocket-driver@npm:0.7.4"

0 commit comments

Comments
 (0)