Cordova plugin that allows simple camera preview and taking pictures from Javascript and HTML
cordova plugin add https://github.com/spoonconsulting/cordova-plugin-simple-camera-preview.git
ionic cordova plugin add https://github.com/spoonconsulting/cordova-plugin-simple-camera-preview.git
Make the webview html background color transparent.
html, body, .ion-app, .ion-content {
background-color: transparent;
}Uses Google's CameraX API
Get the ratio for the camera preview instance (4:3, 16:9, ....).
const params = {
targetSize: 1024,
}
SimpleCameraPreview.setOptions(params, (ratio) => {
console.log(ratio);
});Starts the camera preview instance.
const params = {
targetSize: 1024,
direction: 'back', // Camera direction (front or back). Default is back.
}
SimpleCameraPreview.enable(params, () => {
console.log("Camera enabled");
});Stops the camera preview instance.
SimpleCameraPreview.disable(params, () => {
console.log("Camera disabled");
});Take the picture
let options = {
flash: true,
};
SimpleCameraPreview.capture(options, (imagaeNativePath) => {
console.log(imagaeNativePath);
});Set the camera frame size
let size = {
x: 0,
y: 0,
width: 1080,
height: 1920,
};
SimpleCameraPreview.setSize(size, () => {
console.log("Camera frame size set");
});Check if device has ultra-wide camera
SimpleCameraPreview.deviceHasUltraWideCamera(size, (value: boolean) => {
console.log("Device has ultra-wide camera?: ", value);
});Switch camera between wide or auto
The variable lens can take two values:
"wide"
or
"auto"const params = {
lens: "wide",
}
SimpleCameraPreview.switchCameraTo(
params,
(value: unknown) => {
return (typeof value === "boolean" ? value : false);
},
(e: unknown) => {
console.log("cannot switch camera: ", e);
}
);