rapidis / framer-camera-input

Framer plugin for inserting photo via mobile camera

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Framer Camera Input Module

Introduction

HTML Media Capture has started been adopted by major browsers and mobile browsers. Media Capture allows an input to trigger a request for file system or camera access. Using this module, you no longer need to insert fake video to mimic camera actions.

Usage

Here is a example about how to use the module:

// Image Only
TakePhotoButton = new CameraInput
	width: 200
	height: 200
	opacity: 0
	accept: "image"
	parent: Photo
	callback: (url, type) -> 
		Photo.image = url

// Image and Video
TakeMediaButton = new CameraInput
	width: 200
	height: 200
	opacity: 0
	parent: Photo
	callback: (url, type) -> 
		if(type.includes("image"))
			ImageLayer.image = url
		else if(type.includes("video"))
			VideoLayer.video = url

Compatibility

Currently, the module supports:

  • Photo via iPhone camera, iOS 11
  • Image file via desktop browser, Chrome
Install with Framer Modules

About

Framer plugin for inserting photo via mobile camera


Languages

Language:CoffeeScript 40.5%Language:JavaScript 32.2%Language:HTML 15.1%Language:CSS 12.2%