[Example Project] Freeze Multiple Cameras
Featured
Hey Everyone!
Wanted to share with you this quick example project that shows you how you can display multiple camera feeds in your Lens, and even freeze them!
(The best part of this project is that no coding or assets are necessary!)
Download the Example Project
Setting up the Scene
First, let's set up the scene like normal. We can added Screen Images via the Add New menu in the Objects panel to add 2D images attached to our screen.
Next, we can add a Screen Text under that image object, to add 2D texts that we will use for our caption.
Duplicate this a couple of times to set up your scene.
Setting up Each Image to display its own Camera
Next we need to set up a texture that we can display in our Image component.
Let's first create a texture: In the Resources panel click "Add New > Render Target".
Then, select the new render target texture, and since we want the texture to render what our camera sees, set its Input as Device Camera Texture.
Next we will tell our camera to store what it sees to this texture. Select a Camera object, and set its Render Target to the new Render Target texture you created.
Do this for every image which you want to display the camera feed. You'll want to create a camera for each image you want to freeze, since you want them to operate independently.
To display our camera texture, all we have to do is set our render target texture as the texture to display on the Image component that we set up earlier.
Freezing the Camera
To freeze an image, all we have to do is disable the Camera that is providing the texture to the Image.
You can easily do this by using a Behavior Script. Notice that we set our image as the touch target so users can tap on a specific image to freeze that image by disabling its source camera.
Adding a Hint
Finally, let's add UX to help users use our Lens!
To do this I added another Screen Text to explain to users how this Lens can be used. Explicit hints help people quickly understand the value of a Lens.
Secondly, I grabbed the tap hint texture from the UI helper, to help drive the point home, as well as help people who speak a different language.
Then, I use the Tween script to fade the hint away after a while so that it doesn't bother the user while they are playing with the Lens.
I also added another behavior script so that the hint disappears when the user has demonstrated that they understood the hint (has tapped the screen).
To Recap
- Create a Render Target resource in the Resources panel, to create a dynamic texture that you can display on an Image
- Create new cameras and feed it into Render Targets to display the camera's content. Disable the cameras to free the image/camera feed.
- Use Behavior, Tween, and UI helpers to help construct your Lens without having to type code or create assets.
- Add hints to help users quickly understand the value of your Lens.
Let us know if you have any questions or have ideas of what kind of example projects you want to see.
Can’t wait to see what you come up with!
Cheers,
Jonathan
By the way, fun fact, because each section of the Lens is using its own camera, each frame can have its own effects!
You can do this by setting up each camera with its own layer, and placing the effects on each layer.
First select the camera object in the Objects panel, then in the Inspector panel, we can add a new layer for it to render.
Then, select the object you want to display in that camera, and in the top right corner of the Inspector panel, you can select the same layer:
Now that object should only be rendered on that camera, and that's it :)
Cheers,
Jonathan
Double, by the way, you can simplify this by enabling the layer indicator in the Objects panel.
You can double check by checking the layer color:
Great tutorial Jonathan!
Jonathan, if we use the image picker instead of the camera itself as the source for each frame the lens gets rejected with: “lens must use the camera”. Can you elaborate on that rejection and how do get through it?
Thanks you
Thank you Noah!
--
Hey Marco,
Snapchat Lenses are AR experiences that transform the way you look, and the world around you. If you replace each segment with an image picker, then the Snapchat Camera wouldn’t be transforming the moment, but rather editing a photo from the past.
To ensure your Lens use the Snapchat Camera, simply ensure the Image Picker Functionality only works when the Snapchatter's face is present on screen. That way the Lens will not allow for a full-screen takeover of the Snap showcasing just a user’s camera roll content.
Cheers,
Jonathan
Hi Jonathan,
I understand you explanation and I've also seen Neha give the same talk on multiple posts on the forum around this topic. The problem is the reviewers will always reject the lens even if I do what you said about only showing the image picker when the face is present. I have multiple rejections with this issue and here is an example lens id that is rejected: 26066ab0-f5e4-4d4e-9454-b18f1fc73053
thanks
So maybe sync up internally with the review team and make sure they have this instruction?
thanks
Hi Marco,
Thanks for sharing that LensID. I will reach out and provide your feedback to the review team on their decision.
Cheers,
Jonathan
Hey Marco,
The review team took a second look and the Lens should be approved now. We appreciate your patience and feedback on our systems as we work to ensure a positive and inclusive experience for Snapchatters around the world through our Lens product.
Thank you,
Jonathan
Jonathan,
I just went through a lot of work to modify your template to work with the face image picker instead of the live camera feed.
Now that I got it working guess what happens? Rejected for "Lenses should utilize the Snapchat camera when taking Snaps"
All my lens does is ask the user to select 2 pictures which it shows on 2 small squares on the screen keeping the camera 95% visible.
This is lens id: "b7bad5fb-0e1e-48da-ae1e-b8bc0c43f88d"
Will you please once again talk to the review team to not reject these lenses when we're following your exact instructions?
thanks