Tích hợp trải nghiệm AR bản Web.

• Tài liệu này giới thiệu Xense AR bản Web, cho phép tích hợp tính năng của Xense AR với ứng dụng bên thứ 3 sử dụng Webview.
• Hỗ trợ tích hợp với project Flutter và React Native.

1. Flutter Project

• Truy cập Template tích hợp cho Flutter project  để tải về (template này đã chứa các package cần thiết cho việc tích hợp).
• Follow hướng dẫn trong README file cho Flutter project 

2. React Native Project

• Truy cập Template tích hợp cho React Native project  để tải về (template này đã chứa các package cần thiết cho việc tích hợp).
• Follow hướng dẫn trong README file cho React Native project .

3. Mở trải nghiệm AR bên ngoài ứng dụng

• Nếu không muốn tích hợp module AR vào ứng dụng của bạn, bạn có thể thực hiện mở tính năng AR thông qua Appclip (trên iOS), hoặc trình duyệt Chrome (trên Android)

• Hướng dẫn trên Flutter Project: thêm dependency url_launcher, tiến hành mở link với các tham số được cung cấp bởi Xense. Phía dưới là đoạn code minh họa việc mở ứng dụng AR trên 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';
   
    // Đường dẫn phía trên do Xense cung cấp.
    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"),
            ),
            ),
        ),
        );
    }
    }

• Hướng dẫn trên React Native Project: tiến hành mở link với các tham số được cung cấp bởi Xense. Phía dưới là đoạn code minh họa việc mở ứng dụng AR trên 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' },
    });