How to use iPhone LiDAR sensor with Web app?

1.9k Views Asked by NaveenSelva At 21 October 2024 at 01:17

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.

Original Q&A

There are 1 best solutions below

Andy Jazz On 27 March 2021 at 14:15

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>

How to use iPhone LiDAR sensor with Web app?

There are 1 best solutions below

AR QuickLook content implementation

Web AR content implementation

New HTML element

Related Questions in AUGMENTED-REALITY

Related Questions in ARKIT

Related Questions in REALITYKIT

Related Questions in LIDAR

Related Questions in ARQUICKLOOK

Trending Questions

Popular # Hahtags

Popular Questions