Can't display image with h:graphicImage JSF 2.0

Question

I've wrote a bean that takes photos from a webcam. I'd like to display these image in a JSF 2.0 page and update them every n second.

If I give the path name the file in eclipse like this it work:

public String getNewPhoto() {
        try {
            File dir = new File("C:/Users/User/MyApp/images/");
            FileUtils.cleanDirectory(dir);
        }catch(Exception ex) {
            ex.printStackTrace();
        }

    String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(Calendar.getInstance().getTime());

    try {
        webcam = Webcam.getDefault();
        webcam.open();
        ImageIO.write(webcam.getImage(), "PNG", new File("C:/Users/User/MyApp/images/"+ timeStamp + ".png"));
        webcam.close();
    }catch(Exception ex) {
        ex.printStackTrace();
    }

    return "C:/Users/User/MyApp/images/" + timeStamp + ".png";

}

With the following XHTML:

      <p:graphicImage value="#{myBean.newPhoto}" id="photo" cache="false" />
      <p:poll interval="1" listener="#{myBean.increment}" update="photo" />

As expect all of the above works fine from my dev environment on eclipse. I'd like to deploy this to my server (Linux). When I change the paths from what you see above to

/var/lib/tomcat7/webapps/MyApp/images

Then the images get saved, but I can't display them in h:graphicImage. I also tried passing:

http://hostname:8080/MyApp/images/....

to h:graphicImage and still no dice, I'm sure I'm missing something real simple. Any help is appreciated!

score 0 · Answer 1 · answered Jul 12 '14 at 22:10

0

You need to change it in the image saving line as well . . .

ImageIO.write(webcam.getImage(), "PNG", new File("C:/Users/User/MyApp/images/"+ timeStamp + ".png"));

answered Jul 12 '14 at 22:10

GingerHead

8,130
15
59
93

I do have it changed where I'm saving the image. The above is just example code from my dev env, I've change the path everywhere you see above to the correct location for my server. – user3780616 Jul 12 '14 at 22:17

score 0 · Answer 2 · edited May 23 '17 at 12:05

How about the following:

View

<p:graphicImage value="#{photoBean.newPhoto}" id="photo" cache="false" />
<p:poll listener="#{photoBean.updatePhoto}" interval="1"
    update="photo" />

Managed Bean

@ManagedBean
@RequestScoped
public class PhotoBean {

    private String realPath;
    private String realtivePath;

    @PostConstruct
    public void init() {
        realtivePath = "/images/webcam.png";
        ExternalContext externalContext = FacesContext.getCurrentInstance()
                .getExternalContext();
        realPath = externalContext.getRealPath(realtivePath);
    }

    public void updatePhoto() {
        try {

            File file = new File(realPath);
            file.delete(); // cleanup
            // Use file object to write image...

        } catch (IOException e) {
            // Implement some exception handling here
            e.printStackTrace();
        }
    }

    public String getNewPhoto() {
        return realtivePath;
    }
}

Some more notes (getters)

It's not a good idea to process the webcam image in the getter (getNewPhoto) as getters may be called multiple times by JSF.

See: Why JSF calls getters multiple times

Timestamp

I've removed the timestamp from the filename. I think you've added it to prevent browser caching. This is not required as cache=false already creates unique image URIs.

Can't display image with h:graphicImage JSF 2.0

2 Answers2