Skip to main content

Getting started with DeepAR Web

DeepAR Web is an augmented reality library that allows users to integrate advanced, Snapchat-like face and footwear effects in the browser.

DeepAR Web supports:

  • Face filters and masks
  • Background replacement
  • Background blur
  • Shoe try-on
  • AR mini-games

DeepAR Web is hosted on NPM. Check out https://www.npmjs.com/package/deepar. There you can find all the basic API integration and setup.

Prerequisites​

To follow along you should have basic knowledge of creating web apps with Javascript and it's ecosystem. In this tutorial we are going to use:

NPM - Javascript package manager. Webpack - Bundler for your javascript apps. Don't worry if you don't have a lot of experience with these (or any experience at all). It is pretty straightforward to use and we will explain everything along.

Install node.js to be able to use NPM and Webpack if you haven't already.

Set up DeepAR account​

DeepAR developer portal is used to:

  • Download DeepAR SDK.
  • Access documentation and examples.
  • Manage your projects and app license.

You need to set up a DeepAR account here https://developer.deepar.ai/.

DeepAR License Key​

To deploy your DeepAR web apps it is required to use DeepAR license key.

🔥 DeepAR offers unlimited FREE licences for testing and small projects. 🔥

  1. On developer portal, go to projects and click + New Project.
  2. Enter the name of your project. For example "My First AR App".
  3. Choose a FREE plan.
  4. Under Web App choose + Add App.
  5. Enter the domain name under which you plan to deploy your app.

    ⚠️ IMPORTANT ⚠️
    You need to enter the DOMAIN NAME, not the URL where your app is running.
    For example, if your app is running on
    > https://www.domain.com/try-on/glasses
    the domain you need to enter is www.domain.com.
    Be sure to leave out any protocol name (like https) and additional paths (like try-on/glasses).

🦁 Wildcard domains​

DeepAR now support wildcard domains (eg. *.deepar.ai) as an enterprise feature subject to manual review. If you need to use a wildcard domain, please contact us.

Now you have a valid license key for your DeepAR web app. Note that you can delete existing or create new unlimited free projects.

Demo project​

We have a demo project setup on GitHub that lets you test out DeepAR really quickly and it serves as a getting started project.

Check out the DeepAR Web Quickstart project on GitHub!

Clone the project.

git clone https://github.com/DeepARSDK/quickstart-web-js-npm.git

Install DeepAR Web and Webpack with NPM.

npm install

Run the demo.

npm run dev

If the browser doesn't open automatically, open http://localhost:8888.

Getting started​

There are two main ways to get deepar.js in your JavaScript project: via script tags or by installing it from NPM and using a build tool like Parcel, WebPack, or Rollup.

via Script tag​

Add the following code to an HTML file:

<html>
<head>
  <!-- Load deepar.js -->
  <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"> </script>
</head>

<body>
  <!-- Canvas element for AR preview -->
  <canvas width="640" height="360" id="deepar-canvas"></canvas>
  <!-- Initialize DeepAR and load AR effect/filter -->
  <script>
    (async function() {
      const deepAR = await deepar.initialize({
        licenseKey: 'your_license_key_here',
        canvas: document.getElementById('deepar-canvas'),
        effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
      });
    })();
  </script>
</body>
</html>

via NPM​

Add deepar.js to your project using yarn or npm.

Note: Because we use ES2017 syntax (such as import), this workflow assumes you are using a modern browser or a bundler/transpiler to convert your code to something older browsers understand. However, you are free to use any build tool that you prefer.

import * as deepar from 'deepar';

const deepAR = await deepar.initialize({
  licenseKey: 'your_license_key_here', 
  canvas: document.getElementById('deepar-canvas'),
  effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators' 
});

Switch effects​

AR filters are represented by effect files in DeepAR. You can load them to preview the effect.

Places you can get DeepAR effects:

Load an effect using the switchEffect method:

await deepAR.switchEffect('path/to/effect/alien');

Take screenshot or video​

Take a screenshot.

// The image is a data url.
const image = await deepAR.takeScreenshot();

Shoot a video.

deepAR.startVideoRecording();
// Video is now recording...
// When user is ready to stop recording.
const video = await deepAR.finishVideoRecording();

Callbacks​

DeepAR has some callbacks you can implement for addition information. For example, to check if feet are visible in the camera preview.

await deepAR.switchEffect('https://cdn.jsdelivr.net/npm/deepar/effects/Shoe');
deepAR.callbacks.onFeetTracked = (leftFoot, rightFoot) => {
    if(leftFoot.detected && rightFoot.detected) {
        console.log('Both foot detected!');
    } else if (leftFoot.detected) {
        console.log('Left foot detected!');
    } else if (rightFoot.detected) {
        console.log('Right foot detected!');
    } else {
        console.log('No feet detected!');
    }
};

To remove callback if you don't need it anymore.

deepAR.callbacks.onFeetTracked = undefined;

Different video sources​

DeepAR will by default use the user facing camera. It will also ask the camera permission from the user.

Use the back camera on the phones:

const deepAR = await deepar.initialize({
  // ...
  additionalOptions: {
      cameraConfig: {
          facingMode: 'environment'
      }
  }
});

Set up your own camera or custom video source:

const deepAR = await deepar.initialize({
  // ...
  additionalOptions: {
      cameraConfig: {
          disableDefaultCamera: true
      }
  }
});

// HTMLVideoElement that can contain camera or any video.
const video = ...;

deepAR.setVideoElement(video, true);

Initialize DeepAR but start the camera later. This is used when you do not want to ask the camera permission right away.

const deepAR = await deepar.initialize({
    // ...
    additionalOptions: {
        cameraConfig: {
            disableDefaultCamera: true
        }
    }
});

// When you want to ask the camera permission and start the camera.
await deepAR.startCamera();