Building a Camera Kit App for iOS Using Reference UI (SwiftUI)
In this tutorial, you'll learn how to build a fully-fledged Camera Kit application for iOS using Reference UI components in just a few lines of code.
Prerequisites
- You have a Snapchat Developer Account and have created a Camera Kit application on the Developer Portal
- Basic knowledge of Swift and SwiftUI
- Latest Xcode installed
Getting Started
Let's prepare our local development environment and add the Camera Kit SDK as a dependency using Swift Package Manager.
Download the project files above and open Starting Project/CameraKitBasicReferenceSwiftUISample.xcodeproj
Select "File" → "Add Package Dependencies…".
Paste the following link into the search box: https://github.com/Snapchat/camera-kit-ios-sdk.
Press "Add Package" to begin adding Camera Kit to your project.
After Xcode finishes downloading the package, select SCSDKCameraKit, SCSDKCameraKitReferenceUI and SCSDKCameraKitReferenceSwiftUI.
Set everything else to "None" and press "Add Package".
We are now done adding Camera Kit as a dependency to your project.
Building the App Using Reference UI Components
We'll start by defining our credentials: API token and Lens group ID. Then, we'll create and configure a CameraController and finally present the CameraView.
Open ContentView.swift and import SCSDKCameraKit library
This library provides access to core Camera Kit functionalities.
Import SCSDKCameraKitReferenceUI
This library provides access to high-level UI components (UIKit based) and utilities that simplify building Camera Kit-based experiences.
And finally import SCSDKCameraKitReferenceSwiftUI
This library wraps SCSDKCameraKitReferenceUI views so they can be used in SwiftUI
Define your API token and Lens group ID
You can find them by navigating to My Lenses and selecting your application. You can use Staging API Token and Demo Lens Group ID for this tutorial
Initialize CameraController with the API token
This object encapsulates the most common Camera Kit operations and provides a high-level API.
Configure the CameraController with the Lens Group Id
Declare CameraView and initialize it with CameraController
This view implements the camera preview, controls, and a carousel-like UI to navigate a set of lenses similar to the Snapchat experience.
Go to your target settings, select "Info" tab and add Privacy items related to camera and microphone permissions.
Run the app
You should now see a complete Camera Kit experience with camera controls and lenses carousel.
Summary
You've now successfully built a Camera Kit-based app using the Reference UI for SwiftUI. While Reference UI allows you to get results and iterate quickly, it may not provide the flexibility you might desire compared to the lower-level API from Camera Kit.