22 * @module
33 * Complete Scanner build on top of {@link Html5Qrcode}.
44 * - Decode QR Code using web cam or smartphone camera
5- *
5+ *
66 * @author mebjas <[email protected] > 7- *
7+ *
88 * The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
99 * http://www.denso-wave.com/qrcode/faqpatent-e.html
1010 */
@@ -33,9 +33,7 @@ import {
3333 Html5QrcodeFullConfig ,
3434} from "./html5-qrcode" ;
3535
36- import {
37- Html5QrcodeScannerStrings ,
38- } from "./strings" ;
36+ import { t } from "./strings" ;
3937
4038import {
4139 ASSET_FILE_SCAN ,
@@ -94,14 +92,14 @@ export interface Html5QrcodeScannerConfig
9492 * were previously granted and what camera was last used. If the permissions
9593 * is already granted for "camera", QR code scanning will automatically
9694 * start for previously used camera.
97- *
95+ *
9896 * Note: default value is `true`.
9997 */
10098 rememberLastUsedCamera ?: boolean | undefined ;
10199
102100 /**
103101 * Sets the desired scan types to be supported in the scanner.
104- *
102+ *
105103 * - Not setting a value will follow the default order supported by
106104 * library.
107105 * - First value would be used as the default value. Example:
@@ -119,26 +117,26 @@ export interface Html5QrcodeScannerConfig
119117 /**
120118 * If `true` the rendered UI will have button to turn flash on or off
121119 * based on device + browser support.
122- *
120+ *
123121 * Note: default value is `false`.
124122 */
125123 showTorchButtonIfSupported ?: boolean | undefined ;
126124
127125 /**
128126 * If `true` the rendered UI will have slider to zoom camera based on
129127 * device + browser support.
130- *
128+ *
131129 * Note: default value is `false`.
132- *
130+ *
133131 * TODO(minhazav): Document this API, currently hidden.
134132 */
135133 showZoomSliderIfSupported ?: boolean | undefined ;
136134
137135 /**
138136 * Default zoom value if supported.
139- *
137+ *
140138 * Note: default value is 1x.
141- *
139+ *
142140 * TODO(minhazav): Document this API, currently hidden.
143141 */
144142 defaultZoomValueIfSupported ?: number | undefined ;
@@ -168,10 +166,10 @@ function toHtml5QrcodeFullConfig(
168166
169167/**
170168 * End to end web based QR and Barcode Scanner.
171- *
169+ *
172170 * Use this class for setting up QR scanner in your web application with
173171 * few lines of codes.
174- *
172+ *
175173 * - Supports camera as well as file based scanning.
176174 * - Depending on device supports camera selection, zoom and torch features.
177175 * - Supports different kind of 2D and 1D codes {@link Html5QrcodeSupportedFormats}.
@@ -203,7 +201,7 @@ export class Html5QrcodeScanner {
203201 *
204202 * @param elementId Id of the HTML element.
205203 * @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.
207205 */
208206 public constructor (
209207 elementId : string ,
@@ -232,7 +230,7 @@ export class Html5QrcodeScanner {
232230
233231 /**
234232 * Renders the User Interface.
235- *
233+ *
236234 * @param qrCodeSuccessCallback Callback called when an instance of a QR
237235 * code or any other supported bar code is found.
238236 * @param qrCodeErrorCallback optional, callback called in cases where no
@@ -255,7 +253,7 @@ export class Html5QrcodeScanner {
255253
256254 this . lastMatchFound = decodedText ;
257255 this . setHeaderMessage (
258- Html5QrcodeScannerStrings . lastMatch ( decodedText ) ,
256+ t ( 'scanner .lastMatch' , { decodedText } ) ,
259257 Html5QrcodeScannerStatus . STATUS_SUCCESS ) ;
260258 }
261259 } ;
@@ -282,13 +280,13 @@ export class Html5QrcodeScanner {
282280 //#region State related public APIs
283281 /**
284282 * Pauses the ongoing scan.
285- *
283+ *
286284 * Notes:
287285 * - Should only be called if camera scan is ongoing.
288- *
286+ *
289287 * @param shouldPauseVideo (Optional, default = false) If `true`
290288 * the video will be paused.
291- *
289+ *
292290 * @throws error if method is called when scanner is not in scanning state.
293291 */
294292 public pause ( shouldPauseVideo ?: boolean ) {
@@ -298,19 +296,19 @@ export class Html5QrcodeScanner {
298296
299297 this . getHtml5QrcodeOrFail ( ) . pause ( shouldPauseVideo ) ;
300298 }
301-
299+
302300 /**
303301 * Resumes the paused scan.
304- *
302+ *
305303 * If the video was previously paused by setting `shouldPauseVideo`
306304 * to `true` in {@link Html5QrcodeScanner#pause(shouldPauseVideo)},
307305 * calling this method will resume the video.
308- *
306+ *
309307 * Notes:
310308 * - Should only be called if camera scan is ongoing.
311309 * - With this caller will start getting results in success and error
312310 * callbacks.
313- *
311+ *
314312 * @throws error if method is called when scanner is not in paused state.
315313 */
316314 public resume ( ) {
@@ -328,7 +326,7 @@ export class Html5QrcodeScanner {
328326
329327 /**
330328 * Removes the QR Code scanner UI.
331- *
329+ *
332330 * @returns Promise which succeeds if the cleanup is complete successfully,
333331 * fails otherwise.
334332 */
@@ -380,11 +378,11 @@ export class Html5QrcodeScanner {
380378 //#region Beta APIs to modify running stream state.
381379 /**
382380 * Returns the capabilities of the running video track.
383- *
381+ *
384382 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
385- *
383+ *
386384 * Note: Should only be called if {@link Html5QrcodeScanner#getState()}
387- * returns {@link Html5QrcodeScannerState#SCANNING} or
385+ * returns {@link Html5QrcodeScannerState#SCANNING} or
388386 * {@link Html5QrcodeScannerState#PAUSED}.
389387 *
390388 * @returns the capabilities of a running video track.
@@ -397,11 +395,11 @@ export class Html5QrcodeScanner {
397395 /**
398396 * Returns the object containing the current values of each constrainable
399397 * property of the running video track.
400- *
398+ *
401399 * Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
402- *
400+ *
403401 * Note: Should only be called if {@link Html5QrcodeScanner#getState()}
404- * returns {@link Html5QrcodeScannerState#SCANNING} or
402+ * returns {@link Html5QrcodeScannerState#SCANNING} or
405403 * {@link Html5QrcodeScannerState#PAUSED}.
406404 *
407405 * @returns the supported settings of the running video track.
@@ -415,7 +413,7 @@ export class Html5QrcodeScanner {
415413 * Apply a video constraints on running video track from camera.
416414 *
417415 * Note: Should only be called if {@link Html5QrcodeScanner#getState()}
418- * returns {@link Html5QrcodeScannerState#SCANNING} or
416+ * returns {@link Html5QrcodeScannerState#SCANNING} or
419417 * {@link Html5QrcodeScannerState#PAUSED}.
420418 *
421419 * @param {MediaTrackConstraints } specifies a variety of video or camera
@@ -545,7 +543,7 @@ export class Html5QrcodeScanner {
545543 const $this = this ;
546544 $this . showHideScanTypeSwapLink ( false ) ;
547545 $this . setHeaderMessage (
548- Html5QrcodeScannerStrings . cameraPermissionRequesting ( ) ) ;
546+ t ( 'scanner .cameraPermissionRequesting' ) ) ;
549547
550548 const createPermissionButtonIfNotExists = ( ) => {
551549 if ( ! requestPermissionButton ) {
@@ -565,14 +563,14 @@ export class Html5QrcodeScanner {
565563 $this . renderCameraSelection ( cameras ) ;
566564 } else {
567565 $this . setHeaderMessage (
568- Html5QrcodeScannerStrings . noCameraFound ( ) ,
566+ t ( 'scanner .noCameraFound' ) ,
569567 Html5QrcodeScannerStatus . STATUS_WARNING ) ;
570568 createPermissionButtonIfNotExists ( ) ;
571569 }
572570 } ) . catch ( ( error ) => {
573571 $this . persistedDataManager . setHasPermission (
574572 /* hasPermission */ false ) ;
575-
573+
576574 if ( requestPermissionButton ) {
577575 requestPermissionButton . disabled = false ;
578576 } else {
@@ -598,7 +596,7 @@ export class Html5QrcodeScanner {
598596 . createElement < HTMLButtonElement > (
599597 "button" , this . getCameraPermissionButtonId ( ) ) ;
600598 requestPermissionButton . innerText
601- = Html5QrcodeScannerStrings . cameraPermissionTitle ( ) ;
599+ = t ( 'scanner .cameraPermissionTitle' ) ;
602600
603601 requestPermissionButton . addEventListener ( "click" , function ( ) {
604602 requestPermissionButton . disabled = true ;
@@ -687,7 +685,7 @@ export class Html5QrcodeScanner {
687685 return ;
688686 }
689687
690- $this . setHeaderMessage ( Html5QrcodeScannerStrings . loadingImage ( ) ) ;
688+ $this . setHeaderMessage ( t ( 'scanner .loadingImage' ) ) ;
691689 $this . html5Qrcode . scanFileV2 ( file , /* showImage= */ true )
692690 . then ( ( html5qrcodeResult : Html5QrcodeResult ) => {
693691 $this . resetHeaderMessage ( ) ;
@@ -751,14 +749,14 @@ export class Html5QrcodeScanner {
751749 = BaseUiElementFactory . createElement < HTMLButtonElement > (
752750 "button" , PublicUiElementIdAndClasses . CAMERA_START_BUTTON_ID ) ;
753751 cameraActionStartButton . innerText
754- = Html5QrcodeScannerStrings . scanButtonStartScanningText ( ) ;
752+ = t ( 'scanner .scanButtonStartScanningText' ) ;
755753 cameraActionContainer . appendChild ( cameraActionStartButton ) ;
756754
757755 const cameraActionStopButton
758756 = BaseUiElementFactory . createElement < HTMLButtonElement > (
759757 "button" , PublicUiElementIdAndClasses . CAMERA_STOP_BUTTON_ID ) ;
760758 cameraActionStopButton . innerText
761- = Html5QrcodeScannerStrings . scanButtonStopScanningText ( ) ;
759+ = t ( 'scanner .scanButtonStopScanningText' ) ;
762760 cameraActionStopButton . style . display = "none" ;
763761 cameraActionStopButton . disabled = true ;
764762 cameraActionContainer . appendChild ( cameraActionStopButton ) ;
@@ -801,8 +799,7 @@ export class Html5QrcodeScanner {
801799 cameraActionStartButton . style . display = "none" ;
802800 }
803801 cameraActionStartButton . innerText
804- = Html5QrcodeScannerStrings
805- . scanButtonStartScanningText ( ) ;
802+ = t ( 'scanner.scanButtonStartScanningText' ) ;
806803 cameraActionStartButton . style . opacity = "1" ;
807804 cameraActionStartButton . disabled = false ;
808805 if ( shouldShow ) {
@@ -813,15 +810,15 @@ export class Html5QrcodeScanner {
813810 cameraActionStartButton . addEventListener ( "click" , ( _ ) => {
814811 // Update the UI.
815812 cameraActionStartButton . innerText
816- = Html5QrcodeScannerStrings . scanButtonScanningStarting ( ) ;
813+ = t ( 'scanner .scanButtonScanningStarting' ) ;
817814 cameraSelectUi . disable ( ) ;
818815 cameraActionStartButton . disabled = true ;
819816 cameraActionStartButton . style . opacity = "0.5" ;
820817 // Swap link is available only when both scan types are required.
821818 if ( this . scanTypeSelector . hasMoreThanOneScanType ( ) ) {
822819 $this . showHideScanTypeSwapLink ( false ) ;
823820 }
824- $this . resetHeaderMessage ( ) ;
821+ $this . resetHeaderMessage ( ) ;
825822
826823 // Attempt starting the camera.
827824 const cameraId = cameraSelectUi . getValue ( ) ;
@@ -875,7 +872,7 @@ export class Html5QrcodeScanner {
875872 if ( this . scanTypeSelector . hasMoreThanOneScanType ( ) ) {
876873 $this . showHideScanTypeSwapLink ( true ) ;
877874 }
878-
875+
879876 cameraSelectUi . enable ( ) ;
880877 cameraActionStartButton . disabled = false ;
881878 cameraActionStopButton . style . display = "none" ;
@@ -909,9 +906,9 @@ export class Html5QrcodeScanner {
909906 private createSectionSwap ( ) {
910907 const $this = this ;
911908 const TEXT_IF_CAMERA_SCAN_SELECTED
912- = Html5QrcodeScannerStrings . textIfCameraScanSelected ( ) ;
909+ = t ( 'scanner .textIfCameraScanSelected' ) ;
913910 const TEXT_IF_FILE_SCAN_SELECTED
914- = Html5QrcodeScannerStrings . textIfFileScanSelected ( ) ;
911+ = t ( 'scanner .textIfFileScanSelected' ) ;
915912
916913 // TODO(minhaz): Export this as an UI element.
917914 const section = document . getElementById ( this . getDashboardSectionId ( ) ) ! ;
@@ -939,7 +936,7 @@ export class Html5QrcodeScanner {
939936 $this . resetHeaderMessage ( ) ;
940937 $this . fileSelectionUi ! . resetValue ( ) ;
941938 $this . sectionSwapAllowed = false ;
942-
939+
943940 if ( ScanTypeSelector . isCameraScanType ( $this . currentScanType ) ) {
944941 // Swap to file based scanning.
945942 $this . clearScanRegion ( ) ;
@@ -1060,7 +1057,7 @@ export class Html5QrcodeScanner {
10601057 this . cameraScanImage . width = 64 ;
10611058 this . cameraScanImage . style . opacity = "0.8" ;
10621059 this . cameraScanImage . src = ASSET_CAMERA_SCAN ;
1063- this . cameraScanImage . alt = Html5QrcodeScannerStrings . cameraScanAltText ( ) ;
1060+ this . cameraScanImage . alt = t ( 'scanner .cameraScanAltText' ) ;
10641061 }
10651062
10661063 private insertFileScanImageToScanRegion ( ) {
@@ -1082,7 +1079,7 @@ export class Html5QrcodeScanner {
10821079 this . fileScanImage . width = 64 ;
10831080 this . fileScanImage . style . opacity = "0.8" ;
10841081 this . fileScanImage . src = ASSET_FILE_SCAN ;
1085- this . fileScanImage . alt = Html5QrcodeScannerStrings . fileScanAltText ( ) ;
1082+ this . fileScanImage . alt = t ( 'scanner .fileScanAltText' ) ;
10861083 }
10871084
10881085 private clearScanRegion ( ) {
0 commit comments