Prerequisites

Nosmai Effects Web preview installed
An authorized Web licence key and public verification key
A compatible first-effect.nosmai package
A secure context through HTTPS or localhost
A camera browser with WebGL2, WebAssembly, and Web Crypto

The Web preview does not expose the mobile SDK's direct skin-smoothing method. This first visible effect therefore uses an authored package instead of claiming native beauty parity.

1. Add the preview canvas

Add these elements to the existing page:

<canvas id="preview"></canvas>
<button id="start" type="button">Start camera effect</button>
<p id="status">Ready to start</p>
<script type="module" src="/src/main.ts"></script>

2. Add licence configuration

Create src/nosmai-config.ts and insert the public verification key supplied with the authorized preview distribution:

export const NOSMAI_LICENSE_KEY = 'NOSMAI-YOUR-WEB-KEY'

export const NOSMAI_LICENSE_PUBLIC_KEY = [
  '-----BEGIN PUBLIC KEY-----',
  'REPLACE_WITH_THE_AUTHORIZED_PUBLIC_KEY_BODY',
  '-----END PUBLIC KEY-----',
].join('\n')

The public verification key is not the project licence key. Do not replace it with a private signing key.

3. Initialize and start the camera

Connect the button to the SDK in src/main.ts:

import { NosmaiWebSDK } from '@nosmai/web-sdk'
import {
  NOSMAI_LICENSE_KEY,
  NOSMAI_LICENSE_PUBLIC_KEY,
} from './nosmai-config'

const canvas = document.querySelector<HTMLCanvasElement>('#preview')!
const startButton = document.querySelector<HTMLButtonElement>('#start')!
const statusLabel = document.querySelector<HTMLParagraphElement>('#status')!

startButton.addEventListener('click', async () => {
  const sdk = await NosmaiWebSDK.create({
    canvas: canvas,
    camera: {
      facingMode: 'user',
      width: 1280,
      height: 720,
    },
    license: {
      publicKeyPem: NOSMAI_LICENSE_PUBLIC_KEY,
      sdkVersion: '0.2.0',
    },
  })

  const licenceStatus = await sdk.verifyLicense(NOSMAI_LICENSE_KEY)
  if (licenceStatus !== 'valid') {
    statusLabel.textContent = `Licence status: ${licenceStatus}`
    return
  }

  await sdk.startCamera()
  const result = await sdk.applyEffect('/filters/first-effect.nosmai')
  console.info('Effect compatibility', result.compatibility)
  statusLabel.textContent = 'Camera ready with Nosmai effect'

  window.addEventListener('pagehide', () => sdk.destroy(), { once: true })
})

Put the compatible package at:

public/filters/first-effect.nosmai

The explicit button preserves the browser user gesture used for camera permission. The compatibility report identifies package primitives that are not implemented by the current Web preview.

4. Run the development server

Use the project's normal bundler command. For a Vite application:

npm run dev

Open the localhost URL and press Start camera effect.

Verify it worked

You should see the live camera rendered into the canvas, the selected authored effect, and the status Camera ready with Nosmai effect. Check the console compatibility report and confirm it does not list a required primitive as unsupported.

Common errors

Error	Cause	Fix
`UNSUPPORTED_BROWSER`	Required browser API is unavailable	Use a modern browser in HTTPS or localhost context
`WEBGL_UNAVAILABLE`	WebGL2 context creation failed	Enable hardware acceleration or use another supported browser or GPU
`CAMERA_PERMISSION`	User or browser policy denied camera access	Grant camera permission and allow camera access on any parent iframe
`LICENSE_UNVERIFIED`	Licence options are absent or verification was not completed	Supply the authorized public key and call `verifyLicense`
`INVALID_PACKAGE`	Selected file is not a valid protected Nosmai package	Use an authorized compatible `.nosmai` package without modifying its bytes
`UNSUPPORTED_EFFECT`	Package requires a primitive missing from Web 0.2.0	Use a compatible package or target a mobile SDK for that effect

Web quickstart