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.

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.