How to use iPhone LiDAR sensor with Web app?

AR QuickLook content implementation

In 2019 Apple released AR Quick Look framework allowing you to create a web-based Augmented Reality experience browsing Safari. QuickLook is based on RealityKit engine, it's easy to implement and conveniently to use. It automatically uses LiDAR Scanner if your iPhone has it. If there's no LiDAR Scanner on-board, it runs regular plane detection feature. You cannot access the LiDAR scanner's parameters when you enable AR Quick Look via iOS Safari. If your iPhone has a LiDAR on-board, it will be used automatically.

Here's a Swift sample code for native Xcode project:

import ARKit
import QuickLook

extension ViewController: QLPreviewControllerDelegate,
                          QLPreviewControllerDataSource {
    
    func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
        return 1
    }
    
    func previewController(_ controller: QLPreviewController, 
                    previewItemAt index: Int) -> QLPreviewItem {
        
        guard let path = Bundle.main.path(forResource: "file", ofType: "usdz")
        else { fatalError("Couldn't find a model") }
        
        let url = URL(fileURLWithPath: path)           
        return url as QLPreviewItem
    }
}

class ViewController: UIViewController {
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        let previewController = QLPreviewController()
        previewController.delegate = self
        previewController.dataSource = self            
        self.present(previewController, animated: true, completion: nil)
    }
}

Web AR content implementation

To activate your USDZ model through web resource, use the following HTML tags:

<div>
    <a rel="ar" href="/assets/models/bicycle.usdz">
        <img src="/assets/models/bicycle-image.jpg">
    </a>
</div>

New HTML element

In 2023 a new HTML element called <model> was implemented

<body>
    <h1>An example <code>model</code> Element</h1>
    <model interactive width="1419" height="713">
        <source src="assets/FlightHelmet.usdz" type="model/vnd.usdz+zip" />
        <picture>
            <img src="assets/FlightHelmet.png" width="285" height="600" />
        </picture>
    </model>
</body>

AR QuickLook content implementation

Web AR content implementation

New HTML element

Recommended topics

Hot tags