GlassArView - Modern AR Glasses Try-On Widget

✨ Features

• 🎯 Real-time AR glasses try-on with webcam integration
• ⚡ Modern React 18 with TypeScript support
• 🚀 High-performance WebGL2 rendering engine
• 📱 Responsive design - works on mobile and desktop
• 🎨 Customizable UI - configurable colors and styling
• 🔧 Easy integration - simple JavaScript API
• ♿ Accessible - WCAG compliant components
• 📦 Lightweight - optimized bundle size
• 🛡️ Type-safe - full TypeScript support

🚀 Quick Start

Option 1: CDN Integration (Recommended)

Add this single line to your HTML:

<script src="https://unpkg.com/glassarview@latest/dist/widget-loader.js"></script>

The widget will automatically initialize and add a "Try On Glasses" button to your page.

Option 2: NPM Installation

npm install glassarview

import React from 'react';
import { GlassArView } from 'glassarview';
import 'glassarview/style';

function App() {
  return (
    <GlassArView
      modelName="rayban_aviator_or_vertFlash"
      canvasWidth={500}
      canvasHeight={500}
      buttonBackgroundColor="#FFE5B4"
      buttonFontColor="#222"
    />
  );
}

Option 3: Advanced Configuration

<script 
  src="https://unpkg.com/glassarview@latest/dist/widget-loader.js"
  data-model-name="oakley_holbrook"
  data-button-text="Try These Glasses"
  data-primary-color="#FF6B35"
  data-placement-selector="#product-images"
></script>

📖 API Reference

GlassArView Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelName | string | "rayban_aviator_or_vertFlash" | SKU of the glasses model to display | | canvasWidth | number | 500 | Width of the AR canvas in pixels | | canvasHeight | number | 500 | Height of the AR canvas in pixels | | buttonBackgroundColor | string | "#FFE5B4" | Background color of control buttons | | buttonFontColor | string | "#222" | Text color of control buttons | | onModelLoad | (sku: string) => void | - | Callback when a model is loaded | | onAdjustStart | () => void | - | Callback when adjust mode starts | | onAdjustEnd | () => void | - | Callback when adjust mode ends | | onError | (error: string) => void | - | Callback when an error occurs | | className | string | - | Custom CSS class name | | showLoading | boolean | true | Whether to show loading indicator | | loadingText | string | "Loading..." | Custom loading text |

Widget Loader API

// Initialize widget programmatically
window.GlassArViewWidget.init({
  modelName: 'rayban_aviator_or_vertFlash',
  canvasWidth: 500,
  canvasHeight: 500,
  buttonBackgroundColor: '#FFE5B4',
  buttonFontColor: '#222',
  buttonText: 'Try On Glasses',
  placementSelector: '#product-images',
  onModelLoad: (sku) => console.log('Model loaded:', sku),
  onError: (error) => console.error('Error:', error)
});

// Load a different model
window.GlassArViewWidget.loadModel('oakley_holbrook');

// Destroy widget
window.GlassArViewWidget.destroy();

🎨 Available Models

The component uses models from Jeeliz GlassesDB. Browse available models in the glassesSKU.csv file.

Test Model Availability

curl https://glassesdbcached.jeeliz.com/testSku/rayban_aviator_or_vertFlash

🛠️ Development

Prerequisites

• Node.js 18+
• npm 9+

Setup

# Clone the repository
git clone https://github.com/lastcode802/glassarview.git
cd glassarview

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

Available Scripts

• npm run dev - Start Vite development server
• npm run build - Build library for production
• npm run build:widget - Build widget loader
• npm run build:app - Build demo app
• npm run preview - Preview production build
• npm test - Run tests with Vitest
• npm run test:coverage - Run tests with coverage
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors
• npm run format - Format code with Prettier
• npm run type-check - Run TypeScript type checking

🧪 Testing

The project uses Vitest for testing with React Testing Library:

# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Run tests with coverage
npm run test:coverage

📚 Storybook

View component examples and documentation:

npm run storybook

Visit http://localhost:6006 to see the Storybook interface.

🔧 Technical Details

Architecture

• React 18 with modern hooks and functional components
• TypeScript for type safety and better developer experience
• Vite for fast development and optimized builds
• Jeeliz VTO Widget for AR rendering and face detection
• WebGL2 for high-performance graphics rendering

Browser Compatibility

• WebGL2 (preferred) - Full feature support
• WebGL1 with OES_TEXTURE_FLOAT or OES_TEXTURE_HALF_FLOAT extensions
• Modern browsers - Chrome, Firefox, Safari, Edge
• Mobile support - iOS Safari, Chrome Mobile, Samsung Internet

Performance

The component automatically adapts to your device's performance:

• GPU usage is optimized for real-time rendering
• Face detection runs at up to 7 FPS for optimal latency
• Rendering quality adjusts based on device capabilities

🌐 Platform Integration

Shopify

<div id="glassarview-container-{{ product.id }}"></div>
<script src="https://unpkg.com/glassarview@latest/dist/widget-loader.js"></script>
<script>
  window.GlassArViewWidget.init({
    modelName: '{{ product.metafields.glasses.model_sku | default: "rayban_aviator_or_vertFlash" }}',
    buttonBackgroundColor: '{{ settings.primary_color | default: "#FFE5B4" }}'
  });
</script>

WooCommerce

<div id="glassarview-container-<?php echo $product->get_id(); ?>"></div>
<script src="https://unpkg.com/glassarview@latest/dist/widget-loader.js"></script>
<script>
  window.GlassArViewWidget.init({
    modelName: '<?php echo get_post_meta($product->get_id(), "_glasses_model_sku", true) ?: "rayban_aviator_or_vertFlash"; ?>',
    buttonBackgroundColor: '<?php echo get_theme_mod("primary_color", "#FFE5B4"); ?>'
  });
</script>

📊 Analytics Integration

Google Analytics 4

window.GlassArViewWidget.init({
  onModelLoad: (modelSku) => {
    gtag('event', 'ar_model_loaded', {
      event_category: 'AR_Try_On',
      event_label: modelSku
    });
  },
  onAdjustStart: () => {
    gtag('event', 'ar_adjust_started', {
      event_category: 'AR_Try_On'
    });
  }
});

Facebook Pixel

window.GlassArViewWidget.init({
  onModelLoad: (modelSku) => {
    fbq('track', 'ViewContent', {
      content_name: modelSku,
      content_category: 'Glasses'
    });
  }
});

🚨 Requirements

HTTPS Required

• Camera access requires HTTPS
• Widget won't work on HTTP sites

Browser Compatibility

• Chrome 67+
• Firefox 60+
• Safari 11.1+
• Edge 79+

Mobile Support

• iOS Safari 11.1+
• Chrome Mobile 67+
• Samsung Internet 7.2+

🆘 Troubleshooting

Camera Not Working

1. Ensure HTTPS is enabled
2. Check browser permissions
3. Try refreshing the page
4. Test on different browsers

Model Not Loading

1. Verify the SKU exists in GlassesDB
2. Check network connectivity
3. Try a different model SKU

Performance Issues

1. Reduce canvas size
2. Close other browser tabs
3. Update graphics drivers
4. Use a modern browser

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Write tests for new features
• Use Prettier for code formatting
• Follow ESLint rules
• Update documentation as needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built on top of Jeeliz VTO Widget
• Powered by WebGL and modern web technologies
• Community contributions and feedback

📞 Support

For support, please open an issue on GitHub or contact the maintainers.

Note: This component requires camera access for AR functionality. Users must grant camera permissions for the try-on experience to work.