2
2
* @module
3
3
* Complete Scanner build on top of {@link Html5Qrcode}.
4
4
* - Decode QR Code using web cam or smartphone camera
5
- *
5
+ *
6
6
* @author mebjas <[email protected] >
7
- *
7
+ *
8
8
* The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
9
9
* http://www.denso-wave.com/qrcode/faqpatent-e.html
10
10
*/
@@ -33,9 +33,7 @@ import {
33
33
Html5QrcodeFullConfig ,
34
34
} from "./html5-qrcode" ;
35
35
36
- import {
37
- Html5QrcodeScannerStrings ,
38
- } from "./strings" ;
36
+ import { t } from "./strings" ;
39
37
40
38
import {
41
39
ASSET_FILE_SCAN ,
@@ -94,14 +92,14 @@ export interface Html5QrcodeScannerConfig
94
92
* were previously granted and what camera was last used. If the permissions
95
93
* is already granted for "camera", QR code scanning will automatically
96
94
* start for previously used camera.
97
- *
95
+ *
98
96
* Note: default value is `true`.
99
97
*/
100
98
rememberLastUsedCamera ?: boolean | undefined ;
101
99
102
100
/**
103
101
* Sets the desired scan types to be supported in the scanner.
104
- *
102
+ *
105
103
* - Not setting a value will follow the default order supported by
106
104
* library.
107
105
* - First value would be used as the default value. Example:
@@ -119,26 +117,26 @@ export interface Html5QrcodeScannerConfig
119
117
/**
120
118
* If `true` the rendered UI will have button to turn flash on or off
121
119
* based on device + browser support.
122
- *
120
+ *
123
121
* Note: default value is `false`.
124
122
*/
125
123
showTorchButtonIfSupported ?: boolean | undefined ;
126
124
127
125
/**
128
126
* If `true` the rendered UI will have slider to zoom camera based on
129
127
* device + browser support.
130
- *
128
+ *
131
129
* Note: default value is `false`.
132
- *
130
+ *
133
131
* TODO(minhazav): Document this API, currently hidden.
134
132
*/
135
133
showZoomSliderIfSupported ?: boolean | undefined ;
136
134
137
135
/**
138
136
* Default zoom value if supported.
139
- *
137
+ *
140
138
* Note: default value is 1x.
141
- *
139
+ *
142
140
* TODO(minhazav): Document this API, currently hidden.
143
141
*/
144
142
defaultZoomValueIfSupported ?: number | undefined ;
@@ -168,10 +166,10 @@ function toHtml5QrcodeFullConfig(
168
166
169
167
/**
170
168
* End to end web based QR and Barcode Scanner.
171
- *
169
+ *
172
170
* Use this class for setting up QR scanner in your web application with
173
171
* few lines of codes.
174
- *
172
+ *
175
173
* - Supports camera as well as file based scanning.
176
174
* - Depending on device supports camera selection, zoom and torch features.
177
175
* - Supports different kind of 2D and 1D codes {@link Html5QrcodeSupportedFormats}.
@@ -203,7 +201,7 @@ export class Html5QrcodeScanner {
203
201
*
204
202
* @param elementId Id of the HTML element.
205
203
* @param config Extra configurations to tune the code scanner.
206
- * @param verbose - If true, all logs would be printed to console.
204
+ * @param verbose - If true, all logs would be printed to console.
207
205
*/
208
206
public constructor (
209
207
elementId : string ,
@@ -232,7 +230,7 @@ export class Html5QrcodeScanner {
232
230
233
231
/**
234
232
* Renders the User Interface.
235
- *
233
+ *
236
234
* @param qrCodeSuccessCallback Callback called when an instance of a QR
237
235
* code or any other supported bar code is found.
238
236
* @param qrCodeErrorCallback optional, callback called in cases where no
@@ -255,7 +253,7 @@ export class Html5QrcodeScanner {
255
253
256
254
this . lastMatchFound = decodedText ;
257
255
this . setHeaderMessage (
258
- Html5QrcodeScannerStrings . lastMatch ( decodedText ) ,
256
+ t ( 'scanner .lastMatch' , { decodedText } ) ,
259
257
Html5QrcodeScannerStatus . STATUS_SUCCESS ) ;
260
258
}
261
259
} ;
@@ -282,13 +280,13 @@ export class Html5QrcodeScanner {
282
280
//#region State related public APIs
283
281
/**
284
282
* Pauses the ongoing scan.
285
- *
283
+ *
286
284
* Notes:
287
285
* - Should only be called if camera scan is ongoing.
288
- *
286
+ *
289
287
* @param shouldPauseVideo (Optional, default = false) If `true`
290
288
* the video will be paused.
291
- *
289
+ *
292
290
* @throws error if method is called when scanner is not in scanning state.
293
291
*/
294
292
public pause ( shouldPauseVideo ?: boolean ) {
@@ -298,19 +296,19 @@ export class Html5QrcodeScanner {
298
296
299
297
this . getHtml5QrcodeOrFail ( ) . pause ( shouldPauseVideo ) ;
300
298
}
301
-
299
+
302
300
/**
303
301
* Resumes the paused scan.
304
- *
302
+ *
305
303
* If the video was previously paused by setting `shouldPauseVideo`
306
304
* to `true` in {@link Html5QrcodeScanner#pause(shouldPauseVideo)},
307
305
* calling this method will resume the video.
308
- *
306
+ *
309
307
* Notes:
310
308
* - Should only be called if camera scan is ongoing.
311
309
* - With this caller will start getting results in success and error
312
310
* callbacks.
313
- *
311
+ *
314
312
* @throws error if method is called when scanner is not in paused state.
315
313
*/
316
314
public resume ( ) {
@@ -328,7 +326,7 @@ export class Html5QrcodeScanner {
328
326
329
327
/**
330
328
* Removes the QR Code scanner UI.
331
- *
329
+ *
332
330
* @returns Promise which succeeds if the cleanup is complete successfully,
333
331
* fails otherwise.
334
332
*/
@@ -380,11 +378,11 @@ export class Html5QrcodeScanner {
380
378
//#region Beta APIs to modify running stream state.
381
379
/**
382
380
* Returns the capabilities of the running video track.
383
- *
381
+ *
384
382
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
385
- *
383
+ *
386
384
* Note: Should only be called if {@link Html5QrcodeScanner#getState()}
387
- * returns {@link Html5QrcodeScannerState#SCANNING} or
385
+ * returns {@link Html5QrcodeScannerState#SCANNING} or
388
386
* {@link Html5QrcodeScannerState#PAUSED}.
389
387
*
390
388
* @returns the capabilities of a running video track.
@@ -397,11 +395,11 @@ export class Html5QrcodeScanner {
397
395
/**
398
396
* Returns the object containing the current values of each constrainable
399
397
* property of the running video track.
400
- *
398
+ *
401
399
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
402
- *
400
+ *
403
401
* Note: Should only be called if {@link Html5QrcodeScanner#getState()}
404
- * returns {@link Html5QrcodeScannerState#SCANNING} or
402
+ * returns {@link Html5QrcodeScannerState#SCANNING} or
405
403
* {@link Html5QrcodeScannerState#PAUSED}.
406
404
*
407
405
* @returns the supported settings of the running video track.
@@ -415,7 +413,7 @@ export class Html5QrcodeScanner {
415
413
* Apply a video constraints on running video track from camera.
416
414
*
417
415
* Note: Should only be called if {@link Html5QrcodeScanner#getState()}
418
- * returns {@link Html5QrcodeScannerState#SCANNING} or
416
+ * returns {@link Html5QrcodeScannerState#SCANNING} or
419
417
* {@link Html5QrcodeScannerState#PAUSED}.
420
418
*
421
419
* @param {MediaTrackConstraints } specifies a variety of video or camera
@@ -545,7 +543,7 @@ export class Html5QrcodeScanner {
545
543
const $this = this ;
546
544
$this . showHideScanTypeSwapLink ( false ) ;
547
545
$this . setHeaderMessage (
548
- Html5QrcodeScannerStrings . cameraPermissionRequesting ( ) ) ;
546
+ t ( 'scanner .cameraPermissionRequesting' ) ) ;
549
547
550
548
const createPermissionButtonIfNotExists = ( ) => {
551
549
if ( ! requestPermissionButton ) {
@@ -565,14 +563,14 @@ export class Html5QrcodeScanner {
565
563
$this . renderCameraSelection ( cameras ) ;
566
564
} else {
567
565
$this . setHeaderMessage (
568
- Html5QrcodeScannerStrings . noCameraFound ( ) ,
566
+ t ( 'scanner .noCameraFound' ) ,
569
567
Html5QrcodeScannerStatus . STATUS_WARNING ) ;
570
568
createPermissionButtonIfNotExists ( ) ;
571
569
}
572
570
} ) . catch ( ( error ) => {
573
571
$this . persistedDataManager . setHasPermission (
574
572
/* hasPermission */ false ) ;
575
-
573
+
576
574
if ( requestPermissionButton ) {
577
575
requestPermissionButton . disabled = false ;
578
576
} else {
@@ -598,7 +596,7 @@ export class Html5QrcodeScanner {
598
596
. createElement < HTMLButtonElement > (
599
597
"button" , this . getCameraPermissionButtonId ( ) ) ;
600
598
requestPermissionButton . innerText
601
- = Html5QrcodeScannerStrings . cameraPermissionTitle ( ) ;
599
+ = t ( 'scanner .cameraPermissionTitle' ) ;
602
600
603
601
requestPermissionButton . addEventListener ( "click" , function ( ) {
604
602
requestPermissionButton . disabled = true ;
@@ -687,7 +685,7 @@ export class Html5QrcodeScanner {
687
685
return ;
688
686
}
689
687
690
- $this . setHeaderMessage ( Html5QrcodeScannerStrings . loadingImage ( ) ) ;
688
+ $this . setHeaderMessage ( t ( 'scanner .loadingImage' ) ) ;
691
689
$this . html5Qrcode . scanFileV2 ( file , /* showImage= */ true )
692
690
. then ( ( html5qrcodeResult : Html5QrcodeResult ) => {
693
691
$this . resetHeaderMessage ( ) ;
@@ -751,14 +749,14 @@ export class Html5QrcodeScanner {
751
749
= BaseUiElementFactory . createElement < HTMLButtonElement > (
752
750
"button" , PublicUiElementIdAndClasses . CAMERA_START_BUTTON_ID ) ;
753
751
cameraActionStartButton . innerText
754
- = Html5QrcodeScannerStrings . scanButtonStartScanningText ( ) ;
752
+ = t ( 'scanner .scanButtonStartScanningText' ) ;
755
753
cameraActionContainer . appendChild ( cameraActionStartButton ) ;
756
754
757
755
const cameraActionStopButton
758
756
= BaseUiElementFactory . createElement < HTMLButtonElement > (
759
757
"button" , PublicUiElementIdAndClasses . CAMERA_STOP_BUTTON_ID ) ;
760
758
cameraActionStopButton . innerText
761
- = Html5QrcodeScannerStrings . scanButtonStopScanningText ( ) ;
759
+ = t ( 'scanner .scanButtonStopScanningText' ) ;
762
760
cameraActionStopButton . style . display = "none" ;
763
761
cameraActionStopButton . disabled = true ;
764
762
cameraActionContainer . appendChild ( cameraActionStopButton ) ;
@@ -801,8 +799,7 @@ export class Html5QrcodeScanner {
801
799
cameraActionStartButton . style . display = "none" ;
802
800
}
803
801
cameraActionStartButton . innerText
804
- = Html5QrcodeScannerStrings
805
- . scanButtonStartScanningText ( ) ;
802
+ = t ( 'scanner.scanButtonStartScanningText' ) ;
806
803
cameraActionStartButton . style . opacity = "1" ;
807
804
cameraActionStartButton . disabled = false ;
808
805
if ( shouldShow ) {
@@ -813,15 +810,15 @@ export class Html5QrcodeScanner {
813
810
cameraActionStartButton . addEventListener ( "click" , ( _ ) => {
814
811
// Update the UI.
815
812
cameraActionStartButton . innerText
816
- = Html5QrcodeScannerStrings . scanButtonScanningStarting ( ) ;
813
+ = t ( 'scanner .scanButtonScanningStarting' ) ;
817
814
cameraSelectUi . disable ( ) ;
818
815
cameraActionStartButton . disabled = true ;
819
816
cameraActionStartButton . style . opacity = "0.5" ;
820
817
// Swap link is available only when both scan types are required.
821
818
if ( this . scanTypeSelector . hasMoreThanOneScanType ( ) ) {
822
819
$this . showHideScanTypeSwapLink ( false ) ;
823
820
}
824
- $this . resetHeaderMessage ( ) ;
821
+ $this . resetHeaderMessage ( ) ;
825
822
826
823
// Attempt starting the camera.
827
824
const cameraId = cameraSelectUi . getValue ( ) ;
@@ -875,7 +872,7 @@ export class Html5QrcodeScanner {
875
872
if ( this . scanTypeSelector . hasMoreThanOneScanType ( ) ) {
876
873
$this . showHideScanTypeSwapLink ( true ) ;
877
874
}
878
-
875
+
879
876
cameraSelectUi . enable ( ) ;
880
877
cameraActionStartButton . disabled = false ;
881
878
cameraActionStopButton . style . display = "none" ;
@@ -909,9 +906,9 @@ export class Html5QrcodeScanner {
909
906
private createSectionSwap ( ) {
910
907
const $this = this ;
911
908
const TEXT_IF_CAMERA_SCAN_SELECTED
912
- = Html5QrcodeScannerStrings . textIfCameraScanSelected ( ) ;
909
+ = t ( 'scanner .textIfCameraScanSelected' ) ;
913
910
const TEXT_IF_FILE_SCAN_SELECTED
914
- = Html5QrcodeScannerStrings . textIfFileScanSelected ( ) ;
911
+ = t ( 'scanner .textIfFileScanSelected' ) ;
915
912
916
913
// TODO(minhaz): Export this as an UI element.
917
914
const section = document . getElementById ( this . getDashboardSectionId ( ) ) ! ;
@@ -939,7 +936,7 @@ export class Html5QrcodeScanner {
939
936
$this . resetHeaderMessage ( ) ;
940
937
$this . fileSelectionUi ! . resetValue ( ) ;
941
938
$this . sectionSwapAllowed = false ;
942
-
939
+
943
940
if ( ScanTypeSelector . isCameraScanType ( $this . currentScanType ) ) {
944
941
// Swap to file based scanning.
945
942
$this . clearScanRegion ( ) ;
@@ -1060,7 +1057,7 @@ export class Html5QrcodeScanner {
1060
1057
this . cameraScanImage . width = 64 ;
1061
1058
this . cameraScanImage . style . opacity = "0.8" ;
1062
1059
this . cameraScanImage . src = ASSET_CAMERA_SCAN ;
1063
- this . cameraScanImage . alt = Html5QrcodeScannerStrings . cameraScanAltText ( ) ;
1060
+ this . cameraScanImage . alt = t ( 'scanner .cameraScanAltText' ) ;
1064
1061
}
1065
1062
1066
1063
private insertFileScanImageToScanRegion ( ) {
@@ -1082,7 +1079,7 @@ export class Html5QrcodeScanner {
1082
1079
this . fileScanImage . width = 64 ;
1083
1080
this . fileScanImage . style . opacity = "0.8" ;
1084
1081
this . fileScanImage . src = ASSET_FILE_SCAN ;
1085
- this . fileScanImage . alt = Html5QrcodeScannerStrings . fileScanAltText ( ) ;
1082
+ this . fileScanImage . alt = t ( 'scanner .fileScanAltText' ) ;
1086
1083
}
1087
1084
1088
1085
private clearScanRegion ( ) {
0 commit comments