Native iOS

Embedding TutAR 3D viewer in a native iOS app

Prerequisites

• This guide expects basic iOS development knowledge with kotlin

• Get a Connect3D Vendor Account from TutAR by sending a mail at <[e-mail]>.

• Generate an API key from the Connect3D dashboard

Getting User Permissions

The AR functionality in the viewer requires Camera access, Make sure to take camera permission from the user.

info.plist

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

Add Embedding

Refer the below example implementation using the native WKWebView

ContentView.swift

// Example Implementation

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL?
    
    func makeUIView(context: Context) -> WKWebView {
        let preference = WKWebpagePreferences();
        preference.allowsContentJavaScript = true
        
        let configuration = WKWebViewConfiguration()
        configuration.defaultWebpagePreferences = preference
        configuration.allowsInlineMediaPlayback = true
        
        let webView = WKWebView(frame: .zero, configuration: configuration)
        webView.uiDelegate = context.coordinator

       return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let _url = url else { return }
        let request = URLRequest(url: _url)
        uiView.load(request)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, WKUIDelegate {
        var parent: WebView

        init(_ parent: WebView) {
            self.parent = parent
        }

        func webView(
            _ webView: WKWebView,
            requestMediaCapturePermissionFor origin: WKSecurityOrigin,
            initiatedByFrame frame: WKFrameInfo,
            type: WKMediaCaptureType,
            decisionHandler: @escaping (WKPermissionDecision) -> Void
        ) {

            decisionHandler(.grant)
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            WebView(url: URL(string: "https://web.tutar.app?api-key=<>&user-id=<>"))
                .navigationTitle("TutAR - WKWebView")
        }
    }
}


#Preview {
    ContentView()
}