Skip to main content
Platform
Camera Kit Web

Camera Kit Web for Beginners

Overview​

Welcome to the exciting world of web development! In this beginner's guide, we will embark on a journey to explore the Camera Kit Web SDK, a powerful tool that allows you to bring Snap AR experiences into your web applications. If you're new to web development and have only a little experience with HTML, CSS, and JavaScript, fear not! We will start from the very beginning, laying the foundation and building up step by step.

Access to Camera Kit can be requested via this form

Prerequisites​

  • Node.js and npm must be installed on your computer. npm comes bundled with Node.js by default and can be downloaded here.

Before we get started, it's also important you familiarize yourself with the core prerequisites of building a web application:

1. Code Editor​

We'll be using Visual Studio Code (VS Code) to develop our application throughout this guide.

  • Download and install VS Code
  • Open VS Code and click "View" in the menu bar and then "Command Palette..."
  • Type "install code" and then click Shell Command: Install 'code' command in PATH

This will let you easily add project files to your VS Code workspace.

2. Setup and Installation​

Create a New Vite Project​

For this demo, we'll be using Vite. Vite is a powerful build tool and development server that streamlines modern web development.

Open your VS Code terminal by clicking "Terminal" in the menu bar and then "New Terminal." Using your terminal, let's create a new Vite app:

npm create vite@latest
  • Here, NPM will likely ask you to install the create-vite package. If it does, type y and hit enter.
  • Enter a project name (or leave the default vite-project) and hit enter.
  • Select "Vanilla" as your framework and hit enter.
  • Select "TypeScript" as your variant and hit enter.

Your Vite project is now installed. Let's move into our project directory, add it to the VS Code workspace and install node modules:

  cd vite-project
  code -a .
  npm install

In VS Code, click "View" in the menu bar and then "Explorer." You should now see your project files in the left column.

Install Camera Kit​

Using your terminal, let's install the Camera Kit Web SDK:

npm install @snap/camera-kit
Prepare Your App For Development​

Vite comes with a lot of boilerplate code that we won't need:

  • Inside of your src/ directory, delete all files except main.ts.
  • Additionally, inside of main.ts, delete all the contents of the file, leaving it blank.

Your project should now look like this:

You are now ready to build your Camera Kit Web app!

3. Create a Basic Camera Kit Web App​

Bootstrap Camera Kit​

Inside of main.ts, let's import bootstrapCameraKit and create a new Camera Kit Instance with your API token (which can be found in the Snap Developer Portal). We're wrapping our Camera Kit implementation in an async function so that we can use the async/await syntax which simplifies the handling and management of Promises.

import { bootstrapCameraKit } from '@snap/camera-kit';

(async function () {
  const cameraKit = await bootstrapCameraKit({ apiToken: '<YOUR_API_TOKEN>' });
})();
Create a Session​

Before we create our Camera Kit session, let's update our index.html file to include a canvas element. Camera Kit renders video frames to an HTMLCanvasElement. The simplest way to use Camera Kit is to provide your own canvas when you create your session. Replace your entire index.html file with the HTML below:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Camera Kit Web App</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Back in main.ts, let's select our canvas element and create a new Camera Kit session with it:

const liveRenderTarget = document.getElementById('canvas') as HTMLCanvasElement;
const session = await cameraKit.createSession({ liveRenderTarget });
Create a Source​

A Camera Kit source is one of the most fundamental and critical parts of a Camera Kit Web application. This is the media that you want augment with your Lenses. Typically, this would be your webcam but it could be a video or even an image. In this demo, we'll be using your webcam as your Camera Kit source.

To obtain a video from the user's webcam, we'll use the MediaDevices API. Understanding of this API and management of MediaStreams is an important part to creating a robust video application. Click here for some reading material to get better acquainted with these APIs. For the purposes of this demo, we'll keep it quite simple.

Let's start by getting a MediaStream from the user's default webcam:

const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: true,
});

We can now set this MediaStream as the source for our Camera Kit session:

await session.setSource(mediaStream);

Now that we have a source set, we can tell Camera Kit to start rendering frames to our canvas:

await session.play();
Seeing Your Webcam​

Before we add a Lens, we're at a place where we can see your webcam image in your app.

In your terminal, run the following command:

npm run dev

You should see that your Vite server is now running. Visit http://localhost:5173/ in your browser and accept the camera permissions prompt. You should now see your webcam image in your app.

Fetching & Applying Lenses​

We're almost there!

The last step is to apply a Lens to your session. Login to the My-Lenses to find IDs for your specific Lenses and Lens Groups and then load and apply a Lens:

const lens = await cameraKit.lensRepository.loadLens(
  '<YOUR_LENS_ID>',
  '<YOUR_LENS_GROUP_ID>'
);

await session.applyLens(lens);

You should now see your Lens applied to your video!

4. Putting It All Together​

When we put it all together, your code should look like this:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Camera Kit Web App</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import { bootstrapCameraKit } from '@snap/camera-kit';

(async function () {
  const cameraKit = await bootstrapCameraKit({
    apiToken: '<YOUR_API_TOKEN>',
  });
  const liveRenderTarget = document.getElementById(
    'canvas'
  ) as HTMLCanvasElement;
  const session = await cameraKit.createSession({ liveRenderTarget });
  const mediaStream = await navigator.mediaDevices.getUserMedia({
    video: true,
  });

  await session.setSource(mediaStream);
  await session.play();

  const lens = await cameraKit.lensRepository.loadLens(
    '<YOUR_LENS_ID>',
    '<YOUR_LENS_GROUP_ID>'
  );

  await session.applyLens(lens);
})();

5. You Did It​

That's all folks! You just successfully created your first Camera Kit Web app! I hope this guide served as a good starting place for your journey with Camera Kit Web. Please be sure to review our documentation for further resources. And as always, feel free to reach out to us on the Snap AR Discord if you have any questions!

Was this page helpful?
Yes
No