# Web quickstart

> Verify an origin-bound license, start the browser camera, and apply a compatible .nosmai effect in a WebGL2 canvas.

> For AI agents: the complete documentation index is at https://nosmai.com/llms/effects.txt

Product: Nosmai Effects
Group: get-started
Source: https://nosmai.com/docs/effects/quickstart/web/

## Prerequisites

- [Nosmai Effects Web preview installed](/docs/effects/installation/web/)
- 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:

```html
<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:

```ts
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`:

```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:

```text
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:

```sh
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 |

## Next steps

- [Understand authored effect parameters](/docs/effects/concepts/filters-and-effects/)
- [Add an AR mask in Web](/docs/effects/guides/effects/add-an-ar-mask/web/)
- [Respond to face triggers](/docs/effects/concepts/triggers/)
- [Understand authored filters](/docs/effects/concepts/filters-and-effects/)

## References

- [Web installation](/docs/effects/installation/web/)
- [Web capability support](/docs/effects/platform-support/)
- [How the pipeline works](/docs/effects/concepts/how-the-pipeline-works/)
- [Nosmai Effects](https://nosmai.com/effects/)
- [Nosmai Effects pricing](https://nosmai.com/effects/#pricing)