Hosting resources

BlinkID Web uses web assembly (WASM) to run recognition and extraction code. WASM resources are not automatically served—you must make them available at a publicly accessible URL before the SDK can load them.

There are two ways to handle WASM resource hosting: same-domain and cross-domain hosting.

Same-domain hosting

If you can, host the WASM resources on the same domain as your web application. This avoids all cross-origin security complexities.

To do that, copy the WASM assets from the library you're using (e.g., node_modules/@microblink/blinkid/dist/resources) into a publicly accessible folder on your web server.

BlinkID will, by default, look for the WASM resources on the same domain, and will try to load {YOUR DOMAIN}/resources/blinkid-worker.js.

Cross-domain hosting

If you must host resources on a different domain (for example if you use a CDN), you should configure the application server headers and you must configure the WASM resource server headers.

Configure headers on your main application server

To use the multi-threaded (SharedArrayBuffer) version of BlinkID, your primary web application should serve its HTML pages with the following two headers.

• Cross-Origin-Opener-Policy: same-origin: Isolates your page context from other top-level windows.
• Cross-Origin-Embedder-Policy: require-corp: Requires all embedded cross-origin resources to explicitly opt-in via CORS.

Netlify

[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Embedder-Policy = "require-corp"

nginx

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;

Apache

<IfModule mod_headers.c>
  Header set Cross-Origin-Opener-Policy "same-origin"
  Header set Cross-Origin-Embedder-Policy "require-corp"
</IfModule>

Vercel

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]
    }
  ]
}

If you don't set these headers, BlinkID will fall back to a non-threaded version. Your scanning session will still work, but will be slower.

Configure headers on your resource server (CDN)

The server hosting your WASM files must return the following headers.

• Access-Control-Allow-Origin: Explicitly permits your web application's domain to fetch the resources.
• Cross-Origin-Resource-Policy: cross-origin: Required when your main app uses Cross-Origin-Embedder-Policy: require-corp, so the browser allows the cross-origin resource to be loaded.

Netlify

[[headers]]
  for = "/*"
  [headers.values]
    "Access-Control-Allow-Origin" = "https://my-app-url.com"
    "Cross-Origin-Resource-Policy" = "cross-origin"

nginx

add_header Access-Control-Allow-Origin "https://my-app-url.com" always;
add_header Cross-Origin-Resource-Policy "cross-origin" always;

Apache

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "https://my-app-url.com"
  Header set Cross-Origin-Resource-Policy "cross-origin"
</IfModule>

Vercel

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "https://my-app-url.com" },
        { "key": "Cross-Origin-Resource-Policy", "value": "cross-origin" }
      ]
    }
  ]
}

Use resourcesLocation to specify the location of your WASM binary

To load the resources from the CDN, you must explicitly specify the location when loading BlinkID.

import { createBlinkId } from "@microblink/blinkid";

const blinkid = await createBlinkId({
  licenseKey: "your license key here",
  resourcesLocation: "your CDN URL here", // BlinkID will append "/resources/blinkid-worker.js" to this value
});

The key thing to note here is that you should pass the base URL, and the SDK will append the rest of the path.