deepar-agora-extension

deepar-agora-extension

This is the DeepAR Agora extension for Web. Read more about Agora extensions here https://docs.agora.io/en/extension_customer/landing-page.

DeepAR Extension is just a wrapper around the DeepAR Web that simplifies the integration with the Agora RTC platform. For more information on DeepAR visit https://www.deepar.ai.

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 works only in the browser (not Node.js).

Prerequisites

In order to use the DeepAR Web extension you need to set up a license key for your web app on developer.deepar.ai.

1. Create an account: https://developer.deepar.ai/signup.
2. Create a project: https://developer.deepar.ai/projects.
3. 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.

Sample Demo

You can test our sample demo app to test out the DeepAR Agora Extension.

🔥 It is free! 🔥

See the official quickstart example here: https://github.com/DeepARSDK/quickstart-agora-web-extension

Documentation

Once the extension is initialized with Agora, the DeepAR SDK is used very much the same as plain DeepAR Web.

Visit the official DeepAR docs for Web SDK here: https://docs.deepar.ai/category/deepar-sdk-for-web

How to use the DeepAR Web Extension

Install

You need both DeepAR Web extension and Agora RTC packages.

Using npm:

npm install deepar-agora-extension agora-rtc-sdk-ng

Using yarn:

yarn add deepar-agora-extension agora-rtc-sdk-ng

Imports

Import VideoExtension and AgoraRTC.

import { VideoExtension } from 'deepar-agora-extension';
import AgoraRTC from 'agora-rtc-sdk-ng'

Extension setup

Create a div tag that will be used as a container for camera preview:

<div class="video-container"></div>

Be sure to set the width and height of the div!

<style>
    .video-container{
        width: 640px;
        height: 480px;
    }
</style>

Initialize DeepAR extension.

const videoExtension = new VideoExtension({
    licenseKey: 'your_license_key_here', // create the license key here https://developer.deepar.ai/projects
    onInitialize: (deepAR) => {
      // at this point DeepAR is initialized and can be used normally
    },
});

Following code is standard Agora extension setup.

//register extension
AgoraRTC.registerExtensions([videoExtension]);

//create DeepAR extension processor
const processor = videoExtension.createProcessor();

//create CameraVideoTrack
const videoTrack = await AgoraRTC.createCameraVideoTrack();

//piping processor
videoTrack.pipe(processor).pipe(videoTrack.processorDestination);

await videoTrack.play(document.querySelector('.video-container'), {mirror: false});

You can use the deepAR object normally as in the standard DeepAR Web SDK. See API reference here.

Access it through the VideoExtension's onInitialize callback:

const videoExtension = new VideoExtension({
  // ...
  onInitialize: (deepAR) => {
    // at this point DeepAR is initialized and can be used normally
  }
  // ...
});

Load effects

AR 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:

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

Supported browsers

Both desktop and mobile browsers are supported by DeepAR.

Desktop

• Google Chrome 66+
• Safari 11.1+
• Firefox 60+
• Edge 42+

iOS

• Safari on iOS 11+

Android

• Google Chrome 66+

License

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