Disable the flash of the PhotoCam camera

0

I have a problem with primeFaces and I want the camera to be disabled and re-enabled I have this button that when clicking, the pc camera is enabled. What happens is that as soon as I enter the camera it is already enabled and the component is assumed to be in the "rendered=" false "state (Obviously in the code I use it with a ManagedBean to change the state of the re-render).

Image of the button:

Then I give in taking a photo displays <p:dialog> with the component <p:photoCam> this component is supposed to be reenderized when you click the button that I showed previously

Finally, if I give it to Capture, the camera should be disabled and the flash should turn off. But this does not happen and the percentage compo_de% is as if it continues to work.

Finally I leave the code:

(index.xhtml)

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="form">

            <p:commandButton value="Tomar foto" onclick="PF('dlg').show()" onsuccess="#{photoCamView.changeStatus()}"/>


            <p:dialog widgetVar="dlg" modal="true" draggable="false" resizable="false">

                <p:photoCam rendered="#{photoCamView.showMyCam}"  widgetVar="pc" listener="#{photoCamView.oncapture}"/>
                <p:commandButton id="cam"  onclick="PF('dlg').hide()" type="button" value="Capture" actionListener="#{photoCamView.changeStatus()}" />

            </p:dialog>

        </h:form>
    </h:body>
</html>

ManagedBean PhotoCamView (I do not want to take the photo, all I want is what I mentioned above) The changeStatus () method is responsible for changing the state of the render:

import java.io.File;
import java.io.IOException;
import javax.annotation.PostConstruct;
import javax.faces.FacesException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.imageio.stream.FileImageOutputStream;
import org.primefaces.event.CaptureEvent;

@ManagedBean
@ViewScoped
public class PhotoCamView {

    private boolean showMyCam;
    private String filename;

    @PostConstruct
    public void init(){
    this.showMyCam = false;
    }



    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);
        }
    }

    public void changeStatus(){
       if(this.showMyCam == true){
        this.showMyCam = false;
       }else{
       this.showMyCam = true;
       }
    }

    public boolean isShowMyCam() {
        return showMyCam;
    }

    public void setShowMyCam(boolean showMyCam) {
        this.showMyCam = showMyCam;
    }



}

Any ideas? I've tried everything.

    
asked by X_Xmeloxx2 04.06.2018 в 05:46
source

1 answer

0

Well I solved it in case someone happens the same. It turns out that in js there is a function called dettach () that allows you to remove elements from the DOM. This I supposed (and what little I found in a forum) since the function dettach () is not even documented (Or that's what I think because I searched and found nothing). For the solution of my problem and to disable the camera of my pc when the <p:dialog> is hidden and when the <p:dialog> is shown again to enable the <p:photoCam> is the following:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body >
        <h:form id="form">

            <p:commandButton  id="btn" value="Tomar foto" onclick="PF('dlg').show()" oncomplete="PF('pc').attach()"/>
            <p:dialog position="center center" id="dlg" onHide="PF('pc').dettach()" widgetVar="dlg" modal="true" draggable="false" resizable="false">

                <p:panelGrid  id="pan">
                    <p:photoCam  autoStart="false"  widgetVar="pc" listener="#{photoCamView.oncapture}"/>
                <p:commandButton id="cam"  onclick="PF('dlg').hide()" type="button" value="Capture" />
                    </p:panelGrid>

            </p:dialog>    
        </h:form>



    </h:body>
</html>

That is my modified code, what happens is that I do not know why because having ManagedBean controlling the reenderizado does not work besides that when opening the page the camera was encycled without having opened <p:dialog> for that I solved it with this line of code

<p:photoCam  autoStart="false"  widgetVar="pc" listener="#{photoCamView.oncapture}"/>

With autoStart set to false, when the DOM is loaded, the% compo_de% is not initialized until there is another action. To activate it when the <p:photoCam> is invoked the following line of code is used:

<p:commandButton  id="btn" value="Tomar foto" onclick="PF('dlg').show()" oncomplete="PF('pc').attach()"/>

oncomplete="PF ('pc'). attach () -> this line is enough to" attach "again the% compo_de% in this way when reenderize the <p:dialog> the component% will be reended <p:photoCam> and not before.

Once the photo is taken or the component is hidden, the camera stops working and is "unadjusted" from the DOM which causes the flash of the camera to be disabled and the component also

<p:dialog  id="dlg" onHide="PF('pc').dettach()" widgetVar="dlg" modal="true" draggable="false" resizable="false">

                <p:panelGrid  id="pan">
                    <p:photoCam  autoStart="false"  widgetVar="pc" listener="#{photoCamView.oncapture}"/>
                <p:commandButton id="cam"  onclick="PF('dlg').hide()" type="button" value="Capture" />
                    </p:panelGrid>

            </p:dialog>  

onHide="PF ('pc'). dettach ()" - > this line of code in <p:dialog> is enough to disable the camera when the dialog is hidden.

I hope that if the same thing happens to you or if you have had the same problem, it will be useful !!!.

    
answered by 04.06.2018 в 17:46