Create an account: https://developer.deepar.ai/signup.
Create a project: https://developer.deepar.ai/projects.
Add a web app to the project. Note that you need to specify the domain name which you plan to use for hosting the app.

⚠️ Note that license key is only required when deploying to production (non-localhost) domain.

Installation

Using npm:

$ npm install deepar

Using yarn:

$ yarn add deepar

Bundler setup

We recommend using a bundler to correctly include assets like DeepAR effects files.

For example, if using Webpack, add this to your webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        include: [
          path.resolve(__dirname, 'effects/'),
        ],
        type: 'asset/resource',
      },
    ],
  },
  // ...

Canvas

DeepAR requires a canvas element for the preview of camera, masks, filters and effects. You can add it directly in the HTML.

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

Or you can create it in Javascript.

const canvas = document.createElement("canvas");
canvas.width = 1280;
canvas.height = 720;

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

Or you can create it in Javascript.

let canvas = document.createElement("canvas");

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

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>
    <script>
      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>
  </head>

<body>
  <canvas width="1280" height="720" id="deepar-canvas"></canvas>
</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';
import deeparEffect from './effects/effectFile'

const deepAR = await deepar.initialize({
    licenseKey: 'your_license_key_here',
    canvas: document.getElementById('deepar-canvas'),
    effect: deeparEffect
});

Switch effects

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

Places you can get DeepAR effects:

Download a free filter pack: https://docs.deepar.ai/deep-ar-studio/free-filter-pack.
Visit DeepAR asset store: https://www.store.deepar.ai/
Create your own filters with DeepAR Studio.

Load an effect using the switchEffect method:

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

Take screenshot or video

Take a screenshot.

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

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

License

Please see: https://developer.deepar.ai/customer-agreement

Keywords

FAQs

What is deepar?

Is deepar popular?

Is deepar well maintained?

Package last updated on 01 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install