Hướng dẫn tích hợp Xense AR WebGL SDK trên iOS React Native app.

1. Tải WebGL SDK Tại đây

2. Mở .xcworkspace của folder ios trong xCode.

2.1. Copy XenseARWebGL.framework vào folders Frameworks của project. Trong General sửa Embed thành Embed & Sign.

2.2. Thêm các file sau vào project để sử dụng SDK.

• Tạo file XenseARWebview.swift

    import Foundation
    import React
    import XenseARWebGL
    import UIKit
   
    @objc(XenseARWebview)
    class XenseARWebview : NSObject {
        var webView: WKWebView!
        var objcController: ViewControllerSDK!
        var webVC: UIViewController!
      
        @objc func dismissSelf() {
            self.webVC?.dismiss(animated: true, completion: nil)
            self.webVC = nil
        }
      
        @objc func addCloseButton(){
          NSLayoutConstraint.activate([
          self.webView.topAnchor.constraint(equalTo: self.webVC.view.topAnchor),
          self.webView.bottomAnchor.constraint(equalTo: self.webVC.view.bottomAnchor),
          self.webView.leadingAnchor.constraint(equalTo: self.webVC.view.leadingAnchor),
          self.webView.trailingAnchor.constraint(equalTo: self.webVC.view.trailingAnchor)
        ])
        
        let closeButton = UIButton(type: .system)
        closeButton.setTitle("X", for: .normal)
        closeButton.titleLabel?.font = UIFont.systemFont(ofSize: 28, weight: .bold)
        closeButton.setTitleColor(.white, for: .normal)
        closeButton.backgroundColor = UIColor.black.withAlphaComponent(0.6)
        closeButton.layer.cornerRadius = 25
        closeButton.translatesAutoresizingMaskIntoConstraints = false
        closeButton.addTarget(self, action: #selector(self.dismissSelf), for: .touchUpInside)
        
        self.webVC.view.addSubview(closeButton)
        
        NSLayoutConstraint.activate([
          closeButton.topAnchor.constraint(equalTo: self.webVC.view.safeAreaLayoutGuide.topAnchor, constant: 16),
          closeButton.trailingAnchor.constraint(equalTo: self.webVC.view.trailingAnchor, constant: -16),
          closeButton.widthAnchor.constraint(equalToConstant: 50),
          closeButton.heightAnchor.constraint(equalToConstant: 50)
        ])
      }
      
        func topViewController() -> UIViewController? {
            var top = UIApplication.shared.windows.first { $0.isKeyWindow }?.rootViewController
            while let presented = top?.presentedViewController {
                top = presented
            }
            return top
        }
      
        @objc
        func openWebview(_ urlString: String) {
            DispatchQueue.main.async {
            print("URL: \(urlString)");
            self.webVC = UIViewController()
            self.webVC.modalPresentationStyle = .overFullScreen
            self.webView = WKWebView(frame: UIScreen.main.bounds)
          
            self.webVC.view.addSubview(self.webView)
            self.objcController = ViewControllerSDK(view: self.webVC.view, webView: self.webView)
            self.objcController.loadURL(urlString)
          
            self.addCloseButton()
          
            if let topVC = self.topViewController() {
                topVC.present(self.webVC, animated: true, completion: nil)
                }
        }
      }
    }
• Tạo file XenseARWebview.m

    #import <Foundation/Foundation.h>
    #import <React/RCTBridgeModule.h>
   
    @interface RCT_EXTERN_MODULE(XenseARWebview, NSObject)
        RCT_EXTERN_METHOD(openWebview:(NSString *)urlString)
    @end
• Thêm nội dung sau vào Bridging Header

    #import <React/RCTBridgeModule.h>

3. Mở trải nghiệm từ React Native

• Trên React Native project, tại giao diện muốn mở trải nghiệm, thêm đoạn code sau (linh hoạt sử dụng):

    const { XenseARWebview } =NativeModules;
    const webUrl="https://s3.educationxr.vn/ar-world/Demo/XenseARWebGL/NoLog/WebXR/index.html?worldID=NoelMoMo&blockID=3e2a6da2-e248-4dd7-9f09-d5ffbaa17b31&modelScale=1.25";
    const handleOpenAR= () => {
        XenseARWebview.openWebview(webUrl);
    };

Trong đó: webUrl được cung cấp bởi Xense