Loading...

mirrAR Platform
Technical Documentation

List of supported features
iOS
Android
webAR
Real time virtual try-on (Earrings)
Real time virtual try-on (Necklaces)
Real time virtual try-on (Sets)
Real time virtual try-on (Rings)
Real time virtual try-on (Bracelets)
Real time virtual try-on (Watches)
Real time virtual try-on (Eyewear)
360° Images Support
Coming Soon
Coming Soon
3D files Support
Coming Soon
Coming Soon
Gallery Mode
Studio Mode
Product Filters
Jewellery Shine Simulation
Coming Soon
Augmented Reality Video Calling
Coming Soon
Coming Soon
Product Details
Advanced Product Details
Coming Soon
Coming Soon
User Profile
Coming Soon
Analytics
Wishlist
Coming Soon
Shopping Cart
Coming Soon
Security Mode
Coming Soon
Inventory Sharing

webAR Integration

<script></script>
let tryOnButton = document.getElementById('tryOnButton');
let script = document.createElement('script');
options = {
 "brandId":"2d49fe2f-707b-40db-a99a-f01e5b0fbfd9"
}
script.onload = () => {
  tryOnButton.onclick = () => {
     initMirrarUI("ER-1NARAYAN", options); // sku is the productCode/sku/designCode of the product onPDP and options is an object with product data
  }
}
script.src = "https://cdn.styledotme.com/general/scripts/mirrar-ui.js";
document.body.append(script);
.

Android SDK Integration

• How to import mirrAR android SDK

Step 1. File -> New -> New Module -> Import .jar/.aar and import your .aar.
Step 2. File -> Project structure -> Dependencies -> <all modules=""> -> (Add jar dependencies by clicking on the '+' icon then select app-release)</all>
Step 3. Go to build.gradle (Module: app-release) -> remove the 'dependencies'
Step 4. AndroidManifest.xml -> Set android:allowBackup="false"
Step 5. Add the following dependencies to the app level gradle file
implementation 'com.google.android.material:material:1.2.0-alpha01'
implementation 'com.google.firebase:firebase-ml-vision:24.0.1'
implementation 'com.google.firebase:firebase-ml-vision-face-model:19.0.0'
def camerax_version = "1.0.0-alpha05"
implementation "androidx.camera:camera-core:${camerax_version}"
implementation "androidx.camera:camera-camera2:${camerax_version}"
api 'com.squareup.retrofit2:converter-gson:2.7.1'
implementation 'com.squareup.okhttp3:logging-interceptor:4.4.0'
implementation 'com.squareup.okhttp3:okhttp:4.4.0'
api 'com.squareup.okhttp3:logging-interceptor:4.4.0'
api 'com.squareup.retrofit2:converter-scalars:2.4.0'
implementation 'com.amplitude:android-sdk:2.23.2'

• Enable view binding and java 8 by adding the following block in the app level gradle file
android{
...
  viewBinding {
    enabled = true
  }
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
...
}

• To show the viewer, add the following:

In the layout file of your activity:  

   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
/>

In your activity/fragment class, add the following  
JSONObject data = null;
   try {
      data = new JSONObject("{\"options\":{\"productData\":{\"category1\":{\"items\":[\"500005DMAABA04\",\"500005SFAABA02\",\"500005SFAABA09\"],\"type\":\"ear\"},\"category2\":{\"items\":[\"502118YEEAAA32\",\"502118YENAAA32\",\"502118YEOAAA32\"],\"type\":\"neck\"},\"category3\":{\"items\":[\"5027182ADABA02\",\"5027182AJABA02\",\"5027182AKABA02\"],\"type\":\"set\"},\"category4\":{\"items\":[\"502516NFEAAB32_N\",\"5027182ADABA02_N\",\"5027182AJABA02_N\"],\"type\":\"neck\"},\"category5\":{\"items\":[\"5031181DXAAA09\",\"5132181BUABA00\",\"5132181BWABA00\"],\"type\":\"set\"},\"category6\":{\"items\":[\"500005PFAAAA09\",\"500005PFAAAB22\",\"500006PEAAAA09\"],\"type\":\"neck\"}}}}");
} catch (JSONException e) {
    e.printStackTrace();
}

• Note: enable camera permission before initialising the fragment
MirrarFragment fragment = new MirrarFragment(""/*login ID*/, ""/*password*/, data /*json object*/);
getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment).commit();

R.id.container` is the container layout in which the viewer will be displayed.

iOS SDK Integration

• How to import mirrAR iOS SDK
Drag and drop the .framework file into your project
Xcode project > General > Scroll down to find "Frameworks, Libraries, and Embedded Content" Section > Switch from "Do not Embed" to "Embed & Sign"

• Initialisation
Step 1 -    
    NSDictionary *options =  @{
       @"productData": @{
               @"Necklaces": @{
                       @"items": @[@"1", @"2", @"3"],
                       @"type": @"neck"
               },
               @"Earrings": @{
                       @"items": @[@"1", @"2"],
                       @"type": @"ear"
               },
               @"Mangalsutras": @{
                       @"items": @[@"1", @"2", @"3"],
                       @"type": @"neck"
               },
               @"NecklaceSets": @{
                       @"items": @[@"1", @"2"],
                       @"type": @"set"
               },
               @"PendantSets": @{
                       @"items": @[@"1", @"2"],
                       @"type": @"set"
               }
       }
   };
Step 2 -  
  NSDictionary *loginParam = @{@"username": @"brand username here",
                                @"password": @"brand password here",
                                @"type": @"ios_sdk"};
Step 3 -    
    self.camera = [MARCameraViewController sharedInstance];
   self.camera.productData = options;
   self.camera.loginParams = loginParam;
Step 4 -    
    [self.navigationController pushViewController:self.camera animated:NO];