Cordova Plugin Simple Camera Preview
Cordova plugin that allows simple camera preview and taking pictures from Javascript and HTML
Installation
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;
}
for newer version ionic use the following:
html, body, .ion-app, .ion-content {
--background: transparent;
}
Make sure to set up the camera size as follows:
const aspectRatio = 3/4; // or 9/16
const cameraSize = this.getCameraSize(aspectRatio);
getCameraSize(aspectRatio) {
let height;
let width;
const ratio = 4 / 3;
const min = Math.min(window.innerWidth, window.innerHeight);
[width, height] = [min, Math.round(min / aspectRatio)];
if (this.isLandscape()) {
[width, height] = [height, width];
}
return {
x: (window.innerWidth - width) / 2,
y: (window.innerHeight - height) / 2,
width,
height,
};
}
isLandscape() {
return Math.abs(window.orientation % 180) === 90;
}
Android
Uses Google's CameraX API
Methods
enable(options, successCallback, errorCallback)
Starts the camera preview instance.
const params = {
targetSize: 1024,
lens: 'auto', // Camera lens (auto or wide). Default is auto.
direction: 'back', // Camera direction (front or back). Default is back.
aspectRatio: '3:4', // Camera aspect ratoio (3:4 or 9:16). Default is 3:4.
...cameraSize,
}
SimpleCameraPreview.enable(params, () => {
console.log("Camera enabled");
});
disable(successCallback, errorCallback)
Stops the camera preview instance.
SimpleCameraPreview.disable(params, () => {
console.log("Camera disabled");
});
capture(options, successCallback, errorCallback)
Take the picture
let options = {
flash: true,
};
SimpleCameraPreview.capture(options, (imagaeNativePath) => {
console.log(imagaeNativePath);
});
setSize(options, successCallback, errorCallback)
Set the camera frame size
let size = {
x: 0,
y: 0,
width: 1080,
height: 1920,
};
SimpleCameraPreview.setSize(size, () => {
console.log("Camera frame size set");
});
deviceHasUltraWideCamera(successCallback, errorCallback)
Check if device has ultra-wide camera
SimpleCameraPreview.deviceHasUltraWideCamera(size, (value: boolean) => {
console.log("Device has ultra-wide camera?: ", value);
});
switchCameraTo(options, successCallback, errorCallback)
Switch camera between wide or auto and set the camera direction (front or back) dynamically. Change camera aspect ratio.
The options variable can take the following keys:
Available options:
-
lens:
"wide" – Use a wide-angle lens."auto" – Automatically select the best available lens.
-
direction:
"front" – Use the front-facing camera."back" – Use the rear-facing camera.
-
aspectRatio:
"3:4" – Display 3/4 preview."9:16" – Display 9/16 preview.
Note:
Currently, the wide-angle lens functionality is not supported for the front-facing camera. If the lens is set to "wide" and the direction is set to "front", the camera will default to the "auto" lens instead of switching to the wide lens.
const params = {
lens: "wide",
direction: "back", // Specify camera direction
aspectRatio: "9:16",
...cameraSize,
};
SimpleCameraPreview.switchCameraTo(
params,
(value: unknown) => {
return (typeof value === "boolean" ? value : false);
},
(e: unknown) => {
console.log("cannot switch camera: ", e);
}
);
