What are some of the best practices when working with camera kit?

Ali Raza

Hi

We are developing an app that relies heavily on camera kit. We were wondering if there are learnings and experiences you all can share with us. Our app is iOS only for now and our use case is to upload the captured video/picture to our own server.

Are there any best practices to accomplish this? Or anyone who has done something like this recently and can share their experience.

Thanks

Ali Raza

We are trying to use the camera kit with swift UI but are currently facing some issues

stevenxu

Hi @Ali Raza ! Apologies for the delay as I was ooo. Let me look into this with the team. Could you share more details here what the issues you are running into?

Mubassir Hayat

Hello stevenxu!

Mubassir here from the dev team

Salud is based on the core functionality of Snap Camera Kit, where our end goal is to use Snapchat filters to record a video and preview this video in our custom video data preview.

We’re currently using Snapchat Camera Kit that includes below mentioned pods in our project

pod 'SCSDKCameraKit'
pod 'SCSDKCameraKitReferenceSwiftUI'
pod 'SnapSDK', :subspecs => ['SCSDKCreativeKit']
pod 'SCSDKCameraKitReferenceUI', '1.18.0'

Currently, We are facing below mentioned issues to get our desired result while implementing SDK

Once we move to Camera Screen and then move to any other screen of our app, Camera Session is always running in the background indicating that the camera doesn’t automatically de-initialize. So we want to know more about handling(initializing/de-initializing) manual session of the camera just like the Snapchat App do once we move from the camera screen to any other screen. (a reference to screenshot - 1)
As our use case is to preview Snapchat SDK recorded video to our custom preview screen. Currently recorded content is being returned on one of the delegate function implementations ‘’cameraKitViewController(_ viewController: UIViewController, openSnapchat screen: SnapchatScreen)’’ when we click the Snapchat icon button in the example app. So how can we replace the Snapchat icon button with our own custom button? (a reference to screenshot - 2 )

Screenshot – 1
(Green Dot on the Top right indicates that when we switch from the camera screen to any other screen of the App, the SDK camera doesn’t close and runs in background)

Screenshot-1

Screenshot – 2
(Snapchat icon gives us the local URL of the video, can we skip this preview screen to add our own customized preview screen)

Screenshot-2

stevenxu

Hi @Mubassir Hayat Thank you so much for the detailed post! I've shared with our eng team to look into and will let you know what they say. Hang tight!

arashp

Hi @Mubassir Hayat. Thank you for this. Zooming out to the original question, we have captured the best practices for setting up a camera pipeline and recording AR Experiences in our sample apps: https://github.com/Snapchat/camera-kit-reference Once you have the recording, it would be up to you to send it up to your servers.

Regarding moving away from a camera view to another part of your app. You can stop and start Camera Kit's AVSessionInput.stopRunning() and .starRunning(). Or you stop and start the Camera Kit session. Both will stop the microphone.

Generally, ReferenceUI can copied over to your app and changed in any way you like. The Ghost button that you mention has some code for sharing with Snapchat app. It would be easier to create a new button rather than repurposing that one. You can search ck_snapchat_app_icon to find usages of it.

Ameer Hamza

Hi @arashp! Thanks for the kind response.
As you said ReferenceUI can copied over to your app and changed in any way you like.
i searched for 'ck_snapchat_app_icon' but these all files are included in library files i.e. (cocoapods files), after customising these view whenever we will install new cocoapods, all these changes will be lost.
can you please share some more detail how we can customise or copy ReferenceUI in our app, so we have control on it to change or edit that snapchat ghost icon.

arashp

Hi @Ameer Hamza, thank you for raising this. If you are looking to change a private method or else many things in ReferenceUI, you may wish to make a deep copy of the files in ReferenceUI. In other words, copy the ReferenceUI folders from the Pod project to your app. In this particular case, PreviewViewController.snapchatButton is private so that would be the only way to change the icon inside it.

Making a deep copy of ReferenceUI to your app will prevent your changes from getting overwritten.

Ameer Hamza

Hi @arashp, Thank you so much for helping us out. We've successfully created Deep Copy and this really helps us a lot customising the way we required our UI to be..
So currently we're facing only issue and that is the right top stack view that includes following options

• Camera switch
• flashlight on/off
• Tone
• Portrait

These options aren't visible in our SwiftUI Application. However when we run Sample App provided by SnapChat, this app includes all these options by default which is using UIKit component.

Can you please brief us a bit more how these options can be visible in our app or this functionality isn't supported in SwiftUI yet referring to below mentioned comment that is the part of SDK?

CameraViewState.swift -- Line 106
'To be implemented once CameraActionsView is ported to SwiftUI, otherwise unnecessary.'

Note: We're implementing SDK in our App using SwiftUI and called the SDK view like 'CameraView(cameraController: cameraController)'
and also these options were never visible to us even before making deep copy.

Thanks

arashp

Hi @Ameer Hamza, thank you for the question. That is correct: at the moment, you would need to port CameraActionsView to SwiftUI. This class has not been implemented in SwiftUI yet.

Mubassir Hayat

@arashp what is the timeline on Snapchat's side to port CameraActionsView to SwiftUI?