DeepAR SDK for Web is an augmented reality SDK that allows users to integrate advanced, Snapchat-like face lenses in the browser environment. It supports face masks, effects, multiple face tracking, natural image tracking. The hair segmentation and emotion tracking are not supported.
The SDK requires an internet connection.

To run the DeepAR SDK for Web in the browser, you first need to sign up and create your DeepAR account. If you haven't done that by now, you can do it here: DeepAR

After you’ve signed up and logged in to the DeepAR, you can create your new project.

Go to the Projects and click the + icon to create a new project.

Under Applications choose Add web app.

For App name choose any name you want, and for Domain set your domain.

IMPORTANT!!!

You need to enter the DOMAIN NAME, not the URL where your app is running.

E.g. if your app is running on

https://my_domain_name.com/my_ar_app.html

the domain name you enter is: my_domain_name.com

Make sure to leave out any http or https parts.

Read more on domains here:

https://domains.google/intl/en/learn/the-difference-between-a-url-domain-website-more.html#/

Now just hit Create app, and you will get your license key (app key).

After you have the license key, create the HTML document and add the canvas element, like this:

<!DOCTYPE HTML>
<html>
<head>
<title>DeepAR</title>
<style>
body {
margin: 0px;
padding: 0px;        
}
</style>
</head>
<body>
<canvas id="deepar-canvas"></canvas>
</body>
</html>

Copy the following files from the SDK package to the folder where your index.html is located:

  • lib/deepar.js

  • lib/deepar.wasm

  • models/models-68-extreme.bin

  • aviators

IMPORTANT:

In production, make sure to set correct Content-Type headers for the DeepAR SDK lib and effect files. It is advised to use some kind of compression, either gzip or brotli, in which case you will have to set the correct Content-Encoding header too.

  • lib/deepar.js - application/javascript

  • lib/deepar.wasm - application/wasm

  • models/models-69-extreme.bin - binary/octet-stream or application/octet-stream

  • effect files - binary/octet-stream

Paste the following code to your index.html, just before the closing body tag:

<script type="text/javascript" src="lib/deepar.js"></script>
<script type="text/javascript">

  // Initialize the DeepAR object
  var deepAR = DeepAR({
    licenseKey: 'your license key goes here',
    canvasWidth: window.innerWidth,
    canvasHeight: window.innerHeight,
    canvas: document.getElementById('deepar-canvas'),
    numberOfFaces: 1, // how many faces we want to track min 1, max 4
    onInitialize: function() {
      // start video immediately after the initalization, mirror = true
      deepAR.startVideo(true);
      // load the aviators effect on the first face into slot 'slot'
      deepAR.switchEffect(0, 'slot', './aviators', function() {
        // effect loaded
      });
    }
  });

  // download the face tracking model
  deepAR.downloadFaceTrackingModel('models/models-68-extreme.bin');
</script>


Testing the script above requires a web server that supports application/wasm mime type. You can use our server.py script (inside example folder) which starts the python simple HTTP server with wasm mime type. Copy it to the folder where your index.html is located, run python server.py and, in your browser, go to http://localhost:8888

Did this answer your question?