Search code examples
augmented-realityarkitrealitykitlidararquicklook

How to use iPhone LiDAR sensor with Web app?

I need to create WebAR using iPhone 12's LiDAR sensor.

Is that possible to get permission or API to access it?

Kindly suggest me the good reference for my requirement.

Solution

  • 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)
    }
}

    enter image description here


    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>

    enter image description here