How to create an Image Tracker AR application in xcode?

Good day, everyone. I'll talking about creating an Augmented Reality app from the base up that will supervise a picture of your choosing and do something when you position it in front of your camera while the app is running.

AR Application for Image tracker

So, presuming you're familiar with Xcode, we will start by building a new project in Xcode by opening it and clicking on New Project.

This will provide us with some pre-built code that will assist us in quickly creating an AR app. There will be a lot of files in your project now, but don't worry, we won't all alter too much. Now you must pick the ViewController.swift format.

You'll find a viewDidLoad function in that file; this function will be the first function to run when the app is launched for the first time. We will now add the code given below to your viewDidLoad function, as well as ARSCNViewDelegate to your class.

override func viewDidLoad() { super.viewDidLoad() // Set the view's delegate sceneView.delegate = self // Show statistics such as fps and timing information sceneView.showsStatistics = true // Create a new scene let scene = SCNScene(named: "art.scnassets/card.scn")! // Set the scene to the view sceneView.scene = scene }

Presently you should add a document name called art.scnassets and in that, we will add a scene for example for this application we should utilize a card moulded square shape to follow our picture so on your upper right corner you will see a "+" sign, click on it and select plane and give it a name.

Now, in order to trace a picture of your choosing, you must first add it to our project, and then to your assets.xcassets, create a new file named AR resources in the xcassets file, and place the image there.

Now that the configuration is complete, we'll add the viewWillAppear feature, which will run any time the view is viewed, which means every time you turn from one screen to another. The code for viewWillAppear is as follows. We'll use the ARImageTrackingConfiguration module in this feature to monitor our image, and the guard statement will retrieve the reference image from our AR resources register.

override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) // Create a session configuration let configuration = ARImageTrackingConfiguration() guard let arReferenceImages = ARReferenceImage.referenceImages(inGroupNamed: "AR Resources", bundle: nil) else { return } configuration.trackingImages = arReferenceImages sceneView.session.run(configuration) // Run the view's session sceneView.session.run(configuration) }

Now, when the view fades away, we must perform something, so here is the code for the viewDidDisappear function.

override func viewWillDisappear(_ animated: Bool) { super.viewWillDisappear(animated) // Pause the view's session sceneView.session.pause() }

The next thing we'll do is see what happens when the image appears in front of the camera, possibly the best we will create a renderer feature.

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) { }

Now, if there is an image in front of the camera, we must search the childnode of our scene to get the reference of it, then disable its parent node, which is the input image, and instead play a video that we have included in our project. Below is the code to do so, which will be placed inside of our renderer feature.

guard anchor is ARImageAnchor else { return } guard let card = sceneView.scene.rootNode.childNode(withName: "card", recursively: false) else { return } card.removeFromParentNode() node.addChildNode(card) card.isHidden = false let videoURL = Bundle.main.url(forResource: "pirate", withExtension: "mp4")! let videoPlayer = AVPlayer(url: videoURL) let videoScene = SKScene(size: CGSize(width: 720.0, height: 1280.0)) let videoNode = SKVideoNode(avPlayer: videoPlayer) videoNode.position = CGPoint(x: videoScene.size.width / 2, y: videoScene.size.height / 2) videoNode.size = videoScene.size videoNode.yScale = -1 videoNode.play() videoScene.addChild(videoNode) guard let video = card.childNode(withName: "video", recursively: true) else { return} video.geometry?.firstMaterial?.diffuse.contents = videoScene

That's it, your augmented reality picture monitoring software is complete. Here's a guide to the whole code, which you can inspect and play with as you see fit.

Github repo