Camera +

Jordan Dobson

Camera +

Overview

This package contains a set of connective components that work with the cameras on your device. Using the default config settings you can quickly connect up the camera on your device to output the lens to a view by applying custom actions through the interactions menu.

View Documentation Page →

This is an early preview of the package and is currently only officially tested & supported for Chrome on desktop.

   

Usage Example

Watch this demo video to learn the basics on using this package and to get an overview of the Lens and View components.

Demo Video Watch Usage Example Demo Video →

   

Camera Lens

Place this component on your canvas to connect and view your camera in the preview. Use the lens image data to connect to other views using action controls in the interactions menu.

PROPERTIES
Preference Your preferred lens with a fallback to the default camera device lens
Background Placeholder color for the canvas and before camera stream is visible in preview
Radius Corner radius of component
Shutter Show shutter flash when image data is captured from the lens
Config Default Lens ID or a Custom Lens ID
EVENTS & TRIGGERS
Tap onTap event fires when clicking or tapping on the lens
Capture onCapture event fires when image data is captured from the lens

   

Camera View

Use this component on your canvas to display what’s captured from the camera lens in the preview.

PROPERTIES
Background Placeholder color for the canvas and before camera lens capture
Radius Corner radius of component
Config Default View ID or a Custom View ID
EVENTS & TRIGGERS
Tap onTap event fires when clicking or tapping on the view
Clear onClear event fires when image data is removed from the view
ACTION CONTROLS
Clear View Clears view using default or custom ID
Send Lens to View Sends Camera Lens image to Camera View using default or custom ID

   

Contact & Feedback

This is a work in progress by @jordandobson. Feedback, bugs, ideas and integrations are always appreciated.

jordan@framer.com

   

Roadmap

  • Mobile Device Support
  • Optional Placeholder Images for Lens & View
  • Documentation for Authoring Connective Integrations
  • Advanced Video Usage Example
  • Error States for Failed Camera Access

   

Updates

v1.6.0

06 AUGUST 2020

Updates to the Framer App package details view and Framer package documentation webpage.

  • Added Usage Examples Section
  • Created Usage Example Demo Video

   

v1.5.0

22 JULY 2020

Updates to canvas displays and placeholder states.

  • Improved default canvas rendering
  • Shared placeholder components
  • Implemented initial canvas visibility settings
  • Added component environment shared variables

   

v1.3.0

21 JULY 2020

Updated package icon + artwork, improved documentation layout / presentation and minor updates to Action Control labels.

   

v1.1.0

20 JULY 2020

Initial release for community testing & feedback before Framer Sessions late July.