Vaadin Touchkit component to access mobile camera

Hi

Do we have a component available for accessing mobile phone camera in vaadin touckit ?
I have been working on it and stuck with this requirement for quite sometime now.
Although I tried to make a component using HTML 5 but no luck in accessing the mobile camera. It does help me upload an image file from the gallery though.

Is there any other alternative or an working example ?

Check out the parking demo: http://demo.vaadin.com/parking/

Here’s the relevant source code:
https://github.com/vaadin/parking-demo/blob/master/src/main/java/com/vaadin/demo/parking/widgetset/client/ticketview/PhotoLayout.java

Which uses this add-on: https://vaadin.com/directory#!addon/lib-gwt-imageupload

You can explore the source code of the add-on if needed.

Thanks Michael

Thats exactly what we wanted.
We are wrapping a web application built on vaadin with Phonegap.
Even if its wrapped with phonegap, I hope this solution should work fine.

With PhoneGap you can also use its own API, the camera plugin: http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html

Image Upload is a gwt component and the photolayout that is used is also on gwt.

In our application we have everything in vaadin. I tried to use ImageUpload directly in my vaadin project but it cannot be added as a component.

What should be done here? As I don’t have much knowledge on gwt.

Is it possible to use direclty a gwt component in vaadina application ?

It’s not possible to use a gwt component directly, you have to create a Vaadin component with a connector.

The closest you can get with ready-made server-side components is the Upload component, as here example from the book: https://vaadin.com/book/-/page/mobile.features.html

It will give you the option to use the camera, but it will not open the camera automatically and styling it is a bit tricky.

The Upload component is what I tried earlier but with HTML5. It gives an option to select photos from the gallery but it doesn’t open the camera.

Can I find this approach to connect a gwt component with vaadin component in Parking Demo example ?
Or any other source ?

The parking demo doesn’t show how to do this specific task, it is a bit more complicated. You can take it as an example and remove the unnecessary fields from it.
The parking demo uses the whole TicketView as one component, you have to remove all the other components from it and leave only the camera thing.
Or you can create a new widget with Eclipse Vaadin Plugin and modify it.

This chapter in the book explains how to do it: https://vaadin.com/book/-/page/gwt.html