Web AR Experience Integration

This document describes how to integrate the Web version of Xense AR into third-party applications using WebView or external browser/App Clip launch.

Supported platforms:

Flutter
React Native

1. Integration via WebView

Flutter Project

Download the integration template (includes required dependencies):
https://gitlab.com/educationxrmhmp-group/flutter-webar.git
Follow the setup instructions in the README:
https://gitlab.com/educationxrmhmp-group/flutter-webar/-/blob/main/README.md?ref_type=heads

React Native Project

Download the integration template (includes required dependencies):
https://gitlab.com/educationxrmhmp-group/reactnative-webar.git
Follow the setup instructions in the README:
https://gitlab.com/educationxrmhmp-group/reactnative-webar/-/blob/main/README.md?ref_type=heads

2. Launch AR Experience Externally

If you do not want to embed the AR module inside your application, you can launch the AR experience externally:

iOS → via App Clip
Android → via Chrome browser

All URL parameters (worldID, blockID, command, indexUrl) are provided by Xense.

Flutter Implementation

Add the url_launcher dependency and open the URL using the parameters provided by Xense.

Below is a sample code snippet demonstrating how to launch the AR experience in a Flutter project.


  import 'dart:io';
  import 'package:flutter/material.dart';
  import 'package:url_launcher/url_launcher.dart';
 
  void main() {
  runApp(MyApp());
  }
 
  class MyApp extends StatelessWidget {
      const String worldID = 'blossom';
      const String blockID = '3e2a6da2-e248-4dd7-9f09-d5ffbaa17b31';
      const String command = 'data~eyJ0eXBlIjoic3RhcnROYXZpZ2F0aW9uIiwibG9jYXRpb25JRCI6IjkwMTcwZGIxLWQ5NTgtNDkyYy04NmNhLTI3NDIyMGQ2NmI3NiJ9';
      const String indexUrl = 'cdn.xensear.vn/custom-frontend/threejs_production/benhvienbachmai/HLOCTracking.html';
 
      String experienceUrlIOS =
      'https://appclip.apple.com/id'
      '?p=com.viettel.mhmp.ARWorld.Clip'
      '&worldID=$worldID'
      '&blockID=$blockID'
      '&command=$command'
      '&indexUrl=$indexUrl';
 
      String experienceUrlAndroid =
      'https://$indexUrl'
      '?worldID=$worldID'
      '&blockID=$blockID'
      '&command=$command'
      '&indexUrl=$indexUrl';
 
  // Above URLs are provided by Xense.
  Future<void> _openARExperience() async {
      if (Platform.isAndroid) {
          experienceUrl = androidExperienceUrl;
      }
 
      final Uri url = Uri.parse(experienceUrl);
 
      if (Platform.isAndroid) {
      await launchUrl(
          url,
          mode: LaunchMode.externalApplication,
      );
      } else {
          if (await canLaunchUrl(url)) {
              await launchUrl(
              url,
              mode: LaunchMode.externalApplication,
              );
          } else {
              print("Could not launch AR Experience");
          }
      }           
  }
 
  @override
  Widget build(BuildContext context) {
      return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(title: Text("Open AR Experience")),
          body: Center(
          child: ElevatedButton(
              onPressed: _openARExperience,
              child: Text("Open AR Experience"),
          ),
          ),
      ),
      );
  }
  }

React Native Implementation

Open the URL using the parameters provided by Xense.

Below is a sample code snippet demonstrating how to launch the AR experience in a React Native project.


    import { View, Button, StyleSheet, Platform, Alert } from 'react-native';
    import * as Linking from 'expo-linking';
 
    export default function HomeScreen() {
 
    const worldID = "mhmp_blossom";
    const blockID = "3e2a6da2-e248-4dd7-9f09-d5ffbaa17b31";
    const command = "data~eyJ0eXBlIjoic3RhcnROYXZpZ2F0aW9uIiwibG9jYXRpb25JRCI6IjkwMTcwZGIxLWQ5NTgtNDkyYy04NmNhLTI3NDIyMGQ2NmI3NiJ9";
    const indexUrl = "cdn.xensear.vn/custom-frontend/threejs_production/benhvienbachmai/HLOCTracking.html";
 
    const experienceUrlIOS =
    `https://appclip.apple.com/id?p=com.viettel.mhmp.ARWorld.Clip` +
    `&worldID=${worldID}` +
    `&blockID=${blockID}` +
    `&command=${command}` +
    `&indexUrl=${indexUrl}`;
 
    const experienceUrlAndroid =
    `https://${indexUrl}` +
    `?worldID=${worldID}` +
    `&blockID=${blockID}` +
    `&command=${command}` +
    `&indexUrl=${indexUrl}`;
 
    const openARExperience = async () => {
        const url =
        Platform.OS === 'android'
            ? experienceUrlAndroid
            : experienceUrlIOS;
 
        const supported = await Linking.canOpenURL(url);
        if (!supported) {
        Alert.alert('Error', 'Could not open AR Experience');
        return;
        }
 
        await Linking.openURL(url);
    };
 
    return (
        <View style={styles.container}>
        <Button title="Open AR Experience" onPress={openARExperience} />
        </View>
    );
    }
 
    const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    });