This is the documentation and demo page of Revieve AR SDK.
Current version: 0.9
See it in action!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"/>
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] }}
/>
}
}
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';
The configuration of the library is defined trought a JSON object with these parameters:
You can initialize the library instantiating a new RevieveAR object. Please note that constructor needs two parameters:
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(()=> {
...
});
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:
The parameter sets strength for the effect:
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:
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:
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:
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 );
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();