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:

  • Glasses try-on.
  • 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>
  <!-- Div element where AR preview will be inserted -->
  <div style='width: 640px; height: 360px' id='deepar-div'></div>
  <!-- Initialize DeepAR and load AR effect/filter -->
  <script>
    (async function() {
      const deepAR = await deepar.initialize({
        licenseKey: 'your_license_key_here',
        previewElement: document.querySelector('#deepar-div'),
        effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
      });
    })();
  </script>
</body>
</html>

Alternatively, you can import DeepAR as an ES6 module.

Via <script type='module'>.

<script type='module'>
  import * as deepar from 'https://cdn.jsdelivr.net/npm/deepar/js/deepar.esm.js';
</script>

Or via dynamic import.

const deepar = await import('https://cdn.jsdelivr.net/npm/deepar/js/deepar.esm.js');

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', 
  previewElement: document.querySelector('#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();

Record a video.

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

Background blur​

Enable background blur with strength 5.

await deepAR.backgroundBlur(true, 5)

Background replacement​

This is also known as background removal or green screen effect.

Enable background replacement with an image of a sunny beach.

await deepAR.backgroundReplacement(true, 'images/sunny_beach.png')

Callbacks​

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

await deepAR.switchEffect('path/to/shoe-try-on-filter');
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!');
    }
};

See all available callbacks here.

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

delete deepAR.callbacks.onFeetTracked;

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();

Providing your own canvas for rendering​

Create canvas directly in the HTML:

<canvas width='1280' height='720'></canvas>

Or you can create it in Javascript.

const canvas = document.createElement('canvas');
// Set canvas size, accounting screen resolution (to make it look 🤌 even on high definition displays)
const canvasSize = { width: 640, height: 360 };
const dpr = window.devicePixelRatio || 1;
canvas.style.maxWidth = `${canvasSize.width}px`;
canvas.style.maxHeight = `${canvasSize.height}px`;
canvas.width = Math.floor(canvasSize.width * dpr);
canvas.height = Math.floor(canvasSize.height * dpr);

⚠️ Note: Be sure to set width and height properties of the canvas!

You can always change the canvas dimensions and they don't have to match the input video resolution. DeepAR will fit the input camera/video stream correctly to any canvas size.

You pass the canvas when initializing DeepAR.

await deepar.initialize({
  canvas: canvas, 
  // ...
});