search

PolymerElements / app-media

Elements for accessing data from media input devices and visualizing that data for users
61 stars 12 forks source link

Add <app-media-image-capture> demo #14

Open FluorescentHallucinogen opened 7 years ago

FluorescentHallucinogen commented 7 years ago

Please add a demo that demonstrates the capabilities of <app-media-image-capture> element: manual change the camera hardware settings (zoom, focus mode, contrast, ISO, white balance, etc.).

cdata commented 7 years ago

Thanks for the request. We just updated to the correct iteration of the Image Capture API. A demo will land soon. Ideas for what it should look like are welcome.

FluorescentHallucinogen commented 7 years ago

IMO, it should look something like this:

camera_ui_1 camera_ui_2

Under the hood, the demo can use <app-layout>, full screen <app-media-video> element, bottom bar that contains <paper-fab> for taking a photo and <paper-icon-button> elements for selected camera settings (switch camera, flash, focus and zoom).

Tapping the hamburger button in a top left corner opens the left <app-drawer> that contains <paper-input-elements> (<paper-slider>, <paper-toggle-button>, <paper-dropdown-menu>, etc.) for the remaining camera settings (ISO, color temperature, brightness, contrast, saturation, sharpness, etc.).

Tapping the gallery button in a top right corner opens the right <app-drawer> that contains a vertical scrollable carousel of captured photos.

FluorescentHallucinogen commented 7 years ago

It's possible to combine all demos that demonstrate photo capturing, video capturing, microphone capturing and screen capturing into one single demo app, using <paper-tabs> to switch between capturing modes, and different main floating action buttons for each mode.

App tabs: ui_tabs Photo capture: ui-photo-capture Video capture: ui-video-capture Microphone capture: ui-microphone-capture Screen capture: ui-screen-capture Stop capture: ui-stop-capture

FluorescentHallucinogen commented 7 years ago

It would also make sense to use a dark UI theme instead of light for camera apps.