Revieve AR SDK

You can start using the AR SDK adding it in your project with this code:

              
  <script src="https://ar-sdk.revieve.com/revieve-ar-sdk.min.js"/>
              
            

React Component

If you have a React application, you can npm install [URL FROM REVIEVE] and then use it directly in your react application:

  import { RevieveARComponent } from 'revieve-ar-sdk';
  class MyComponent extends React.Component {
    render() {
      return <RevieveAR 
        image={image}
        partnerID="XXXXXX"
        skintone={2}
        applyFoundation={1}
        reduceRedness={{ value: 1, areas: [RevieveAR.masks.LEFT_CHEEK, RevieveAR.masks.RIGHT_CHEEK] }}
        />
    }
  }
          

Base JS Library

If you have a pure JS application or any other non-react application, you can use our underlying JS library directly.

  import { RevieveAR } from 'revieve-ar-sdk';
          

Basic configuration

The configuration of the library is defined trought a JSON object with these parameters:

• partnerID: A valid partner ID obtained from revieve. If you don't have a valid ID, please contact with us by email at info@revieve.com
• skintone: A value between 1 and 6 to define user's skin tone in Fitzpatrick scale.
• containerId(optional): Id of the container where you want to render the effects.

Initializing the JS object

You can initialize the library instantiating a new RevieveAR object. Please note that constructor needs two parameters:

• Configuration object (see Basic configuration section)
• A Base64 coded image or a HTML file object with the image

  var arImage = new RevieveAR({partnerID:'XXXXXXXX'}, image);
          

IMPORTANT!! After instantiating the JS library you need to call the method initialize. This method will send the image to the server to make the first analysis. Any of the methods to set filters will not work until you initialize the library properly.

Initialize method returns a promise. This promise is resolved if there aren't errors in the initilization process. If there are errors, the promise will be rejected. You can check error with control method hasError.

  arImage.initialize()
  .then(()=>{
    ...
  })
  .catch(()=> {
    ...
  });
          

Control methods

• hasError: returns a boolean indicating if there have been an error in the library process.
• getStatus: returns a JSON object with a detail of all the errors or warnings detected in image analysis.

Apply effects

Apply effects on the image automatically based on your product details or based on user input.

There are effects applied automatically to predefined areas like eyes. These methods are:

• reduceEyebags
• reduceCrowsFeet
• reduceDarkcircles

The parameter sets strength for the effect:

• 1.0 Applies maximum AR effect to counteract Eyebags, Dark circles, etc.
• 0.0 Applies no effect to counteract Redness, Eyebags, Dark circles, etc.

  arImage.reduceCrowsFeet ( 0.2 );
  arImage.reduceDarkcircles ( 0.4 );
  arImage.reduceCrowsFeet( 0 );
          

There are core methods that can be applied to a set of areas in the image. These methods are:

• reduceRedness
• reduceWrinkles
• brightenSkin

First parameter sets strength for the effect and second parameter sets the mask to apply the effect on. The possible values for this parameter are specified in RevieveAR.masks property and are:

• RevieveAR.masks.SKIN: 'Skin'
• RevieveAR.masks.FOREHEAD: 'forehead'
• RevieveAR.masks.FOREHEAD_WORRY_LINES: 'forehead worry lines'
• RevieveAR.masks.BETWEEN_BROWS_FROWN_LINES: 'between-brows frown lines'
• RevieveAR.masks.NOSELINE_BUNNY_LINES: 'noseline bunny lines'
• RevieveAR.masks.LEFT_SIDE_EYE_CROWS_FEET: 'left side eye crow's feet',
• RevieveAR.masks.RIGHT_SIDE_EYE_CROWS_FEET: 'right side eye crow's feet'
• RevieveAR.masks.LEFT_SIDE_TEARLINE: 'left side tearline'
• RevieveAR.masks.RIGHT_SIDE_TEARLINE: 'right side tearline'
• RevieveAR.masks.LEFT_EYEBAG: 'left eye bag'
• RevieveAR.masks.RIGHT_EYEBAG: 'right eye bag'
• RevieveAR.masks.EYEBROWS: 'Eyebrows'
• RevieveAR.masks.LEFT_CHEEK: 'left cheek'
• RevieveAR.masks.RIGHT_CHEEK: 'right cheek'
• RevieveAR.masks.LIPS: 'Lips'

  arImage.reduceRedness ( 0.5, [RevieveAR.masks.LEFT_CHEEK, RevieveAR.masks.RIGHT_CHEEK] );
  arImage.brightenSkin ( 0.2, [RevieveAR.masks.FOREHEAD]);
          

There are makeup methods that can be applied specifying the color of, for example, lipstick. These methods are:

• applyLipstick
• applyBlush
• applyFoundation

First parameter sets strength for the effect and second parameter sets the rgb, hex code or name of the color to apply. In the case of method applyFoundation, it only receives first paramenter.

  arImage.applyLipstick ( 0.8, 'red' );
  arImage.applyBlush ( 0.4, '#ee2378' );
  arImage.applyFoundation( 0.5 );
          

Display effects

You can get a div with modified image back from the instance like this:

  var afterImage = arImage.getResults();
          

And if you need the original, you can access it like this:

  var beforeImage = arImage.getImageBefore();
          

If you want to start from scratch, you can reset the instance:

  varImage.reset();