Skip to main content
Camera Kit iOS

Preview Your Lenses on Device

Overview

Lenses in development can be previewed directly in your Camera Kit integration using the Push-to-Device feature. Once implemented in your Camera Kit app, the testing and workflow for the Lens will follow that of the traditional Send to Snapchat process that Lens developers are familiar with. This feature requires Login Kit integration which is outlined below. Note that this feature should not be shipped to end-users, as it is meant for Lens development only.

Push-to-Device for Sample Apps

The following video provides step-by-step instructions on adding Push-to-Device support to the provided sample projects.

Configure SnapKit Portal

First you will need to ensure that your Camera Kit application and Snapchat accounts are setup to use Login Kit:

Add Accounts as Demo Users

  1. Open kit.snapchat.com
  2. Scroll down to Demo Users
  3. Add any Snapchat usernames that will be used to test the Lenses in your app

Enable Login Kit and add Redirect URIs

  1. On kit.snapchat.com select the version of your app you are adding Push-to-Device to.
  2. Scroll down and enable Login Kit by selecting the Toggle
  3. Under Redirect URIs for OAuth section of Login Kit, add the URIs which you will later configure in your app as well. eg. add myapp://snap-kit/oauth2 in the text box and click on + Add URI button on the right.

iOS

Implementation

Four frameworks are required to enable Push-to-Device in your app including Login Kit. These frameworks are bundled in with the Camera Kit distribution folder. To use them make the following changes to your Podfile:

target 'Your-App-Name' do
...
pod 'SnapSDK', '<YOUR_VERSION>', :subspecs => ['SCSDKLoginKit']
pod 'SCSDKCameraKitLoginKitAuth', :path => 'CameraKit/CameraKitLoginKitAuth'
pod 'SCSDKCameraKitBaseExtension', :path => 'CameraKit/CameraKitBaseExtension/'
pod 'SCSDKCameraKitPushToDeviceExtension', :path => 'CameraKit/CameraKitPushToDeviceExtension/'
...

Change the target name if you are adding this to a different app. In your project directory, run the following terminal command:

Make sure to set the SnapSDK value to the version you are using in your app such as 1.14.0

pod install
  1. Add the scope in your Application's Info.plist
<key>SCSDKScopes</key>
<array>
<string>https://auth.snapchat.com/oauth2/api/camkit_lens_push_to_device</string>
</array>
  1. Add the URL scheme in your Application's Info.plist
<key>CFBundleURLSchemes</key>
<string></string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>your-app-name</string>
</array>
</dict>
</array>
  1. Add a callback url using the URL scheme defined above
<key>SCSDKRedirectUrl</key>
<string>your-app-name://snap-kit/oauth2</string>
  1. Update the AppDelegate to handle the callback defined above like this
import SCSDKLoginKit
...
func application(
_ app: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
...
if SCSDKLoginClient.application(app, open: url, options: options) {
return true
}
  1. Create an instance of a LoginKitTokenProvider
import SCSDKCameraKitLoginKitAuth
...
let tokenProvider = LoginKitAccessTokenProvider()
  1. Your app will have a class or controller to manage the camera and Lens stack. Update the groupIDs in this controller. If the instance of such a controller is someCameraController then set
someCameraController.groupIDs = [SCSDKCameraKitPushToDeviceExtension.SCCameraKitPushToDeviceGroupID]

These instructions do not readily apply to the iOS Sample App. The CameraController in the sample app targets ReferenceUI rather than CameraKitSample. To implement Push To Device in the sample app you could create a custom subclass of CameraController and implement Push To Device within it.

  1. Create PushToDevice object and initiate pairing
import SCSDKCameraKitPushToDeviceExtension

pushToDevice = PushToDevice(
cameraKitSession: cameraController.cameraKit,
tokenProvider: tokenProvider
)

pushToDevice.delegate = self

...

pushToDevice.initiatePairing()

Consider having a debug only UIButton or UIGestureRecognizer which, upon press, calls the pushTODevice.initiatePairing()

From a user perspective you will see a login flow. If Snapchat is installed this will be handled in app, if not, your browser will open and the login flow will commence. Upon Login the PushToDeviceDelegate methods will be called. This delegation is mostly for informational purposes but it is important to understand when certain events take place as there is some amount of user interaction that must take place. The following are a few of the methods that will be called throughout the Push-to-Device journey.

PushToDevice is available in iOS 12 and above.

Success Callbacks

The following methods will be called when the listed event has taken place

Authentication was Successful

func pushToDeviceDidAcquireAuthToken(_ pushToDevice: PushToDeviceProtocol) {
...
}

It is up to the user/developer to point their camera at a Lens Studio provided Snapcode.

Snapcode Scanning was Successful

func pushToDeviceDidScanSnapcode(_ pushToDevice: PushToDeviceProtocol) {
...
}

At this point the scan has completed and the user/developer may stop pointing their camera at the Snapcode.

Pairing between Lens Studio and App was Successful

func pushToDeviceComplete(_ pushToDevice: PushToDeviceProtocol) {
...
}

At this point the connection has been made, the User/Developer should now press the "Send to Snapchat" button in Lens Studio

Lens was Pushed to App Successfully

func didApplyLens(_ pushToDevice: PushToDeviceProtocol) {
...
}

Push-to-Device Workflow

  1. Once Push-to-Device and Login Kit are integrated, you should see a new movable floating icon in your app:
  1. Tap the icon to bring up the Push-to-Device menu, which can be used to start the pairing process:
  1. Scan the Snapcode presented by Lens Studio after you click on Pair Snapchat account:

/>

  1. Enter the Snap credentials, and then pairing should succeed. Push-to-Device floating icon should turn green to indicate success.

  2. When you are ready to test your Lens, kick off the push flow from Lens Studio:

/>

Troubleshooting

I tapped connect\gear icon, but nothing happens

  • After tapping connect\gear, you should see the icon change to a purple scanning icon. Make sure to point your camera at Lens Studio's Snapcode to scan it. Request will timeout in 10 seconds. You have to restart the connection flow if it timeouts by simply tapping the icon again.

Failure when attempting to log in

  • Make sure your device has internet connectivity.
  • Make sure you have added your username to the Demo Users list on kit.snapchat.com/manage/apps/<your-app-id>.
  • Make sure you have added redirect URI on Snap Kit portal as well as in your app correctly.

I tried to push a Lens, but nothing is received on my device

  • Make sure that your device has internet connectivity.
  • Ensure that you have paired successfully. The Push-to-Device icon should be a green gear icon.
  • If pairing is successful, tap on the gear icon to see if any error occurred. This may happen sometimes, for example when Lens Studio and your Camera Kit application versions are incompatible.
  • If the push succeeded (e.g. system notification) but the Lens is not showing up in your carousel, ensure that your application is subscribed to LensPushToDeviceService.LENS_GROUP_ID

I don't see the Push-To-Device icon

  • Currently Push-to-Device is only supported if your application uses the built-in Lenses carousel.

How do I log out and use another Snap account for Push-to-Device?

  • Clear your app's storage. Then:
    • If auth was via web browser, clear its cookies. If you have multiple browsers installed, make sure to clear the correct one.
    • If auth was via the Snapchat app, log out of the original account and log in to the new account that you want to use.
Was this page helpful?
Yes
No

AI-Powered Search