0

Tengo un problema con primeFaces y es que quiero que la cámara se deshabilite y se vuelva a habilitar Tengo este botón que al darle click se habilita la cámara del pc. Lo que sucede es que apenas entro la camara ya se encuentra habilitada y se supone el componente esta en estado " rendered= "false" "(Obviamente en el código lo manejo con un ManagedBean para cambiar el estado del reenderizado)

Imagen del boton:

Imagen del botón

Luego le doy en tomar foto se despliega un <p:dialog> con el componente <p:photoCam> se supone este componente se debe reenderizar cuando le de click al botón que mostré anteriormente

Componenete dialog con un photoCam:

Por último si le doy en Capture se debería deshabilitar la cámara y el flash se debería apagar. Pero esto no sucede y el componenete <p:photoCam> es como si siguiera funcionando.

Por último dejo el código:

(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>

el ManagedBean PhotoCamView(no me interesa que tome la foto, lo único que quiero es lo que mencione anteriormente) El método changeStatus() es el encargado de cambiar el estado del 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;
    }



}

Alguna idea? ya he intentado de todo.

1 respuesta 1

0

Bueno ya lo solucioné por si alguien le sucede lo mismo. Resulta que en js hay una función llamada dettach() la que permite quitar elementos del DOM. Esto lo supuse(y lo poco que encontré en un foro) ya que la función dettach() no esta nisiquiera documentada (O eso es lo que creo porque lo busque y no encontré nada). Para la solución de mi problema e inhabilitar la cámara de mi pc cuando el <p:dialog> se oculta y cuando se muestra el <p:dialog> habilitar de nuevo el <p:photoCam> es la siguiente:

<?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>

ese es mi código modificado, lo que pasa es que no se porque razón al tener un ManagedBean controlando el reenderizado no funciona además que al abrir la página la cámara se encedia sin haber abierto el <p:dialog> para eso lo solucioné con esta linea de código

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

Con el autoStart en false, cuando se carga el DOM, el componenete <p:photoCam> no se inicializa hasta que haya de por medio otra acción. Para activarla cuando el <p:dialog> es invocado se usa la siguiente linea de código:

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

oncomplete="PF('pc').attach() --> esta linea es suficiente para "adjuntar" de nuevo el componenete <p:photoCam> de esta manera cuando se reenderize el <p:dialog> se reenderiará el componenete <p:photoCam> y no antes.

Una vez se tome la foto o el componente se esconda la cámara deja de funcionar y se "desadjunta" del DOM lo que hace que el flash de la cámara se deshabilite y el componente también

<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()"--> esta linea de código en el <p:dialog> es suficiente para inhabilitar la cámara cuando el dialogo se esconda.

Espero que si alguien le pasa lo mismo o haya tenido el mismo problema le sea de utilidad!!!.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.