Web Cam and Vaadin

A very interesting Web Cam Add On is available from the Vaadin Add On site.

Here is a simple recipe for making it work.

Create a split panel and add the Web Cam to the left hand side of the panel.

        
        splitPanel = new HorizontalSplitPanel();
        splitPanel.setSizeFull();

        VerticalLayout detailsLayout = new VerticalLayout();

        detailsLayout.setSpacing(true);
        detailsLayout.setSizeFull();

        // Create the webcam and assign a receiver.
        final Webcam webcam = new Webcam();
        webcam.setWidth("600px");

        detailsLayout.addComponent(webcam);
        detailsLayout.setComponentAlignment(webcam, Alignment.TOP_LEFT);

       

Create a receiver which creates a temporary file with a jpeg extension.

 webcam.setReceiver(new Upload.Receiver() {

            @Override
            public OutputStream receiveUpload(String filename, String mimeType) {
                try {
                    targetFile = File.createTempFile(filename, ".jpeg");
                   
                    theFileName = filename;
                    targetFile.deleteOnExit();

                    return new FileOutputStream(targetFile);
                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                return null;
            }
        });

Add a Event Listener which adds the image to a table that will be created and positioned on the right of the screen.

// Add an event listener to be called after a successful capture.
        webcam.addCaptureSucceededListener(new Webcam.CaptureSucceededListener() {

            @Override
            public void captureSucceeded(Webcam.CaptureSucceededEvent event) {
                img = new Image("Captured image", new FileResource(
                        targetFile));
                img.setWidth("200px");

                Integer rowId = new Integer(index++);
                saveBtn = new Button("I like this image");
                saveBtn.setData(theFileName);
                saveBtn.addClickListener(new Button.ClickListener() {

                    @Override
                    public void buttonClick(Button.ClickEvent event) {

                    }
                });
                table.addItem(new Object[]{img, saveBtn}, rowId);
            }

        });

Create the table and position it as the second item on the page.

        splitPanel.setFirstComponent(detailsLayout);

        VerticalLayout tableLayout = new VerticalLayout();

        tableLayout.setSizeFull();

        table = new Table();

        table.setImmediate(true);
        table.setWidth("400px");
        table.setHeight("700px");

        table.addContainerProperty("Image", Image.class, null);
        table.addContainerProperty("Action", Button.class, null);

        table.setColumnHeaders(new String[]{"Image", "Action"});


        table.setPageLength(5);

        tableLayout.addComponent(table);

        tableLayout.setComponentAlignment(table, Alignment.TOP_RIGHT);

        splitPanel.setSecondComponent(tableLayout);

        this.addComponent(splitPanel)

At the moment there are number of deficiencies with this code, which you could improve. The action in the table could send an email to yourself with the image that you liked as an attachment.

Note the Web Cam Add On only works in Chrome and Firefox.