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
@@ -17,6 +17,21 @@ You can consume the Scandit Data Capture SDK Web packages in two ways:
17
17
- as an external resource from a CDN in HTML
18
18
- as package dependency via npm.
19
19
20
+
## Prerequisites
21
+
22
+
Before you begin, make sure you have the following prerequisites in place:
23
+
24
+
- The latest stable version of Node.js and npm (required only if including and building the SDK as part of an app, instead of just including it as an external resource from a CDN in HTML).
25
+
- Valid Scandit Data Capture SDK license, sign up for a [free trial](https://www.scandit.com/trial/) if you don't already have a license key
26
+
27
+
For detailed information about system requirements, see [System Requirements](/system-requirements/#web-sdk).
28
+
29
+
:::warning
30
+
Devices running the Scandit Data Capture SDK need to have a GPU and run a browser capable of making it available (requires [WebGL - current support?](https://caniuse.com/#feat=webgl) and [OffscreenCanvas - current support?](https://caniuse.com/#feat=offscreencanvas)) or the performance will drastically decrease.
31
+
:::
32
+
33
+
## Package Information
34
+
20
35
Scandit Data Capture SDKs [npm packages](https://www.npmjs.com/search?q=@scandit) are distributed under `@scandit/` scope.
21
36
22
37
You need to add the `@scandit/web-datacapture-core` package, which contains the shared functionality used by the other data capture packages.
@@ -25,25 +40,86 @@ If you're using `barcodecapture`-related functionalities,
`@scandit/web-datacapture-parser` package needs `@scandit/web-datacapture-barcode` as dependency.
46
+
See the [Parser documentation](/sdks/web/parser/get-started.md) to learn more.
29
47
30
-
In addition, you need to add `@scandit/web-datacapture-id` if you want to scan personal identification documents, such as identity cards, passports or visas. See the [ID Capture documentation](/sdks/web/id-capture/get-started.md) to learn more.
48
+
If you want to scan personal identification documents, such as identity cards, passports or visas you need to add `@scandit/web-datacapture-id`.
49
+
See the [ID Capture documentation](/sdks/web/id-capture/get-started.md) to learn more.
31
50
32
51
:::tip
33
52
You can safely remove _barcode_ or _id_ dependencies if you are not going to use their features.
34
53
:::
35
54
36
-
## Prerequisites
55
+
## Install via package manager
37
56
38
-
Before you begin, make sure you have the following prerequisites in place:
57
+
To add the packages via your preferred package manager, run the following command from your project's root folder:
39
58
40
-
- The latest stable version of Node.js and npm (required only if including and building the SDK as part of an app, instead of just including it as an external resource from a CDN in HTML).
41
-
- Valid Scandit Data Capture SDK license, sign up for a [free trial](https://www.scandit.com/trial/) if you don't already have a license key
59
+
<TabsgroupId="packageManager">
42
60
43
-
:::warning
44
-
Devices running the Scandit Data Capture SDK need to have a GPU and run a browser capable of making it available (requires [WebGL - current support?](https://caniuse.com/#feat=webgl) and [OffscreenCanvas - current support?](https://caniuse.com/#feat=offscreencanvas)) or the performance will drastically decrease.
Then import the package in your JavaScript/TypeScript code by using:
108
+
109
+
```js
110
+
// Importing only the necessary items is recommended to allow bundler to optimize the code through tree-shaking
111
+
import {
112
+
DataCaptureContext,
113
+
Camera,
114
+
} from"@scandit/web-datacapture-core";
115
+
import {
116
+
BarcodeCapture,
117
+
barcodeCaptureLoader,
118
+
} from"@scandit/web-datacapture-barcode";
119
+
120
+
// Insert your code here
121
+
```
122
+
47
123
## Install via CDN
48
124
49
125
:::warning Important considerations when using CDNs
@@ -64,75 +140,17 @@ For production environments, we recommend:
64
140
- Enterprise-grade support
65
141
:::
66
142
67
-
You can use the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN to specify a certain version (or range) and include and import from our library as follows. This example imports the core and barcode capture packages:
68
-
69
-
```html
70
-
<!--
71
-
You can optionally preload the modules.
72
-
More info about this feature here https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload
You can use the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN to specify a certain version (or range) and include and import from our library as follows.
120
144
121
145
:::note
122
-
In alternative to jsdeliver unpkg can be used as alternative:
Then import the package in your JavaScript/TypeScript code by using:
294
-
295
-
```js
296
-
// Importing only the necessary items is recommended
297
-
import {
298
-
DataCaptureContext,
299
-
Camera,
300
-
} from "@scandit/web-datacapture-core";
301
-
import {
302
-
BarcodeCapture,
303
-
barcodeCaptureLoader,
304
-
} from "@scandit/web-datacapture-barcode";
305
-
306
-
// Insert your code here
307
-
```
308
-
309
-
OR
310
-
311
-
```js
312
-
// Import everything
313
-
import * as SDCCore from "@scandit/web-datacapture-core";
314
-
import * as SDCBarcode from "@scandit/web-datacapture-barcode";
315
-
316
-
// Insert your code here
317
-
```
318
-
319
269
## Configure the Library
320
270
321
271
The library needs to be configured and initialized before it can be used, this is done via the DataCaptureContext [`forLicenseKey`](https://docs.scandit.com/data-capture-sdk/web/core/api/data-capture-context.html#class-scandit.datacapture.core.DataCaptureContext) function.
@@ -334,7 +284,7 @@ If you installed the library through npm, **these files should be copied and ser
334
284
The configuration option that you provide should then point to the folder containing these files, either as a path of your website or an absolute URL (like the CDN one). **By default the library will look at the root of your website**.
335
285
336
286
:::caution Version Matching Required
337
-
The npm package version and the `sdc-lib` files must be from the exact same SDK version. For example, if you have `@scandit/[email protected]` in your `package.json`, you must serve the `sdc-lib` folder from `node_modules/@scandit/[email protected]/sdc-lib/`. Mismatched versions will cause runtime errors and unexpected behavior.
287
+
The npm package version and the `sdc-lib` files must be from the exact same SDKversion. For example, if you have `@scandit/[email protected]`in your `package.json`, you must serve the `sdc-lib` folder from `node_modules/@scandit/[email protected]/sdc-lib/`. **Mismatched versions will cause runtime errors and unexpected behavior.**
338
288
:::
339
289
340
290
In case a common CDN is used (jsDelivr or UNPKG) the library will automatically, internally set up the correct URLs pointing to the files needed for the matching library version.
@@ -348,7 +298,7 @@ We recommend serving the `sdc-lib` folder yourself.
348
298
:::caution Important: Full Folder Copy and Version Matching
349
299
You must copy the **entire `sdc-lib` folder recursively** from the installed Scandit package to your server. This includes all subdirectories and files. The`sdc-lib` folder must come from a package version that exactly matches your npm packageversion. For example, if you have `@scandit/[email protected]`, you must copy the `sdc-lib` from `node_modules/@scandit/[email protected]/sdc-lib/`.
350
300
351
-
Additionally, you should copy `sdc-lib` from all installed Scandit packages (`@scandit/web-datacapture-core`, `@scandit/web-datacapture-barcode`, `@scandit/web-datacapture-id`, etc.) to the same location.
301
+
Additionally, you should copy `sdc-lib` from all installed Scandit packages (`@scandit/web-datacapture-core`, `@scandit/web-datacapture-barcode`, `@scandit/web-datacapture-id`, `@scandit/web-datacapture-parser`, etc.) to the same location.
352
302
:::
353
303
354
304
Once copied, be sure to serve the files correctly by setting up the correct MIME type for the `.wasm`, `.model`, and `.js`files. Some common examples are provided below:
@@ -449,7 +399,7 @@ def serve_file(filename):
449
399
## Show loading status with default UI
450
400
451
401
It could take a while the very first time to download the .wasm files.
452
-
To show some feedback to the user about the loading status you have two options:
402
+
To show some visual feedback to the user about the loading status you have two options:
453
403
454
404
- use the default UI provided with the SDK
455
405
- subscribe to the loading status and update your own custom UI.
@@ -461,6 +411,7 @@ import {
461
411
DataCaptureView,
462
412
DataCaptureContext,
463
413
} from "@scandit/web-datacapture-core";
414
+
import { idCaptureLoader } from "@scandit/web-datacapture-id";
464
415
465
416
const view = new DataCaptureView();
466
417
@@ -484,8 +435,11 @@ You can also subscribe for the [loading status](https://docs.scandit.com/data-ca
484
435
by simply attaching a listener like this:
485
436
486
437
```ts
438
+
import type { ProgressInfo } from "@scandit/web-datacapture-core";
487
439
import { loadingStatus, DataCaptureContext } from "@scandit/web-datacapture-core";
488
-
loadingStatus.subscribe((info) => {
440
+
import { barcodeCaptureLoader } from "@scandit/web-datacapture-barcode";
441
+
442
+
loadingStatus.subscribe((info: ProgressInfo) => {
489
443
// updateUI(info.percentage, info.loadedBytes)
490
444
});
491
445
@@ -511,6 +465,10 @@ For more information:
511
465
- [GatsbyJS - Using client side only packages](https://www.gatsbyjs.com/docs/using-client-side-only-packages/).
512
466
- [NextJS - Lazy Loading with no ssr](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr).
513
467
468
+
### Performance Optimization
469
+
470
+
For information on how to improve runtime performance, see [Improve Runtime Performance by Enabling Browser Multithreading](/sdks/web/matrixscan/get-started/#improve-runtime-performance-by-enabling-browser-multithreading).
471
+
514
472
### Camera Permissions
515
473
516
474
When using the Scandit Data Capture SDK you will likely want to set the camera as the frame source for various capture modes.
0 commit comments