Primefaces 6.2 PhotoCam - Webcam Errors with Firefox / Safari

Question

I am trying to work with Primeface's PhotoCam (version 6.2) and, using the example from their showcase, the camera does not work for me on Firefox (Developer Edition 63.0b13), or Safari version 12 .. and does not work on Safari on a mobile device either (mobile device is on iOS12).

It's deployed to a site with https and it works in Chrome, on both a desktop and mobile browser.

I'm using the showcase demo at the moment, found here (the code is also posted below):

https://www.primefaces.org/showcase/ui/multimedia/photoCam.xhtml

I've even gone so far as to download the showcase war file and try that version, with no change in success.

Can someone assist, please?

What's happening?

On Firefox:

• I get the prompt to allow camera access, I click ok.
• I get a prompt to run Adobe Flash, I agree.
• After accepting both, the camera 'box' is just white.
• When I click on Capture the error I receive is "Webcam.js Error: Webcam is not loaded yet".
• NOTE: The console returns "unreachable code after return statement[Learn More]" on the page load, but no additional messages show up after accepting the two prompts.

On Safari:

• I get the prompt to allow camera access, I click ok.
• I get the error "Webcam.js Error: Could not access webcam: TypeError: Type error TypeError: Type error"

On Safari on the mobile device:

• I get the error "Webcam.js error: Could not access webcam: Error: Invalid constraint Error: Invalid constraint"

Here is the xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://primefaces.org/ui" template="/common/template.xhtml">
<ui:define name="title">PhotoCam</ui:define>
<ui:define name="content">
    <h:form>
        <h:panelGrid columns="3" cellpadding="5">
            <p:photoCam widgetVar="pc" listener="#{photoCamView.oncapture}" update="photo"/>
            <p:commandButton type="button" value="Capture" onclick="PF('pc').capture()"/>
            <p:outputPanel id="photo">
                <p:graphicImage name="demo/images/photocam/#{photoCamView.filename}.jpeg"
                                rendered="#{not empty photoCamView.filename}"/>
            </p:outputPanel>
        </h:panelGrid>
    </h:form>
</ui:define>

Here is the java class

public class PhotoCamView {

private String filename;

private String getRandomImageName() {
    int i = (int) (Math.random() * 10000000);

    return String.valueOf(i);
}

public String getFilename() {
    return filename;
}

public void oncapture(CaptureEvent captureEvent) {
    filename = getRandomImageName();
    byte[] data = captureEvent.getData();

    ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
    String newFileName = externalContext.getRealPath("") + File.separator + "resources" + File.separator + "demo" +
                                File.separator + "images" + File.separator + "photocam" + File.separator + filename + ".jpeg";

    FileImageOutputStream imageOutput;
    try {
        imageOutput = new FileImageOutputStream(new File(newFileName));
        imageOutput.write(data, 0, data.length);
        imageOutput.close();
    }
    catch(IOException e) {
        throw new FacesException("Error in writing captured image.", e);
    }
}}

I appreciate any help with this.

(I've also posted this on Primefaces forum and am hoping someone here or there can help me. I'll update both sites when I figure this out)

Christina

Answer 1

Just download webcam.js from Github and put it on your xhtml folder. Then add <script type="text/javascript" src="webcam.js"></script> to your xhtml file

Answer 2

I just recently updated the Photocam to the latest version of its JS plugin and also fixed a similar bug for IE11. See here:

https://github.com/primefaces/primefaces/issues/4094

https://github.com/primefaces/primefaces/issues/3755

I highly recommend trying the 6.3-SNAPSHOT version of PrimeFaces from GitHub and letting us know whether this latest version has fixed your problems.