You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!--The original doc is hosted here => https://github.com/dynamsoft-docs/barcode-reader-docs-js/blob/preview/programming/javascript/user-guide/index.md -->
2
+
1
3
# Dynamsoft Barcode Reader for Your Website
2
4
3
5
Turn your web page into a barcode scanner with just a few lines of code.
@@ -15,7 +17,7 @@ In this guide, you will learn step by step on how to integrate this library into
15
17
16
18
[TEST THE LIBRARY](https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=github&product=dbr&package=js)
17
19
18
-
> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://github.com/Dynamsoft/javascript-barcode/blob/main/README.NODE.md).
20
+
> For back-end barcode reading with Node.js, see [Dynamsoft Barcode Reader for Node](https://www.npmjs.com/package/dynamsoft-node-barcode).
19
21
20
22
**Table of Contents**
21
23
@@ -33,11 +35,11 @@ In this guide, you will learn step by step on how to integrate this library into
*[Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=latest&utm_source=github)
38
-
*[Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=latest&utm_source=github)
39
-
*[Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=latest&utm_source=github)
40
-
*[Use the library in a PWA APP](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=latest&utm_source=github)
*[Use the library in Angular](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=8.8.7&utm_source=github)
40
+
*[Use the library in React](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=8.8.7&utm_source=github)
41
+
*[Use the library in Vue](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html?ver=8.8.7&utm_source=github)
42
+
*[Use the library in a PWA APP](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=8.8.7&utm_source=github)
41
43
42
44
You can also:
43
45
@@ -54,9 +56,9 @@ Other resources:
54
56
Let's start by testing the "Hello World" example of the library which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.
55
57
56
58
* Basic Requirements
57
-
+ Internet connection
59
+
+ Internet connection
58
60
+[A supported browser](#system-requirements)
59
-
+ Camera access
61
+
+ Camera access
60
62
61
63
### Step One: Check the code of the example
62
64
@@ -67,7 +69,7 @@ The complete code of the "Hello World" example is shown below
@@ -312,7 +314,7 @@ As you can see from the above code snippets, there are three types of configurat
312
314
313
315
Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).
314
316
315
-
See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=latest&utm_source=github).
317
+
See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=8.8.7&utm_source=github).
316
318
317
319
#### Customize the UI
318
320
@@ -395,7 +397,7 @@ The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.
395
397
396
398
> Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dbrScanner-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.
397
399
398
-
See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=latest&utm_source=github).
400
+
See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=8.8.7&utm_source=github).
399
401
400
402
Interested to test it further? Read on to learn how to request a 30-day free trial.
401
403
@@ -410,28 +412,26 @@ Since v8.2.5, a 7-day free license is used by default if no license specified. N
410
412
411
413
This library requires the following features which are supported by all modern mainstream browsers:
The above four features are required for the library to work.
416
418
417
419
* `MediaDevices`/`getUserMedia`
418
420
419
-
This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=latest&utm_source=github#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
421
+
This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeScanner.html?ver=8.8.7&utm_source=github#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera.
420
422
421
423
The following table is a list of supported browsers based on the above requirements:
422
424
423
425
Browser Name | Version
424
426
:-: | :-:
425
-
Chrome | v57+ (v59+ on Android/iOS<sup>1</sup>)
426
-
Firefox | v52+ (v55+ on Android/iOS<sup>1</sup>)
427
-
Edge<sup>2</sup> | v16+
428
-
Safari<sup>3</sup> | v11+
427
+
Chrome<sup>1</sup> | v63+
428
+
Firefox<sup>1</sup> | v67+
429
+
Edge | v79+
430
+
Safari<sup>2</sup> | v11.1+
429
431
430
432
<sup>1</sup> iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.
431
433
432
-
<sup>2</sup> On legacy Edge (v16 ~ v78), due to strict Same-origin policy, you must host the library files on the same domain as your web page.
433
-
434
-
<sup>3</sup> Safari 11.2.2 ~ 11.2.6 are not supported.
434
+
<sup>2</sup> Safari 11.2.2 ~ 11.2.6 are not supported.
435
435
436
436
Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
437
437
@@ -480,101 +480,11 @@ Optionally, you may also need to [specify the location of the "engine" files](#s
480
480
481
481
## Advanced Usage
482
482
483
-
### Read a specific area/region
484
-
485
-
To speed up the scanning process, you can choose to scan only a specific area/region.
486
-
487
-
```javascript
488
-
let settings =awaitscanner.getRuntimeSettings();
489
-
/*
490
-
* The following code shrinks the decoding region by 25% on all sides
491
-
*/
492
-
settings.region.regionMeasuredByPercentage=1;
493
-
settings.region.regionLeft=25;
494
-
settings.region.regionTop=25;
495
-
settings.region.regionRight=75;
496
-
settings.region.regionBottom=75;
497
-
awaitscanner.updateRuntimeSettings(settings);
498
-
```
499
-
500
-
[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/taykq592/)
501
-
502
-
### Show internal logs
503
-
504
-
Include the following in your code to print internal logs in the console.
505
-
506
-
```javascript
507
-
Dynamsoft.DBR.BarcodeReader._onLog=console.log;
508
-
```
509
-
510
-
### Set mode arguments
511
-
512
-
To precisely control a mode, you can adjust its specific parameters.
513
-
514
-
```javascript
515
-
let settings =awaitscanner.getRuntimeSettings();
516
-
517
-
/*
518
-
* The following code sets the sensitivity of the TextureDetectionModes to 9
// The 2nd parameter 0 specifies the first mode of TextureDetectionModes, which is "Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION" in this case.
### Display the intermediate result images or the original canvas
531
-
532
-
The intermediate result images are created when `intermediateResultTypes` is set in `RuntimeSettings` . Then they can be returned with the method `getIntermediateCanvas()` . These images can be used to show and debug the barcode reading process.
533
-
534
-
The method `getOriginalImageInACanvas()` returns a canvas which holds the image to be passed to the barcode reader engine for decoding.
535
-
536
-
> *NOTE*
537
-
>
538
-
> For efficiency, the library may utilize WebGL (Web Graphics Library) for preprocessing an image before passing it to the barcode reader engine. If WebGL is used, the image captured from the camera will not be rendered on the canvas, instead, it gets processed by WebGL first and then is passed to the barcode reader engine directly. In this case, there won't be an original canvas. Therefore, if `ifSaveOriginalImageInACanvas` is set to `true` for a `BarcodeReader` or `BarcodeScanenr` instance, the WebGL feature will be disabled for that instance.
539
-
>
540
-
> On the other hand, if WebGL is disabled and you try to get the intermediate result specified by `EnumIntermediateResultType.IRT_ORIGINAL_IMAGE` , it will be exactly the same image as you would get with `getOriginalImageInACanvas()` .
541
-
542
-
The following shows how to display these images on the page
In addition to the content mentioned above, the library has many other settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=8.8.7&utm_source=github).
574
484
575
485
## How to Upgrade
576
486
577
-
If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=latest&utm_source=github).
487
+
If you are using an older version of the library and want to upgrade it to the latest version, please read more on [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=8.8.7&utm_source=github).
578
488
579
489
## FAQ
580
490
@@ -602,3 +512,10 @@ To make sure your web application can access the camera, please configure your w
602
512
- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
603
513
- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
### Accounting for newline characters in the barcode result
517
+
When it comes to HTML, newline characters (`\n`) are not interpreted as they normally would. Therefore, if a barcode result contains a newline character, and you display the result in an alert box or some other text element, then the newline character will most probably be ignored.
518
+
519
+
There are two ways in which you can resolve this:
520
+
1. Wrap the element used to display the result in a `<pre>` element.
521
+
2. Manually replace each `\n` character in the result with `<br \>`
0 commit comments