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 раза быстрее, чем разработка нативного приложения, и требует меньших вложений на старте.
Где обычно ломается
Камерный доступ внутри 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?
- Убедитесь, что
WKWebViewConfigurationнастроен правильно:allowsInlineMediaPlayback = trueиmediaTypesRequiringUserActionForPlayback = []. - Реализуйте
WKUIDelegateс методомwebView(_:requestMediaCapturePermissionFor:)и возвращайте.granted. - Проверьте, что URL сцены загружается по HTTPS (даже в development используйте локальный сервер с SSL).
- Для отладки включите
NSAllowsLocalNetworkingв Info.plist.
Почему производительность SLAM критична?
Сравнение WebAR (8th Wall) и нативного AR (ARKit/ARCore) по ключевым параметрам:
| Критерий | WebAR (8th Wall) | Нативное AR (ARKit/ARCore) |
|---|---|---|
| Установка | Не требуется, запуск по ссылке | Требуется скачивание приложения |
| Производительность SLAM | Зависит от CPU; на слабых устройствах FPS ниже | Использует аппаратное ускорение, стабильно 60 FPS |
| Стоимость разработки | Ниже: одна кодовая база для iOS/Android | Выше: отдельная разработка под каждую платформу |
| Охват устройств | Любые смартфоны с WebGL и камерой | Только iOS с A9+ и Android с 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) webView.load(URLRequest(url: URL(string: "https://your-8thwall-scene.8thwall.app/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.
Пример конфигурации Info.plist для iOS
<key>NSCameraUsageDescription</key> <string>Для работы WebAR требуется доступ к камере</string> <key>NSAllowsLocalNetworking</key> <true/> Сроки и стоимость
| Этап | Сроки |
|---|---|
| Интеграция WebView-контейнера | 3–5 дней |
| Разработка простой AR-сцены (1–2 объекта, базовое взаимодействие) | 5–10 дней |
| Комплексный сценарий (анимации, взаимодействие с бэкендом) | от 15 дней |
Стоимость рассчитывается индивидуально после анализа требований к сцене и целевым устройствам. Оценим проект бесплатно — пишите, обсудим детали. Свяжитесь с нами для консультации по вашей задаче.
Почему выбирают нас?
Мы работаем с мобильной разработкой 5+ лет, выполнили более 40 интеграций AR/VR в приложения под iOS и Android. Наши инженеры сертифицированы Apple и Google. Используем современные подходы: SwiftUI, Jetpack Compose, Kotlin Multiplatform. Получите консультацию — мы поможем выбрать оптимальное решение.