This example project shows you how you can display multiple camera feeds in your Lens, and even freeze them! It's a great way to learn how cameras and render targets work in Lens Studio.

(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