Camera ＋
Jordan Dobson
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.
This package is a work in progress and is known to have some issues displaying the camera on certain versions of Android using Chrome.
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 →
Integrations
Integrations allow you to extend the Camera ＋ package of connective components for use in a multitude of ways. If you’d like to create your own integration, reach out in the Contact & Feedback section below.
- Camera ＋ Face Detection: Coming in August 2020
- Camera ＋ Barcode Reader: Coming in September 2020
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 |
| On Canvas | Choose how the Lens is displayed on canvas |
| 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 |
| On Canvas | Choose how the View is displayed on canvas |
| 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
- Example Usage Files
- Docs & Examples for Authoring Connective Integrations
- Advanced Video Usage Example
- Optional Placeholder Images for Lens & View
- Error States for Failed Camera Access
Updates
v1.12.0
19 AUGUST 2020
Small bug fix to address camera initialization on canvas.
v1.7.0
12 AUGUST 2020
Updates to Lens presentation on Canvas for Web & Desktop, support for Safari & mobile devices and integration support.
- Mobile Device Support
- Camera can render on Web app canvas with optional property control
- Added Desktop App checks to only show valid property control options
- Testing & Support for Safari, iOS Safari and Chrome on Android
- Better Support for integrations from external packages like Face Detection
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.