Skip to Content
SDKSDKsXenseAR Web AR SDKWeb AR

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.

  • Trong phiên bản hiện tại, Web AR SDK hỗ trợ:

    • Sử dụng dịch vụ VPS (Visual Positioning Service) tại các địa điểm đã đăng ký.
    • Hiển thị các nội dung AR cơ bản ở định dạng GLB, GLTF và Image.
    • Sử dụng tính năng Chỉ đường AR (AR Navigation).

  • Hỗ trợ tích hợp với project Flutter, React Native và 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. Native Project

Android project

Tải Template project  trước khi bắt đầu

  1. Mở file AndroidManifest.xml, bổ sung khai báo sau:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- ... -->
 
    <queries>
        <intent>
            <action android:name="android.support.customtabs.action.CustomTabsService" />
        </intent>
    </queries>
 
    <!-- ... -->
    <application>
        <!-- ... -->
    </application>
 
</manifest>
  1. Thêm dependency vào build.gradle của app.
plugins {
    <!-- ... -->
}
 
android {
    <!-- ... -->
}
 
dependencies {
    implementation("androidx.browser:browser:1.8.0")
    <!-- ... -->
}
  1. Tạo một class mới tên TwaManager, có nội dung copy từ Template project.
  2. Để mở trải nghiệm AR, tạo một instance của TwaManager
  • Chạy AR sử dụng hàm launchAR của TwaManager, nhận đầu vào các tham số
    • worldID: lấy tương ứng trong Portal
    • blockID: lấy tương ứng trong Portal
    • modelScale: lấy tương ứng trong Portal
    • indexUrl: được cung cấp bởi Xense
    • command: optional - để trống nếu không cần bắt đầu luồng chỉ đường ngay lập tức
    • locationID: optional - thông tin bổ sung cho command

iOS project

Tải Template project  trước khi bắt đầu

  1. Tạo file XenseARManager.swift và copy nội dung file từ Template project
  2. Add framework XenseARWebGL từ Template project, đổi Embed option thành Embed & Sign
  3. Thêm package https://github.com/weichsel/ZIPFoundation trong Frameworks, Libraries, and Embedded Content
  4. Để mở trải nghiệm AR, sử dụng class XenseARManager
  • Chạy AR sử dụng hàm launchAR của XenseARManager, nhận đầu vào các tham số
    • worldID: lấy tương ứng trong Portal
    • blockID: lấy tương ứng trong Portal
    • modelScale: lấy tương ứng trong Portal
    • indexUrl: được cung cấp bởi Xense
    • command: optional - để trống nếu không cần bắt đầu luồng chỉ đường ngay lập tức
    • locationID: optional - thông tin bổ sung cho command

4. 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' },
    });
Last updated on
React Native for iOSTrình tạo mã QR