ReactNative Demo

The GlamAR Flutter SDK provides an easy way to embed GlamAR’s WebView-based Augmented Reality experience inside your Flutter applications. It enables skin analysis

• Real-time Skin analysis
• Face tracking and analysis
• Snapshot support
• Simple Flutter APIs that mirror the native Android SDK

Features

• Camera and image-based preview modes
• WebView-based rendering (headless preload + visible attach)
• Snapshot functionality

Clone the repository

To clone the repository:

git clone https://github.com/pixelbin-io/glamar-flutter/tree/v1.0.0

You can follow a thorough guide click here

Prerequisites

To follow along you should have basic knowledge of creating web apps with Javascript, React, Android or iOS and their ecosystem. In this tutorial we are going to use:

• Your access key must be setup under Pixelbin > GlamAR console. If not completed , click here
• Under GlamAR > Skin Analysis, should have atleast one app with its appId

Visit Getting Started Page if access key or SKU has not been created

Installation

Install dependencies

npm install

Initialization

Open the App.tsx file in the root of project and look for this function. Update the accessKey to your own key.

GlamAr.init({
  accessKey: "Your_Access_Key", // required
  category: "skinanalysis"
  configuration: {
    skinAnalysis: {
      appId: "Your_SkinApp_Id", // required
    },
  },
});

Run Locally

1. In the terminal , start the Metro bundler

npx react-native start

2. Open another terminal in parallel and run the following commands to build and run the app
   • Andorid

   npx react-native run-android
   • iOS

   npx react-native run-ios