Javafx How to display image captured from web cam in imageview in another scene


Javafx How to display image captured from web cam in imageview in another scene



I have this fxml layout. When I click on take photo it opens a screen for me to take a picture using web cam



enter image description here



Dialog layout to take pic from web cam



enter image description here



I want the picture captured on the web cam to replace the dummy image on the fxml layout beside take photo button.Here are my files:
FXML layout containing dummy image and take photo button


<HBox prefHeight="79.0" prefWidth="232.0" spacing="30.0">
<children>
<VBox prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView fx:id="profilePic" fitHeight="99.0" fitWidth="118.0" nodeOrientation="INHERIT" pickOnBounds="true">
<image>
<Image url="@../images/profile_photo.png" />
</image>
</ImageView>
</children>
</VBox>
<VBox prefHeight="200.0" prefWidth="100.0">
<children>
<Button mnemonicParsing="false" onAction="#takePhoto" text="Take Photo">
<font>
<Font size="13.0" />
</font>
<VBox.margin>
<Insets bottom="20.0" top="10.0" />
</VBox.margin>
</Button>
<Button mnemonicParsing="false" onAction="#pickPhoto" prefHeight="31.0" prefWidth="85.0" text="Upload ">
<font>
<Font size="13.0" />
</font>
<VBox.margin>
<Insets bottom="10.0" />
</VBox.margin></Button>
</children>
</VBox>
</children>
</HBox>



Controller for the FXML Layout


public class AddParentController implements Initializable {


@Override
public void initialize(URL location, ResourceBundle resources) {

}

public void doAll(){
ImageSelection.getImageSelectionInstance().imageProperty()
.addListener((obs, oldImage, newImage) -> profilePic.setImage(newImage));
}


public void takePhoto(){
try {
Stage dialogStage = new Stage(StageStyle.UNDECORATED);
BorderPane root = FXMLLoader.load(getClass().getResource("../views/WebCamPreview.fxml"));
Scene scene = new Scene(root, 850, 390);
dialogStage.setUserData("fromAddParent");
dialogStage.initModality(Modality.APPLICATION_MODAL);
dialogStage.setScene(scene);
dialogStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}

}



Dialog Layout containing WebCam Preview


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<BorderPane prefHeight="390.0" prefWidth="850.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.controllers.WebCamPreviewController">
<!-- TODO Add Nodes -->
<bottom>
<FlowPane fx:id="fpBottomPane" alignment="CENTER" columnHalignment="CENTER" hgap="50.0" prefHeight="80.0" prefWidth="200.0" style="-fx-background-color:#ccc;">
<children>
<Button fx:id="btnStartCamera" focusTraversable="false" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#stopCamera" prefHeight="40.0" prefWidth="120.0" text="Capture">
<font>
<Font name="Segoe UI" size="18.0" fx:id="x1" />
</font>
</Button>
<Button fx:id="btnProceedCamera" focusTraversable="false" font="$x1" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#proceed" prefHeight="40.0" prefWidth="120.0" text="Proceed" />
<Button fx:id="btnResetCamera" focusTraversable="false" font="$x1" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#startCamera" prefHeight="40.0" prefWidth="120.0" text="Reset" />
<Button fx:id="btnDisposeCamera" focusTraversable="false" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#disposeCamera" prefHeight="40.0" prefWidth="120.0" text="Close">
<font>
<Font name="Segoe UI" size="18.0" fx:id="x11" />
</font>
</Button>
</children>
</FlowPane>
</bottom>
<center>
<BorderPane fx:id="bpWebCamPaneHolder" prefHeight="200.0" prefWidth="200.0">
<center>
<ImageView fx:id="imgWebCamCapturedImage" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER" />
</center></BorderPane>
</center>
<top>
<GridPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="80.0" style="-fx-background-color:#ccc; ">
<children>
<Label text="Webcam Image Capture" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="0" GridPane.rowSpan="1" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
<font>
<Font name="Segoe UI" size="34.0" />
</font>
<GridPane.margin>
<Insets top="10.0" />
</GridPane.margin>
</Label>
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="795.0" minWidth="10.0" prefWidth="418.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="502.0" minWidth="10.0" prefWidth="482.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</top>
</BorderPane>



WebCam Preview Controller


import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
import java.net.URL;
import java.util.ResourceBundle;
import com.github.sarxos.webcam.WebcamPanel;
import javafx.application.Platform;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.concurrent.Task;
import javafx.embed.swing.SwingFXUtils;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import com.github.sarxos.webcam.Webcam;
import javafx.stage.Stage;

public class WebCamPreviewController implements Initializable {


@FXML Button btnStartCamera;
@FXML Button btnProceedCamera;
@FXML Button btnDisposeCamera,btnResetCamera;
@FXML BorderPane bpWebCamPaneHolder;
@FXML FlowPane fpBottomPane;
@FXML ImageView imgWebCamCapturedImage;
private BufferedImage grabbedImage;
private WebcamPanel selWebCamPanel = null;
private Webcam selWebCam = null;
private boolean stopCamera = false;
private ObjectProperty<Image> imageProperty = new SimpleObjectProperty<Image>();
Image mainiamge;
private String userData;

@Override
public void initialize(URL arg0, ResourceBundle arg1) {

fpBottomPane.setDisable(true);

try{
initializeWebCam(0);
}catch(Exception e){
e.printStackTrace();
}

Platform.runLater(() -> {
userData = (String) fpBottomPane.getScene().getWindow().getUserData();
setImageViewSize();
});

}
protected void setImageViewSize() {

double height = bpWebCamPaneHolder.getHeight();
double width = bpWebCamPaneHolder.getWidth();
imgWebCamCapturedImage.setFitHeight(height);
imgWebCamCapturedImage.setFitWidth(width);
imgWebCamCapturedImage.prefHeight(height);
imgWebCamCapturedImage.prefWidth(width);
imgWebCamCapturedImage.setPreserveRatio(true);

}
protected void initializeWebCam(final int webCamIndex) {

Task<Void> webCamIntilizer = new Task<Void>() {

@Override
protected Void call() throws Exception {

if(selWebCam == null)
{
selWebCam = Webcam.getWebcams().get(webCamIndex);
selWebCam.open();
}else
{
closeCamera();
selWebCam = Webcam.getWebcams().get(webCamIndex);
selWebCam.open();

}
startWebCamStream();
return null;
}

};

new Thread(webCamIntilizer).start();
fpBottomPane.setDisable(false);
btnProceedCamera.setDisable(true);
btnResetCamera.setDisable(true);
}

protected void startWebCamStream() {

stopCamera = false;
Task<Void> task = new Task<Void>() {


@Override
protected Void call() throws Exception {

while (!stopCamera) {
try {
if ((grabbedImage = selWebCam.getImage()) != null) {

Platform.runLater(new Runnable() {
@Override
public void run() {
mainiamge = SwingFXUtils
.toFXImage(grabbedImage, null);
imageProperty.set(mainiamge);
}
});

grabbedImage.flush();

}
} catch (Exception e) {
} finally {

}

}

return null;

}

};
Thread th = new Thread(task);
th.setDaemon(true);
th.start();
imgWebCamCapturedImage.imageProperty().bind(imageProperty);

}

private void closeStage() {
((Stage) fpBottomPane.getScene().getWindow()).close();
}

private void closeCamera()
{
if(selWebCam != null)
{
selWebCam.close();
}
}

public void proceed(){
ImageSelection.getImageSelectionInstance().setImage(imgWebCamCapturedImage.getImage());
AddParentController apc = new AddParentController();
apc.doAll();
closeStage();
}

public void proceedToAddPartner(){

}

public void stopCamera(ActionEvent event)
{
stopCamera = true;
btnStartCamera.setDisable(true);
btnResetCamera.setDisable(false);
btnProceedCamera.setDisable(false);
}

public void startCamera(ActionEvent event)
{
stopCamera = false;
startWebCamStream();
btnStartCamera.setDisable(false);
btnResetCamera.setDisable(true);
btnProceedCamera.setDisable(true);
}

public void disposeCamera(ActionEvent event)
{
//stopCamera = true;
//closeCamera();
//Webcam.shutdown();
//btnStopCamera.setDisable(true);
//btnStartCamera.setDisable(true);
closeStage();
}


}



Image Model


import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.image.Image;

public class ImageSelection {

private final ObjectProperty<Image> image = new SimpleObjectProperty<>();

private static ImageSelection imageSelectionInstance= new ImageSelection();

private ImageSelection(){}

public static ImageSelection getImageSelectionInstance() {
return imageSelectionInstance;
}

public ObjectProperty<Image> imageProperty() {
return image ;
}

public final void setImage(Image image) {
imageProperty().set(image);
}

public final Image getImage()
{
return imageProperty().get();
}

}



The challenge is to make the Image captured by the web cam to display in profilPic ImageView on the AddParent FXML Layout.





TL; DR; Is the question how to display the captured image ? If so please remove all information that is not needed (like image cpature) and post Minimal, Complete, and Verifiable example
– c0der
Jul 2 at 4:52





c0der, the question is how to display the captured image in an image view on another scene.
– Princewill Iroka
Jul 2 at 7:43






So the whole capturing process is not really needed to answer, is it ? Please post Minimal, Complete, and Verifiable example
– c0der
Jul 2 at 8:46









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

How to set up datasource with Spring for HikariCP?

Display dokan vendor name on Woocommerce single product pages