Camera

Andrew Kallemeyn

Open in Framer X

Get access to the device camera to take a photo

This package allows you to access the device camera (front or back), take a photo, and use it anywhere in your prototype (display it, send it to an API, etc. etc)

Optionally, you can add custom overlays to the camera feed to show instructions, guides, etc.

Option Description
Camera Select the device camera (Front or Back).
Camera Overlay (Optional) A frame that displays over the camera feed (example: instructions, guides, etc).
Photo Overlay (Optional) A frame that displays over the photo after it is taken (good for “Retake” or “Continue” buttons)

What’s Included

Out of the box, this package asks for camera permissions, shows the camera feed, and when the user taps anywhere on the screen, takes the photo and displays it immediately. If you want to use the photo anywhere else in your prototype or reset the camera (for retakes), you will need to use code overrides (see below)

Previewing

Unfortunately, Framer’s built-in preview doesn’t support camera media, but you can preview your design directly on the browser using the Live Preview.

When you are ready to preview it on a device, you can’t use Framer Preview on iOS due to a WebKit bug, but you can open the prototype directly in Safari instead. Framer’s Android app may work, though 🤷🏻‍♂️

Code Overrides

Save The Photo & Reset the Camera

To save the photo for display anywhere in your prototype and to reset the camera (for retakes), you will need to use code overrides.

Here’s example code.

import * as React from "react"
import { Override, Data } from "framer"

const appState = Data({
    cameraReset: false,
    myPhoto: null,
})

export function Camera(props): Override {
    return {
        cameraReset: appState.cameraReset,
        onTakePhoto: data => {
            //set camera reset to default (false)
            appState.cameraReset = false

            //store this photo for use later
            appState.myPhoto = data
        },
    }
}

export function ResetCamera(props): Override {
    return {
        onTap: () => {
            //when reset button is tapped, tell camera to reset
            appState.cameraReset = true
        },
    }
}

Display The Photo Anyhwere

Once you have the photo saved using the code override above, pass the data to the “DisplayPhoto” component included in this package with another code override.

export function showPhoto(props): Override {
    return {
        imageData: appState.myPhoto,
    }
}
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree