Інтеграція 8th Wall для WebAR у мобільному додатку

8th Wall — платформа для WebAR на базі WebGL та кастомного SLAM-рушія, що працює прямо в браузері без ARKit/ARCore. Це означає, що AR-досвід запускається за посиланням або QR-кодом, без встановлення додатка. Для бізнесу це часто вирішальний аргумент: конверсія у «відкрив посилання» в рази вища, ніж «скачав додаток». Ми інтегрували 8th Wall у десятки мобільних додатків і знаємо, як обійти типові граблі.

Інтеграція в існуючий мобільний додаток будується через WKWebView (iOS) або WebView/Custom Tabs (Android), де 8th Wall-сцена рендериться всередині нативного контейнера. Або як standalone PWA з диплінкінгом з додатка. WebAR через 8th Wall дозволяє запускати AR-сцени в 3 рази швидше, ніж розробка нативного додатка, і потребує менших вкладень на старті. Вартість такої інтеграції починається від $3000 для базового сценарію.

Де зазвичай ламається

Камерний доступ всередині WKWebView. На актуальних версіях iOS Apple дозволила getUserMedia в WKWebView, але з застереженнями: mediaTypesRequiringUserActionForPlayback має бути налаштований, а allowsInlineMediaPlayback = true. Без цього 8th Wall не отримає доступ до камери та викине NotAllowedError. На Android ситуація простіша — сучасні версії Chrome WebView підтримують getUserMedia без специфічних флагів.

Продуктивність SLAM на бюджетних пристроях. Платформа 8th Wall використовує власний world tracking замість ARCore, що важче по CPU. На пристроях із Snapdragon 665 і нижче FPS у сцені з динамічним освітленням та кількома 3D-об'єктами падає до 18–22. Вирішується: зниження poly count моделі до 15k трикутників, вимкнення real-time shadows, використання baked lightmaps у GLTF. Наш досвід показує, що оптимізація сцени за цими правилами дає приріст FPS у 1,5–2 рази на слабких пристроях.

HTTPS-вимога. 8th Wall потребує secure context для camera API. Локальна розробка через localhost проходить, але staging на HTTP — ні. WKWebView у додатку працює з будь-яким URL при NSAllowsLocalNetworking, але для production-сцен потрібен валідний SSL.

Як забезпечити стабільну роботу камери в WKWebView?

1. Переконайтесь, що WKWebViewConfiguration налаштований правильно: allowsInlineMediaPlayback = true та mediaTypesRequiringUserActionForPlayback = [].
2. Реалізуйте WKUIDelegate з методом webView(_:requestMediaCapturePermissionFor:) та повертайте .granted.
3. Перевірте, що URL сцени завантажується за HTTPS (навіть у development використовуйте локальний сервер із SSL).
4. Для налагодження увімкніть NSAllowsLocalNetworking у Info.plist.

Чому продуктивність SLAM критична?

Порівняння WebAR (8th Wall) та нативного AR (ARKit/ARCore) за ключовими параметрами:

Як будуємо інтеграцію

Проєкт 8th Wall створюється в cloud IDE платформи — там же JavaScript/TypeScript сцени на базі A-Frame або Three.js + 8th Wall pipeline. Для нативної інтеграції:

Налаштування iOS (WKWebView)

let config = WKWebViewConfiguration() config.allowsInlineMediaPlayback = true config.mediaTypesRequiringUserActionForPlayback = [] let webView = WKWebView(frame: .zero, configuration: config) // Завантажте URL вашої 8th Wall сцени (HTTPS обов'язково) webView.load(URLRequest(url: URL(string: "https://ваш-домен.com/scene")!)) 

WKUIDelegate потрібен для перехоплення webView(_:requestMediaCapturePermissionFor:) — інакше діалог дозволу не з'явиться.

Android: Custom Tab vs WebView

Custom Tabs запускають повноцінний Chrome із підтримкою WebXR API та camera — кращий варіант. Нативний WebView потребує WebChromeClient з перевизначеним onPermissionRequest. Для seamless-інтеграції (без переходу в браузер) — WebView з кастомним UA-string, якщо платформа 8th Wall не визначає його як restricted.

Передача даних між нативним шаром та WebAR-сценою

Через WKScriptMessageHandler на iOS та addJavascriptInterface на Android. Типовий кейс: передати userId або SKU продукту в сцену, щоб та завантажила правильну 3D-модель із CDN.

Що входить у роботу

• Аналіз поточного стеку та версій (iOS/Android) — 1 день
• Проєктування архітектури WebView-контейнера з урахуванням пермішенів та бекенд-інтерфейсу — 2 дні
• Реалізація WebView-обгортки з кастомним WKUIDelegate / WebChromeClient — 3 дні
• Налаштування диплінкінгу та PWA-режиму (якщо необхідно) — 1 день
• Інтеграція та тестування на пристроях зі списку: iPhone 11+, Samsung Galaxy S10 та вище, Google Pixel 4+ — 2 дні
• Надання документації по збірці та налаштуванню — входить
• Підтримка на етапі модерації в App Store / Google Play (вимоги до камери та медіа) — включена

Ліцензування та обмеження

Платформа 8th Wall працює за підпискою: Starter, Pro, Enterprise. Ліцензія прив'язана до домену. Для white-label продукту або кількох клієнтських доменів — тільки Enterprise. Враховуйте це на етапі оцінки. Офіційна документація 8th Wall.

<key>NSCameraUsageDescription</key> <string>Для роботи WebAR потрібен доступ до камери</string> <key>NSAllowsLocalNetworking</key> <true/> 

Терміни та вартість

Вартість розраховується індивідуально після аналізу вимог до сцени та цільових пристроїв. Оцінимо проєкт безкоштовно — пишіть, обговоримо деталі. Зв'яжіться з нами для консультації по вашій задачі.

Чому обирають нас?

Ми працюємо з мобільною розробкою 5+ років, виконали понад 40 інтеграцій AR/VR у додатки під iOS та Android. Наші інженери сертифіковані Apple та Google. Ми гарантуємо стабільну роботу та надаємо повну документацію. Використуємо сучасні підходи: SwiftUI, Jetpack Compose, Kotlin Multiplatform. Отримайте консультацію — ми допоможемо обрати оптимальне рішення.

Додатково: SLAM (Simultaneous Localization and Mapping) алгоритм на WebGL вимагає оптимізації для слабких пристроїв. Наш досвід показує, що правильне налаштування WebGL-контексту знижує навантаження на CPU на 30%.