Skip to main content
Platform
Camera Kit

Build Lenses in Lens Studio

Lens Studio​

Snap's world class AR tracking and rendering engine can be accessed for free through the Lens Studio software.

Download Lens Studio​

  1. Before downloading, find the compatible version of Lens Studio for the target Camera Kit enabled application by reviewing the compatibility guide.
  2. Download the compatible version of Lens Studio here

If a Lens is created in a version that is not compatible with the version of Camera Kit SDK being used, the Lens will not appear in the app.

For help getting started in Lens Studio, visit ar.snap.com/learn. You will find guides, templates, scripting APIs, scripting nodes and links to Lens Studio tutorials on YouTube.

Best Practices for Camera Kit​

For the most part, Lenses applied in a Camera Kit app will behave the same as they do within Snapchat. With that said, this page will walk you through a few important considerations when designing your Lens for use in your Camera Kit app.

Review the Camera Kit Version Parity chart To Ensure Your Lens Will launch in the application.

Ensuring Expected Behavior​

Camera Kit applications can run AR effects at different output resolutions and may contain UI elements which are distinct from Snapchat. As a result, screen-space content may appear slightly altered in size and positioning compared to in-Snapchat experience.

When selecting features to be used within a Lens for Camera Kit, double check the list of Unsupported Lens Features for the latest on what features are not yet supported.

Screen Region Component​

The Screen Region Component is used to ensure that the frame rectangle for UI elements is the intended dimensions. For screen-space content, it is common to place content relative to the Safe Render region which can be set to avoid the UI of the application such as the carousel or camera swapping elements. This will ensure your Lens experience displays correctly and unobstructed.

Full Frame Screen Region: If designing screen-space content that can exist behind the app UI, it is recommended to use the Live or Capture regions of the Screen Region Component. In Camera Kit, the Full Frame is the uncropped camera frame, meaning that the bounds of the Full Frame region may extend beyond the screen itself. If you notice that your content is shifted offscreen when testing in the Camera Kit app as compared to Snapchat, ensure that you are binding content to the Live or Capture regions and not the Full Frame region.

To ensure that the Screen Regions have been set correctly within your Camera Kit application, you can run the Regions Lens, available in the Default Lens Pack.

Pin to Edge​

In conjunction with Safe Areas, the Screen Transform Component is used to ensure elements remain on screen and at expected sizes. Since applications and devices can have different resolutions for applying the Lens effects, it is important to pin content to the screen edge it is relative to. That is, if a slider should be near the right of the screen, Pin To Edge could be set to the right edge. Additionally, content may scale to match different resolutions and maintain correct offsets from edges. To avoid unintended sizing, you can ensure that elements which should not scale, are fixed in size in the Screen Transform component.

Lens State Reset​

In Snapchat, capturing a Snap brings you to a Preview screen to review the Snap before sharing with friends. If you decide to discard the Snap, you are brought back to the main carousel and the AR Effects of the Lens are reapplied from a fresh state, that is, the Lens starts over. For Camera Kit applications, this Lens reset behavior is not guaranteed and will vary based on the implementation of the Camera Kit SDK within the application. As a result, any assumptions of the Lens resetting its state after capture should be discussed with the application developer first.

When building Lenses to support scenarios in which the state is maintained post-Capture, you will need to take extra steps to handle a manual Lens reset. This is typically a consideration for Lenses which contain changes on the SnapImageCaptureEvent such as applying ML effects on a low-end device and for Lenses with complex state structures. To handle manual resetting of a Lens, it is important to listen for the SnapRecordStopEvent event and SnapImageCaptureEvent and reset the Lens accordingly:

function resetLens() {
  // return Lens to initial state
}

function applyEffectsOnCapture() {
  // Apply effects when capture occurs
}

function handleResetLensOnCapture() {
  applyEffectsOnCapture();

  var delayedEvent = script.createEvent('DelayedCallbackEvent');
  delayedEvent.bind(resetLens);
  delayedEvent.reset(0.1); // Set to some time after the effect has been applied
}

script.createEvent('SnapImageCaptureEvent').bind(handleResetLensOnCapture);
script.createEvent('SnapRecordStartEvent').bind(applyEffectsOnCapture);
script.createEvent('SnapRecordStopEvent').bind(resetLens);

Testing Strategies​

Steps for Debugging​

If your Lens is not working as expected within your Camera Kit application, there are a number of steps you can try following to determine where the issue is coming from:

  1. Test in the Preview window in Lens Studio
  2. Test in Camera Kit app or website using the Push-to-Device integration for iOS, Android or web
  3. Test in Snapchat with the Push-to-Device button within Lens Studio
  4. Test in Camera Kit sample app
    • If this works, then the issue is likely with the setup of your Camera Kit application and not the Lens.
  5. If the Lens does not appear in the Camera Kit app, double check the compatibility chart
  6. Post more about your issue on the discord.

Lens Web Builder​

In addition to Lens Studio, AR experiences can be built for Camera Kit using Lens Web Builder - Snap's free web-based creation tool. With Lens Web Builder, you can choose from hundreds of free 3D objects, animations, and templates and upload a logo or png/gif to further customize the experience.

Accessing Lens Web Builder​

Lens Web Builder can be accessed via Business Manager > Select the drop down in the top left > Select Create AR Lens

Documentation​

Documentation on Lens Web Builder can be found in the following pages:

Ensure that the Lens Folder being selected in the Lens Web Builder creation flow has been added as a source for your Camera Kit organization.

Compatibility​

The version of Camera Kit that a Lens Web Builder Lens supports depends on the features in use within the Lens project. However, due to the frequency of Lens Web Builder updates, it is unlikely that you will run into any compatibility issues with your Camera Kit integration. You can quickly check the compatible version of a Lens Web Builder Lens once uploaded within Lens Scheduler.

Was this page helpful?
Yes
No