deepar
DeepAR Web is an augmented reality SDK
that allows users to integrate advanced, Snapchat-like
face lenses in the browser environment.
DeepAR Web supports:
- Face filters and masks.
- Background replacement.
- Background blur.
- Shoe try-on.
- AR mini-games.
❗ DeepAR Web requires an internet connection.
Documentation
License key
In order to use the DeepAR Web SDK you need to set up a license key for your web app on developer.deepar.ai.
- 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>
<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:
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();
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: {
disableDefaultCamera: true
}
});
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: {
disableDefaultCamera: true
}
});
deepAR.startCamera();
License
Please see: https://developer.deepar.ai/customer-agreement