Install the Nosmai Effects SDK for Web

Prerequisites

• Node 20.19 or later, or Node 22.12 or later
• A modern ESM-compatible bundler
• HTTPS for deployed environments or localhost for development
• Browser support for camera access, WebGL2, WebAssembly, and Web Crypto
• An authorized nosmai-web-sdk-0.2.0.tgz distribution
• A Web licence key and public verification key supplied for the preview

Requirement details

• Secure context means HTTPS in production or an approved local development address. Browsers normally block camera access on an insecure page.
• Bundler prepares the app's code and dependencies for the browser.
• WebGL2 provides accelerated browser graphics.
• WebAssembly allows compiled processing code to run efficiently in the browser.
• Web Crypto provides browser security functions required by the preview.

Install the preview package

Place the authorized archive in a private vendor directory, then install it:

npm install ./vendor/nosmai-web-sdk-0.2.0.tgz

The package name used by application imports is:

import { NosmaiWebSDK } from '@nosmai/web-sdk'

The preview is not a general public npm registry release. Keep its archive and licensed effect packages out of public repositories unless distribution terms explicitly allow them.

Configure optional runtime assets

Some face-aware or background packages require additional runtime assets from the authorized preview distribution. Keep those files on an approved host and follow the version-specific onboarding instructions supplied with the archive.

Do not rename, modify, or publish those assets. Applications with a restrictive Content Security Policy must allow their configured asset host. Optional runtime assets load only when an active feature requires them.

Configure browser security

The document and any embedding iframe must permit camera access. A restrictive Content Security Policy must also allow:

• the application script and worker sources used by the bundler
• connect-src for licence verification and protected package downloads
• authorized runtime asset locations
• image and media sources referenced by authored packages

When embedding the camera in an iframe, allow the camera explicitly:

<iframe src="https://camera.example.com" allow="camera"></iframe>

Do not deploy the camera experience over plain HTTP.

Check WebGL2 before startup

const probe = document.createElement('canvas')
const gl = probe.getContext('webgl2')

if (!gl) {
  throw new Error('WEBGL_UNAVAILABLE')
}

The SDK also performs this check and reports a stable error code. Hardware acceleration is recommended for real-time camera processing.

Package size

Web bundle impact depends on tree shaking, bundler output, optional runtime assets, and the authored packages shipped by the app. Lazy loading avoids the startup cost of optional capabilities until an active effect needs them.

Measure the production JavaScript chunks, cached model assets, and first-effect network request separately.

Verify it worked

Create a compile-only module:

import { NosmaiWebSDK } from '@nosmai/web-sdk'

export function getNosmaiVersion(sdk: NosmaiWebSDK): string {
  return sdk.version
}

Run the production build and confirm TypeScript resolves the import. Continue to the Web quickstart to create the canvas, verify the licence, start the camera, and apply a compatible effect package.

Common errors

Next steps

• Add real-time camera effects to a Web app
• Get and apply a licence key
• Check Web preview capabilities
• Understand filters and authored effects

References

• Nosmai Effects
• Nosmai Effects product page
• Nosmai Effects pricing