Take an ARView Snapshot in RealityKit
Build augmented reality iOS applications
When I was learning to use Reality Kit, I was happy to find that Xcode provides you with a nice Augmented Reality template containing a “box” that you can place on a flat surface using your device. Easy and cool! Once I started playing with it, one of the first questions that came into my mind was “how to take a picture of this box (without screenshooting the device)?”.
Documentation is lacking and there were not many tutorials around. Here I share a simple solution I found, using this sample out-of-the-box “box” (pun intended) available in Xcode.
Create your project
On Xcode, create a new Augmented Reality project: File > New > Project. Choose iOS > Augmented Reality.
Click Next to continue. Set the product name to something of your liking, such as SnapshotExample. Leave the default options and select Next.
Save the project in your usual development folder. At this stage, if you run your project on your iOS device you can already place the box in the AR world. Build it and give it a run.
We will now modify this basic template to add a shutter button and take a picture of the AR view.
Build the UI
First, we will put the button that will take our picture. Find the following line in ContentView:
return ARViewContainer().edgesIgnoringSafeArea(.all)Replace this line with the following:
ZStack(alignment: .bottom){
ARViewContainer().edgesIgnoringSafeArea(.all)Button {
// Placeholder: take a snapshot
} label: {
Image(systemName: "camera")
.frame(width:60, height:60)
.font(.title)
.background(.white.opacity(0.75))
.cornerRadius(30)
.padding()
}
}
This creates a circular button with an appropriate SF Symbol. This button will execute the snapshot later on, note down the “Placeholder” line as we will come back to it later.
Create a static variable to keep track of the AR View
In the same file ContentView.swift, create a new struct ARVariables. This will hold the ARView.
struct ARVariables{
static var arView: ARView!
}This static variable will allow us to access the ARView in other parts of our code, and so be able to take a picture of it.
We now need to point ARViewContainer to use this variable instead of the locally created one. Find the makeUIView method and replace it with:
func makeUIView(context: Context) -> ARView {
ARVariables.arView = ARView(frame: .zero) // Load the "Box" scene from the "Experience" Reality File
let boxAnchor = try! Experience.loadBox() // Add the box anchor to the scene
ARVariables.arView.scene.anchors.append(boxAnchor) return ARVariables.arView
}
All we are doing above is telling the method to use the struct we created in the previous step.
Write the function
We are almost there! Find the “Placeholder” action inside the previously created Button and replace it with:
// (Placeholder): Take a snapshot
ARVariables.arView.snapshot(saveToHDR: false) { (image) in
// Compress the image
let compressedImage = UIImage(data: (image?.pngData())!) // Save in the photo album
UIImageWriteToSavedPhotosAlbum(compressedImage!, nil, nil, nil)}
In this snippet, we called the snapshot function of the static variable arView and save it to our photo album after first compressing the image.
Request for photo album permissions
There is one more step! We need to request the photo album permissions in order to be able to save our snapshot in our photo library.
Select your project (SnapshotExample in our case) and then open the Info tab.
On any of the Keys, select the “+” button and search for Privacy- Photo Library Usage Description and input its value to something that the end user will understand, such as “Required to save AR Pictures in Photo Library”.
Build and Run
We are done! Build and run your project, wait until the Box appears on screen and take your picture, it will be saved in your Photo Library.
I hope this was helpful. Do you have comments, suggestions, questions? Leave a comment below or send me a message.
The complete project can be found in the below GitHub Repository:
